Android - shape（二）：背景切换、添加阴影

button或者textview（ 需设置android:clickable=”true”）的点击后背景切换，常用到selector 、shape、layer-list 。

selector

常用于点击或默认图的切换。

shape

常用于设计背景图。

layer-list

常用于添加图层，如设计阴影。

使用layer-list可以将多个drawable按照顺序层叠在一起显示，默认情况下，所有的item中的drawable都会自动根据它附上view的大小而进行缩放，
layer-list中的item是按照顺序从下往上叠加的，即先定义的item在下面，后面的依次往上面叠放

一、切换背景：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <stroke android:width="5dp" android:color="#f00" />
            <corners android:radius="20dp" />
            <gradient android:angle="180" android:endColor="#00f" android:startColor="#f00" />
        shape>
    item>

    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <stroke android:width="5dp" android:color="#ff5a27cc" />
            <corners android:radius="20dp" />
            <solid android:color="#ffcccccc" />
        shape>
    item>

selector>

预览图：

二、添加阴影：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="10dp" />
        shape>
    item>
    
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="10dp" />
        shape>
    item>
layer-list>

预览图：

三、切换背景：添加一层阴影：

android控件边缘添加阴影：

如果是5.0以上用elevation属性就行。如果是5.0以下的手机为控件设置一个有阴影感的背景图片即可，也可以使用shape
在自定义shape中增加一层或多层，并错开，即可显示阴影效果。为增加立体感，按钮按下的时候，只设置一层。我们可以通过top, bottom, right 和 left 四个参数来控制阴影的方向和大小。

android:top=”50dp”;表示该item上边以ImageView上边界往里面缩了50dp
android:bottom=”50dp”表示该item下边以ImageView下边界往里面缩了50dp
android:left=”50dp”;表示该item左边以ImageView左边界往里面缩了50dp
android:right=”50dp”;表示该item右边以ImageView右边界往里面缩了50dp

参考：android控件边缘添加阴影

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

    <item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip" />
                shape>
            item>
        layer-list>
    item>

    <item>
        <layer-list>
            
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#66000000" />
                    <corners android:radius="30dip" />
                    
                    <stroke android:width="1dp" android:color="#ffffffff" />
                shape>
            item>
            
            <item android:bottom="4dp" android:right="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip" />
                    
                    <stroke android:width="1dp" android:color="#ffffffff" />
                shape>
            item>
        layer-list>
    item>
selector>

预览图：

四、切换背景：添加两层阴影

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

    
    <item android:state_pressed="true">
        <layer-list>
            <item android:bottom="4dp" android:right="4dp">
                <shape>
                    <solid android:color="#00ff00" />
                    <corners android:radius="3dp" />
                shape>
            item>
        layer-list>
    item>

    
    <item>
        <layer-list>
            
            <item android:bottom="2dp" android:right="2dp">
                <shape>
                    <solid android:color="#ff0000" />
                    <corners android:radius="3dp" />
                shape>
            item>
            
            <item android:bottom="4dp" android:right="4dp">
                <shape>
                    <solid android:color="#00ff00" />
                    <corners android:radius="3dp" />
                shape>
            item>
            
            <item android:bottom="6dp" android:right="6dp">
                <shape>
                    <solid android:color="#0000ff" />
                    <corners android:radius="3dp" />
                shape>
            item>
        layer-list>
    item>
selector>

预览图：

五、点击切换字体颜色

1、res/value/color中定义颜色

    <drawable name="color_red">#fffa3d39drawable>
    <drawable name="color_green">#ff00adbadrawable>
    <drawable name="color_gray">#fff4f4f8drawable>

2、res/drawable中定义颜色选择器drawable/text_color

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@drawable/color_red" android:state_enabled="true" 
        android:state_focused="false" android:state_pressed="false" />
    <item android:color="@drawable/color_gray" android:state_enabled="false" />
    <item android:color="@drawable/color_green" android:state_pressed="true" />
    <item android:color="@drawable/color_red" android:state_focused="true" />
selector>

3、布局xml中引用：android:textColor=”@drawable/text_color”即可

    "true"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="18dp"
        android:background="@drawable/shade3"
        android:gravity="center"
        android:padding="5dp"
        android:text="注册"
        android:textColor="@drawable/text_color"
        android:textSize="15sp" />