android: shape、selector、layer-list的使用做出设置按钮样式

shape和selector在Android UI设计中经常用到。我们要自定义一个圆角Button，点击Button有些效果的变化，或者定义Button圆角等效果。我们经常在一些app软件的设置里看到，比如微信的设置：



我们做一下类似的效果：

1、xml的button页面：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >

<Button
style="@style/settingItem"
android:drawableLeft="@drawable/icon_more_settings"
android:drawableRight="@drawable/down_new"
android:text="我是李飞" />

<Button
style="@style/settingItem"
android:drawableLeft="@drawable/icon_more_settings"
android:drawableRight="@drawable/down_new"
android:text="我是李飞" />

<Button
style="@style/settingItem"
android:drawableLeft="@drawable/icon_more_settings"
android:drawableRight="@drawable/down_new"
android:text="我是李飞" />

</LinearLayout>

2、Button的style样式：

<style name="settingItem">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">44dip</item>
<item name="android:layout_marginLeft">10dip</item>
<item name="android:layout_marginRight">10dip</item>
<item name="android:layout_marginBottom">12dip</item>
<item name="android:background">@drawable/button</item>
<!-- <item name="android:drawableRight">@drawable/arrow_right</item> -->
<item name="android:gravity">left|center_vertical</item>
<item name="android:paddingRight">10dip</item>
<item name="android:paddingLeft">13dip</item>
<item name="android:drawablePadding">15dip</item>
<item name="android:paddingTop">7dip</item>
<item name="android:paddingBottom">7dip</item>
<item name="android:textColor">#060606</item>
<item name="android:textSize">16sp</item>
</style>

3、button点击和未点击的背景样式，用到selector ：

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="false" android:drawable="@drawable/button_set"></item>
<item android:state_pressed="true" android:drawable="@drawable/button_set_pressed"></item>
</selector>

点击时背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape>
<!--填充-->
<solid android:color="#666666" />
<!--圆角-->
<corners
android:bottomLeftRadius="4px"
android:bottomRightRadius="4px"
android:topLeftRadius="4px"
android:topRightRadius="4px" />
<!--描边-->
<stroke android:width="1px" android:color="#d9d9d9" />
</shape>
</item>
<!-- 个人觉得：bottom，right外边框的顶部，左边的内padding值,主要为实现阴影效果 -->
<item android:top="0dp" android:bottom="1dp" android:left="0dp" android:right="1dp">
<shape>
<!--填充-->
<solid android:color="#e4fbeb" />
<!--圆角-->
<corners
android:bottomLeftRadius="4px"
android:bottomRightRadius="4px"
android:topLeftRadius="4px"
android:topRightRadius="4px" />
<!--描边-->
<stroke android:width="1px" android:color="#ffffff" />
</shape>
</item>

</layer-list>

未点击时背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape>
<!--填充-->
<solid android:color="#666666" />
<!--圆角-->
<corners
android:bottomLeftRadius="4px"
android:bottomRightRadius="4px"
android:topLeftRadius="4px"
android:topRightRadius="4px" />
<!--描边-->
<stroke android:width="1px" android:color="#d9d9d9" />
</shape>
</item>
<!-- 个人觉得：bottom，right外边框的顶部，左边的内padding值,主要为实现阴影效果 -->
<item android:top="0dp" android:bottom="1dp" android:left="0dp" android:right="1dp">
<shape>
<!--填充-->
<solid android:color="#ffffff" />
<!--圆角-->
<corners
android:bottomLeftRadius="4px"
android:bottomRightRadius="4px"
android:topLeftRadius="4px"
android:topRightRadius="4px" />
<!--描边-->
<stroke android:width="1px" android:color="#ffffff" />
</shape>
</item>
</layer-list>

效果图：



知识补充：

shape的属性：

每个状态（item）都对应着一个效果，shape是用来定义形状的，以下为shape的一些常见属性：

1、solid：

实心，就是填充的意思 android:color指定填充的颜色

2、gradient：

渐变 android:startColor和android:endColor分别为起始和结束颜色，

android:angle是渐变角度，必须为45的整数倍。当angle=0时，渐变色是从左向 右。 然后逆时针方向转，当angle=90时为从下往上。另外渐变默认的模式为android:type=”linear”，即线性渐变，可以指定渐变为径向渐变， android:type=”radial”，径向渐变需要指定半径android:gradientRadius=”50”，也可一指定二者的综合，扫描渐变 android: type=”sweep”

3、stroke：

描边 android:width=”2dp” 描边的宽度，

android:color 描边的颜色。

我们还可以把描边弄成虚线的形式，设置方式为： android:dashWidth=”5dp” android:dashGap=”3dp” 其中android:dashWidth表示’-‘这样一个横线的宽度，android:dashGap表示之间隔开的距离。

4、corners：

圆角 android:radius为角的弧度，值越大角越圆。

我们还可以把四个角设定成不同的角度，方法为： android:topRightRadius=”20dp” 右上角android:bottomLeftRadius=”20dp” 右下角android:topLeftRadius=”1dp” 左上角android:bottomRightRadius=”0dp” 左下角 这里有个地方需要注意，bottomLeftRadius是右下角，而不是左下角

5、panding：内边矩