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