第一：是什么？
我们在之前讲过shape以及selector的使用了，它们作为Android开发当中的样式开发，使用率是比较高的，而底部Tab菜单的开发也是经常用到的，今天我们就shape与selector结合RadioButton来讲解一下底部Tab菜单的编写。
第二：有什么用？
使用shape和selector可以快速定义开发我们想要的底部菜单效果，结合RadioButton的一些属性，我们可以快速开发出可用的底部Tab菜单，我们来看下最终效果。
以上的一个底部tab菜单的效果我们就是主要通过radiobutton，shape以及selector实现的。
第三：如何用？
shape和selector我们都已经不陌生了，而radiobutton作为常用的控件也是很熟悉了，不过这里面对于新手而言也是有些地方需要注意的，我们下面来一步步实现上述效果。
首先我们需要编写底部菜单的布局，从最简单的radiobutton开始，这里需要四个radiobutton，我们将其都放在一个radiogroup当中，布局文件代码如下。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android";
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RadioButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="首页"
android:textSize="15sp" />
<RadioButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="活动" />
<RadioButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="社区" />
<RadioButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="个人" />
</RadioGroup>
</LinearLayout>
效果如下
这里我们需要将这个文字旁边的小圆圈给去掉，我们可以给radiobutton设置以下属性来去掉这个圆圈。
android:button="@null"这个时候就变成了这个样子。
接下来，我们需要设置每个tab所要展示的图片，这个时候我们可以用到radiobutton的这个属性。
android:drawableTop="@drawable/a"可以直接在文本的上方设置图片，这个属性还是比较好用的，我们再来看下效果。
这个时候我们就需要考虑一下了，我们知道通常在底部tab菜单中，每一个tab选项都有两种状态，一种是被选中的时候，一种是未被选中的时候，两种状态主要区别于文本颜色和图片，图片我们一般是准备颜色不同的两张作为不同状态之间的切换，我们想一下，要实现这样的功能该怎么做呢？
这就需要用到我们之前讲过的selector选择器了，接下来我们就为首页tab编写一个selector吧！
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android";>
<item android:drawable="@drawable/d" android:state_checked="true"></item>
<item android:drawable="@drawable/a" android:state_checked="false"></item>
</selector>
我们这里主要用到了item的drawable属性和sate_checked属性，当tab1被选中的时候我们显示图片d，相反，如果没有被选中我们则将图片更换为a，我们将其设置在控件中。
<RadioButton
android:drawableTop="@drawable/shouye_selector"
android:button="@null"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="首页"
android:textSize="15sp" />
我们来看下效果。
这里已经实现了不同状态的图片切换，接下来就是为文本再设置一个color选择器了。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android";>
<item android:color="#0206f1" android:state_checked="true"></item>
<item android:color="#000" android:state_checked="false"></item>
</selector>
因为底部tab关于文本颜色的设置都是一样的，所以我们设置这一个selector就可以在四个tab中引用，我们再将其设置到控件中看下效果。
<RadioButton
android:textColor="@color/bottomtab_color_selector"
android:drawableTop="@drawable/shouye_selector"
android:button="@null"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="首页"
android:textSize="15sp" />效果如下。
效果还不错，接下来同样的做法，我们为其他三个tab分别设置一个selector作为图片的切换，而文本我们还是使用之前设置的即可，代码如下。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android";
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RadioButton
android:textColor="@color/bottomtab_color_selector"
android:drawableTop="@drawable/shouye_selector"
android:button="@null"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="首页"
android:textSize="15sp" />
<RadioButton
android:textColor="@color/bottomtab_color_selector"
android:drawableTop="@drawable/huodong_selector"
android:button="@null"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="活动" />
<RadioButton
android:drawableTop="@drawable/shequ_selector"
android:textColor="@color/bottomtab_color_selector"
android:button="@null"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="社区" />
<RadioButton
android:drawableTop="@drawable/geren_selector"
android:textColor="@color/bottomtab_color_selector"
android:button="@null"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="个人" />
</RadioGroup>
</LinearLayout>
效果如下。
效果还不错，其实到这里，一个基本的底部tab菜单就完成了，但是我们为了巩固之前学的shape，所以再给这个tab加一个背景吧！我们知道通过shape可以进行xml绘图，我们接下来就绘制一个圆角矩形并且含有渐变色的shape作为这个底部菜单的背景。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";>
<size
android:width="400dp"
android:height="100dp">
</size>
<solid android:color="#c9c8c8"></solid>
<gradient android:startColor="#848484" android:centerColor="#7dedf5" android:endColor="#f47777"></gradient>
<corners android:radius="30dp"></corners>
</shape>
我们看实现的效果图（会得到如下矩形）
接下里我们在控件中引用它，这里我们给radiogroup设置这个shape。
<RadioGroup
android:background="@drawable/bottomtab_shape"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
效果如下。
如此一来我们就大功告成啦，其实还是蛮简单的，借用这个例子可以来练习一下之前的学过的shape和selector，还是不错的。
第四：注意
其实这个案例不难，但是对于新手也存在如下问题需要注意。
* 在给tab设置图片的时候我们使用到了android:drawableTop属性。
* 我们虽然实现额上述的效果，但是你会发现当你点击tab的时候会有一个波纹效果，如何去掉这个点击效果呢？我们只需要改变其背景颜色即可，一般做法是设置android:background="@null"属性即可。
* 因为我们使用到了radiobutton，我们都知道其默认含有一个圆圈作为选中状态，我们如何将这个默认的圆圈去掉呢？可以通过设置android:button="@null"属性完成。
第五：总结
只要掌握了shape和selector的基本使用，完成这个例子并不难，当然这只是关于shape和selector的一些简单的使用，更多的内容还需要大家在不断的学习中去发现了！
关于
来自一个自学的程序员，关注公众号，了解更多！
