一 前言
自定義陰影時需要加上透明度才能更好實現(xiàn)平滑的效果,所以需要了解相關(guān)方面的知識。當然也不僅限于陰影實現(xiàn)效果,還有其他的UI設(shè)計也涉及到透明度了。
二 色值代表
ARGB這是對應(yīng)的色值符號,A代表alpha透明度,R=RED,G=Green,B=BLUE。
<!--100% —FF-->
<!--95% — F2-->
<!--90% — E6-->
<!--85% — D9-->
<!--80% — CC-->
<!--75% — BF-->
<!--70% — B3-->
<!--65% — A6-->
<!--60% — 99-->
<!--55% — 8C-->
<!--50% — 80-->
<!--45% — 73-->
<!--40% — 66-->
<!--35% — 59-->
<!--30% — 4D-->
<!--25% — 40-->
<!--20% — 33-->
<!--15% — 26-->
<!--10% — 1A-->
<!--5% — 0D-->
<!--0% — 00-->
100% - FF表示完全不透明。
做自定義引用時,最好加上A對應(yīng)的值。ARGB由8位符號表示例如:#FFFFFFFF
每一位符號是十六進制字符,也就是0-F的取值。
案例-自定義陰影效果
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<layer-list>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="#0D90A1F5"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="#1A90A1F5"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
</layer-list>
</item>
<item android:state_focused="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="@color/transparent"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="@color/transparent"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
</layer-list>
</item>
</selector>
簡單的陰影效果只需要<layer-list><item.../></layer-list>如此包裹即可。若加上了selector則有了選擇效果。當然,item越多且stroke或者padding越小,陰影效果的層疊會細致而不容易看出層次感。
拋出個問題:
item中的stroke中的width=1px,padding top&bottom=1px,那么整個item的高度是多大呢?
2px? 或者4px?