實(shí)現(xiàn)卡片的陰影效果漓摩,且點(diǎn)擊時(shí)跟著變化
- 自定義xml文件
- selector + shape +layer-list + State List
- 引用
- 漸變陰影
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 點(diǎn)擊之后 -->
<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>
根據(jù)不同狀態(tài)寫出多個(gè)<item>拇泛,無論是editor、button或者是其他的布局與控件思灌,
直接用 background 屬性來引用:
android:background="@drawable/xxxxx"
下面是解析上面不同標(biāo)簽的作用:
<selector>
根據(jù)不同的選定狀態(tài)來定義不同的現(xiàn)實(shí)效果
分為四大屬性:
android:state_selected 選中
android:state_focused 獲得焦點(diǎn)
android:state_pressed 點(diǎn)擊
android:state_enabled 設(shè)置是否響應(yīng)事件,指所有事件
android:state_window_focused 默認(rèn)時(shí)的背景圖片
<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> 將多個(gè)圖片或畫布按照順序?qū)盈B起來
<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里的屬性是相對(duì)的偏移距離
漸變的陰影
<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>