手把手教你Shape，Selector实战--打造底部Tab菜单

秒速五厘米 2021-09-14 12:12 364阅读 0赞

# 第一：是什么？ #

我们在之前讲过shape以及selector的使用了，它们作为Android开发当中的样式开发，使用率是比较高的，而底部Tab菜单的开发也是经常用到的，今天我们就shape与selector结合RadioButton来讲解一下底部Tab菜单的编写。

# 第二：有什么用？ #

使用shape和selector可以快速定义开发我们想要的底部菜单效果，结合RadioButton的一些属性，我们可以快速开发出可用的底部Tab菜单，我们来看下最终效果。

![这里写图片描述][SouthEast]

以上的一个底部tab菜单的效果我们就是主要通过radiobutton，shape以及selector实现的。

# 第三：如何用？ #

shape和selector我们都已经不陌生了，而radiobutton作为常用的控件也是很熟悉了，不过这里面对于新手而言也是有些地方需要注意的，我们下面来一步步实现上述效果。

首先我们需要编写底部菜单的布局，从最简单的radiobutton开始，这里需要四个radiobutton，我们将其都放在一个radiogroup当中，布局文件代码如下。

效果如下

![这里写图片描述][SouthEast 1]

这里我们需要将这个文字旁边的小圆圈给去掉，我们可以给radiobutton设置以下属性来去掉这个圆圈。

android:button="@null"

这个时候就变成了这个样子。

![这里写图片描述][SouthEast 2]

接下来，我们需要设置每个tab所要展示的图片，这个时候我们可以用到radiobutton的这个属性。

android:drawableTop="@drawable/a"

可以直接在文本的上方设置图片，这个属性还是比较好用的，我们再来看下效果。

![这里写图片描述][SouthEast 3]

这个时候我们就需要考虑一下了，我们知道通常在底部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，我们将其设置在控件中。

我们来看下效果。

![这里写图片描述][SouthEast 4]

这里已经实现了不同状态的图片切换，接下来就是为文本再设置一个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中引用，我们再将其设置到控件中看下效果。

效果如下。

![这里写图片描述][SouthEast 5]

效果还不错，接下来同样的做法，我们为其他三个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>

效果如下。

![这里写图片描述][SouthEast 6]

效果还不错，其实到这里，一个基本的底部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>

我们看实现的效果图（会得到如下矩形）

![这里写图片描述][SouthEast 7]

接下里我们在控件中引用它，这里我们给radiogroup设置这个shape。

效果如下。

![这里写图片描述][SouthEast 8]

如此一来我们就大功告成啦，其实还是蛮简单的，借用这个例子可以来练习一下之前的学过的shape和selector，还是不错的。

# 第四：注意 #

其实这个案例不难，但是对于新手也存在如下问题需要注意。

* 在给tab设置图片的时候我们使用到了android:drawableTop属性。
    * 我们虽然实现额上述的效果，但是你会发现当你点击tab的时候会有一个波纹效果，如何去掉这个点击效果呢？我们只需要改变其背景颜色即可，一般做法是设置android:background="@null"属性即可。
    * 因为我们使用到了radiobutton，我们都知道其默认含有一个圆圈作为选中状态，我们如何将这个默认的圆圈去掉呢？可以通过设置android:button="@null"属性完成。

# 第五：总结 #

只要掌握了shape和selector的基本使用，完成这个例子并不难，当然这只是关于shape和selector的一些简单的使用，更多的内容还需要大家在不断的学习中去发现了！

# 关于 #

来自一个自学的程序员，关注公众号，了解更多！

![这里写图片描述][SouthEast 9]

[SouthEast]: /images/20210813/a5b7974cc9b4475f98fcad47378e10cd.png
[SouthEast 1]: /images/20210813/5df6f0320b704cee9f0f0a2ed429b7e0.png
[SouthEast 2]: /images/20210813/bb33ed3513174a6bb432bed810ecccd1.png
[SouthEast 3]: /images/20210813/cbaebc23892647a699ec68cbc38909e6.png
[SouthEast 4]: /images/20210813/93f1e8225ded4b55a97282130fedf870.png
[SouthEast 5]: /images/20210813/47d53c54abba44cd9a22f9abd991ad13.png
[SouthEast 6]: /images/20210813/dfd73d3bc6684d048ac837e4e17e605c.png
[SouthEast 7]: /images/20210813/343e25a5632648829711abb15199fe84.png
[SouthEast 8]: /images/20210813/258af53f8b9d4a9085d37a8e3558fb96.png
[SouthEast 9]: /images/20210813/51272fb38b424a98a3691cd5e31d943a.png