layer-list实现阴影和选择器效果

来源：互联网发布：linux ubuntu安装 rpm 编辑：程序博客网时间：2024/06/11 02:03

实现这个效果的话，不需要多高深的技术，但是关键是要有耐心和对细节完美的追求。先看效果图：

这里写图片描述

布局：

<LinearLayout        android:layout_width="180dp"        android:layout_height="40dp"        android:orientation="horizontal"        android:layout_gravity="center_horizontal"        android:layout_margin="10dp"        >        <TextView            android:id="@+id/tv_tab1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:clickable="true"            android:gravity="center"            android:text="tab1"            android:background="@drawable/layerlist_left_white_corner"            />        <TextView            android:id="@+id/tv_tab2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:clickable="true"            android:gravity="center"            android:text="tab2"            android:background="@drawable/layerlist_right_white_corner"            />    </LinearLayout>

当初构思是给LinearLayout加个大圆角的背景，每个textview只负责设置selector, 结果没有效果，阴影不出现。给LinearLayout加个1px 的paading，阴影出现了，但是有个1px的间隔，就和美工做出的原型图有细微差别了，为了还原UI图，只好采用另外一种方法：即每个textview既负责阴影，也负责selector效果。
那就是layer-list和selector结合。

先看左边的效果：

layer-list item第一层（底层）设置好圆角边框和边框颜色
layer-list item第二层（上面一层）用selector描述。注意：设置bottom,top,left时，为什么没有right呢？因为右边按钮会设置这四个属性，左边再设置right，交叉部分就会有1px重叠现象。

代码：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape>            <corners android:bottomLeftRadius="25dp"                     android:topLeftRadius="25dp"/>                <!-- 边框颜色 -->                <solid android:color="#dedede"/>        </shape>    </item>    <item android:bottom="1dp"    android:top="1dp"    android:left="1dp">        <selector>            <item android:state_selected="true">                <!--选中状态-->                <shape>                    <corners                    android:bottomLeftRadius="25dp"                    android:topLeftRadius="25dp"                    />                    <solid android:color="#ffff00"/>                </shape>            </item>            <!--默认状态-->            <item>                <shape>                    <corners  android:bottomLeftRadius="25dp"                              android:topLeftRadius="25dp"/>                        <solid android:color="#FFFFFF"/>                </shape>            </item>        </selector>    </item></layer-list>

同理，趁热打铁，再来个右边效果：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape>            <corners android:bottomRightRadius="25dp"                     android:topRightRadius="25dp"/>                <!-- 边框颜色 -->                <solid android:color="#dedede"/>        </shape>    </item>    <item android:bottom="1dp"    android:right="1dp"    android:top="1dp"    android:left="1dp">        <selector>            <item android:state_selected="true">                <!--选中状态-->                <shape>                    <corners                        android:bottomRightRadius="25dp"                        android:topRightRadius="25dp"                    />                    <solid android:color="#ffff00"/>                </shape>            </item>            <!--默认状态-->            <item>                <shape>                    <corners  android:bottomRightRadius="25dp"                              android:topRightRadius="25dp"/>                        <solid android:color="#FFFFFF"/>                </shape>            </item>        </selector>    </item></layer-list>

这样就大功告成了。layer-list也是属于drawable, 引用的时候通过”@drawable/layerlist_right_white_corner”。

0 0