Android开发之button的几种不同形状

版权声明：转载请标明链接， https://blog.csdn.net/qq_43433255/article/details/88365564

Android开发的过程中，button是最常用的控件之一，但有时候又会设计各种不同样式的button；
下面将会介绍几种不同形状的button。

新建上面的三个xml文件；
jian.xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape android:shape="rectangle" >
            <solid android:color="#ff58bb52" />
            <!--设置渐变色 angle=0 从左到右渲染，angle=90从上到下渲染，angle=180 从右到左渲染，-->
            <gradient
                android:angle="0"
                android:startColor="#F888c0"
                android:endColor="#CB5500" />
            <!--设置角的弧度-->
            <corners android:radius="8dp" />
            <!--设置边框以及弧度-->
            <stroke
                android:width="1dp"
                android:color="#000000" />
        </shape>
    </item>

    <item  android:state_pressed="true">
        <shape>
            <!--点击之后的颜色-->
            <solid android:color="#fff000"/>
            <!--设置角的弧度-->
            <corners android:radius="8dp"/>
            <!--点击之后的边框-->
            <stroke
                android:width="1dp"
                android:color="#000000"/>
        </shape>
    </item>
</selector>

效果：

jianbianbtn.xml文件的代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient android:startColor="#0000ff"
                android:endColor="#0000ff"
                android:angle="270" />
            <stroke android:width="1dip"
                android:color="#f403c9" />
            <corners android:radius="2dp" />
            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape>
            <gradient android:startColor="#ffc2b7"
                android:endColor="#ffc2b7"
                android:angle="270" />
            <stroke android:width="1dip"
                android:color="#f403c9" />
            <corners android:radius="2dp" />
            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient android:startColor="#336633"
                android:endColor="#336633"
                android:angle="180" />
            <stroke android:width="1dip"
                android:color="#f403c9" />
            <corners android:radius="5dip" />
            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

</selector>

效果：

yuanbtn.xml的代码为：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            >
            <!-- 填充的颜色 -->
            <solid android:color="#000000" />
            <!-- 设置按钮的四个角为弧形 -->
            <!-- android:radius 弧形的半径 -->
            <corners android:radius="105dip"/>

            <!-- padding: Button 里面的文字与Button边界的间隔 -->
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"
                />
        </shape>
    </item>

</selector>

最后，总的一个布局代码activitymain。xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="36dp"
        android:layout_marginBottom="115dp"
        android:text="button样式!"
        app:layout_constraintBottom_toTopOf="@+id/btn_2"
        app:layout_constraintEnd_toEndOf="@+id/btn_1"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_1"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/yuanbtn"
        android:text="圆"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/btn_2"
        android:layout_width="180dp"
        android:layout_height="0dp"
        android:layout_marginBottom="32dp"
        android:background="@drawable/jianbianbtn"
        android:text="变化"
        app:layout_constraintBottom_toTopOf="@+id/btn_3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/btn_3"
        android:layout_width="180dp"
        android:layout_height="0dp"
        android:layout_marginBottom="153dp"
        android:background="@drawable/jian"
        android:text="渐变"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_2" />

</android.support.constraint.ConstraintLayout>

效果为：

点击中间一个，颜色会发生变化哟！

当然更多的情况需要实际积累，只有通过日积月累，才会丰富自己的知识储存库！