Android利用LayerDrawable实现各大App应用市场上选项卡切换效果

 

在应用市场下载App的时候经常会看到上面的选项卡切换，当然项目中遇到的时候,UI也可以切图,这种效果其实我们也可以自己手动实现的；使用LayerDrawable;

LayerDrawable是一种层次化的Drawable集合,通过不同的Drawable放在不同的层次上可以达到叠加的效果；

更多关于它的使用可以自己百度一下；

上面这总功能开发中也是很常见的,其实你要实现起来还是很麻烦的,不过使用LayerDrawable实现还是可以的;

它的实现思路是这样：

先分成三个部分 ，最左边，中间，右边，每一部分的状态分为选中和没选中，没选中的状态使用LayerDrawable来处理;底部是红色，上面盖上一层白色,留下1dp的红色间距；左右两边处理一下圆角；注意圆角的大小，处理圆角的时候，最底层Drawable圆角的corners值-它上面的Drawable圆角corners值=留出的间距，这样处理的效果是最好的，至于是为什么，这个我也不清楚，我是实践出来的效果；不信的话，可以自己动手试试；下面是xml,最下面有完整的代码下载;

左边的drawable文件：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="false">        <layer-list>            <item>                <shape android:shape="rectangle">                    <solid android:color="@color/colorPrimary" />                    <corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" />                </shape>            </item>            <item android:bottom="1dp" android:left="1dp" android:right="0dp" android:top="1dp">                <shape android:shape="rectangle">                    <solid android:color="@android:color/white" />                    <corners android:bottomLeftRadius="4dp" android:topLeftRadius="4dp" />                </shape>            </item>        </layer-list>    </item>    <item android:state_checked="true">        <shape android:shape="rectangle">            <solid android:color="@color/colorPrimary" />            <corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" />        </shape>    </item></selector>

中间的是这样：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="false">        <layer-list>            <item>                <shape android:shape="rectangle">                    <solid android:color="@color/colorPrimary" />                </shape>            </item>            <item android:bottom="1dp" android:left="1dp" android:right="0dp" android:top="1dp">                <shape android:shape="rectangle">                    <solid android:color="@android:color/white" />                </shape>            </item>        </layer-list>    </item>    <item android:state_checked="true">        <shape android:shape="rectangle">            <solid android:color="@color/colorPrimary" />        </shape>    </item></selector>

右边的是：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="false">        <layer-list>            <item>                <shape android:shape="rectangle">                    <solid android:color="@color/colorPrimary" />                    <corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />                </shape>            </item>            <item android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp">                <shape android:shape="rectangle">                    <solid android:color="@android:color/white" />                    <corners android:bottomRightRadius="4dp" android:topRightRadius="4dp" />                </shape>            </item>        </layer-list>    </item>    <item android:state_checked="true">        <shape android:shape="rectangle">            <solid android:color="@color/colorPrimary" />            <corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />        </shape>    </item></selector>

完整代码下载 LayerDrawable使用Demo