Android button自定义样式显示

所以这篇文章就聊聊button的自定义显示，下一篇聊聊Android动画。

1.通过XML文件设置属性

定义后和未定义的对比

给button添加自定义的显示也非常简单，在button属性里加上android:background=“@drawable/bt_style_bg” 其中最主要的是在drawable文件夹下的bt_style_bg.xml文件

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



    <!-- 被按下 -->

    <item android:state_pressed="true"><shape>



            <!-- 颜色渐变 startColor开始颜色，endColor结束颜色,angle开始渐变的角度（值只能为90的倍数，0时为左到右渐变，90时为下到上渐变，依次逆时针类推-->

            <gradient android:angle="270" android:endColor="#ADFF2F" android:startColor="#ADFF2F"/>

            <!-- 按钮边缘框 -->

            <stroke android:width="1dip" android:color="#f403c9" />

            <!-- 按钮圆角度 -->

            <corners android:radius="2dp" />

            <!-- 按钮文字和边缘距离(内边距) -->

            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />

        </shape></item>



    <!-- 获取焦点 -->

    <item android:state_focused="true"><shape>

            <gradient android:angle="270" android:endColor="#00ff00" android:startColor="#00ffff" />



            <stroke android:width="1dip" android:color="#f403c9" />



            <corners android:radius="2dp" />



            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />

        </shape></item>



    <!-- 默认 -->

    <item><shape>

            <gradient android:angle="180" android:endColor="#ffffff" android:startColor="#000000" />



            <stroke android:width="1dip" android:color="#f403c9" />



            <corners android:radius="5dip" />



            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />

        </shape></item>



</selector>

shape属性的使用

圆角背景

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">



    <!-- 实心 即填充颜色-->

    <solid android:color="#E2F5F9"/>

    <!-- 描边 即边框颜色-->

    <stroke

        android:width="2dp"

        android:color="#125579" />

    <!-- 圆角 -->

    <corners

        android:topLeftRadius="180dp"

        android:bottomLeftRadius="180dp"

        android:topRightRadius="180dp"

        android:bottomRightRadius="180dp"/>

    <padding

        android:left="10dp"

         android:bottom="5dp"

        android:top="5dp"

        android:right="10dp"

        />

</shape>

圆形背景

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval">

    <padding

        android:bottom="2dp"

        android:left="2dp"

        android:right="2dp"

        android:top="2dp"></padding>

    <size android:height="15dp"

        android:width="15dp"></size>

    <solid android:color="#DD0000"></solid>

</shape>

2. 自定义形状、颜色、图样的按钮的实现

步骤如下。

(a) 设计一张自定义形状风格背景的图片，如下图。

(b) 未点击和按下后的状态各做一张，形成一套图片，如下图。

like_normal.png      like_pressed.png

© 创建和编写按钮不同状态的图片使用描述文件drawable/bt_like.xml

<?xml version="1.0" encoding="UTF-8"?>  

<selector xmlns:android="http://schemas.android.com/apk/res/android">  

    <item android:state_pressed="true"  

        android:drawable="@drawable/like_normal" />  

    <item android:state_focused="true"  

        android:drawable="@drawable/like_pressed" />  

    <item android:drawable="@drawable/like_normal" />