21.按钮的个性化设计

Posted 2021-03-23 孤舟一夏

颜色使用十六进制表示的网址

https://www.sioe.cn/yingyong/yanse-rgb-16/

 

本文主要给介绍两种安卓按钮的个性化设计。

1.简单实现一个个性化的按钮

2.实现按钮按下和没有按下是两种风格

 

原理：

设计安卓按钮的个性，其实就是给他加上一个背景的属性，

再对这个背景进行设置即可达到目标的结果，

 

按钮的xml设置

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:background="@drawable/yuanjiao"
        android:gravity="center"
        android:text="圆角Button"

        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"

        android:background="@drawable/complete"
        android:gravity="center"
        android:text="完美Button"

        />

 

接下来就是设计这个背景，

背景的创建是这个

在项目的res下右击，点击new，点击android resource file

然后

 

 

然后就可以见到这样的一个界面生成了

 

 

然后下一步，就可以在里面编写代码进行设置了，

下面是代码

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


    <!-- 填充颜色 -->
    <solid
        android:color="#9fd4ff"
    />

    <!-- 圆角使用，圆角半径-->
    <corners
        android:radius="10dp"></corners>


    <!-- 渐变效果-->
    <!-- 渐变类型放射，角度，开始颜色 -->
    <gradient
        android:useLevel="false"
        android:type="linear"
        android:angle="45"
        android:startColor="#ff96ba"
        android:centerColor="#ffe030"
        android:endColor="#FF96DEFF"
    />

    <!-- 内边距  // 设置底部边距  // 左边边距// 右边// 顶部-->
    <padding
        android:bottom="1dp"
    android:left="3dp"
    android:right="3dp"
    android:top="2dp"
    />

    <!-- 大小  // 宽度    // 高度-->
    <size
        android:height="115dp"
    android:width="25dp"
    />

    <!-- 描边 // 描边的颜色 // 描边的宽度// 虚线间隔 // 虚线宽度-->
    <stroke
        android:color="#FFFF6A9D"
        android:width="5dp"
        android:dashGap="5dp"
        android:dashWidth="5dp"></stroke>


</shape>

效果：

 

 这就不一样了奥！！

 

 

 

第二种，可以按下按钮时让按钮有所变化，而且不是通过逻辑代码完成，只需要在背景里面加入属性。

和第一个不一样的是他创建背景的时候的步骤是

 

 选了这个生成了就和上面的不一样了，毕竟这第二个可是两个shape

创建好了之后，

代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"><!--被按下时-->
        <shape android:shape="oval"><!--默认为矩形，可以设置为矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring)-->
            <corners android:radius="15dp" />   <!--圆角-->
            <solid android:color="#ffcece"/>       <!--内部填充色-->
        </shape>
    </item>



    <item android:state_pressed="false"><!--最后一个item不设置state_pressed时表示所有其他状态(只有在最后才能不写state_pressed不然之后的item会被忽略)-->
        <shape >
            <corners android:radius="15dp" />
            <gradient
                android:type="linear"
                android:useLevel="false"
                android:angle="45"
                android:startColor="@color/colorAccent"
                />
        </shape>
    </item>

</selector>

 

 

 

本文参考至：

https://blog.csdn.net/qq_15128547/article/details/56680494