button或者textview( 需设置android:clickable=”true”)的点击后背景切换,常用到selector 、shape、layer-list 。
selector
常用于点击或默认图的切换。
shape
常用于设计背景图。
layer-list
常用于添加图层,如设计阴影。
使用layer-list可以将多个drawable按照顺序层叠在一起显示,默认情况下,所有的item中的drawable都会自动根据它附上view的大小而进行缩放,
layer-list中的item是按照顺序从下往上叠加的,即先定义的item在下面,后面的依次往上面叠放
一、切换背景:
<?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="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>
预览图:
二、添加阴影:
<?xml version="1.0" encoding="utf-8"?>
<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
<?xml version="1.0" encoding="utf-8"?>
<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>
预览图:
四、切换背景:添加两层阴影
<?xml version="1.0" encoding="utf-8"?>
<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">#fffa3d39</drawable>
<drawable name="color_green">#ff00adba</drawable>
<drawable name="color_gray">#fff4f4f8</drawable>
2、res/drawable中定义颜色选择器drawable/text_color
<?xml version="1.0" encoding="utf-8"?>
<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”即可
<TextView
android:clickable="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" />