实现卡片的阴影效果,且点击时跟着变化
- 自定义xml文件
- selector + shape +layer-list + State List
- 引用
- 渐变阴影
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 点击之后 -->
<item android:state_pressed="true">
<layer-list><item android:left="-1dp" android:top="0.5dp" android:bottom="1.8dp"><shape>
<solid android:color="#fff" />
<corners android:radius="5dp" />
<stroke android:width="1dp" android:color="#ffffffff" />
</shape></item></layer-list>
</item>
<item><layer-list>
<!-- 第一层,先绘制阴影 -->
<item android:left="0.5dp" android:top="0.5dp"><shape>
<solid android:color="#665e5e5e" />
<corners android:radius="5dp" />
<!-- 描边
<stroke android:width="1dp" android:color="#ffffffff" />
-->
</shape></item>
<!-- 第二层,看到的框 -->
<item android:bottom="1dp" android:right="0dp"><shape>
<solid android:color="#fff" />
<corners android:radius="5dp" />
<stroke android:width="1dp" android:color="#ffffffff" />
</shape></item>
</layer-list></item>
</selector>
根据不同状态写出多个<item>,无论是editor、button或者是其他的布局与控件,
直接用 background 属性来引用:
android:background="@drawable/xxxxx"
下面是解析上面不同标签的作用:
<selector>
根据不同的选定状态来定义不同的现实效果
分为四大属性:
android:state_selected 选中
android:state_focused 获得焦点
android:state_pressed 点击
android:state_enabled 设置是否响应事件,指所有事件
android:state_window_focused 默认时的背景图片
<shape> 画布
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<!-- 圆角 -->
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<!-- 渐变颜色 -->
<gradient
android:angle="integer"
android:centerX="float"
android:centerY="float"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<!-- 填充颜色 -->
<solid
android:color="color" />
<!-- 笔画/边框 -->
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
<layer-list> 将多个图片或画布按照顺序层叠起来
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@[package:]drawable/drawable_resource"
android:id="@[+][package:]id/resource_name"
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</layer-list>
item里的属性是相对的偏移距离
渐变的阴影
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<!-- 阴影 -->
<item android:gravity="bottom">
<shape>
<size android:height="1.5dp"/>
<padding android:bottom="1.5dp"/>
<gradient
android:angle="-90"
android:endColor="@color/transparent"
android:startColor="#d1d1d1"/>
</shape>
</item>
<item android:gravity="top">
<shape>
<size android:height="1.5dp"/>
<padding android:top="1.5dp"/>
<gradient
android:angle="90"
android:endColor="@color/transparent"
android:startColor="#d1d1d1"/>
</shape>
</item>
</layer-list>
</item>
</selector>