标签：菜单 效果 -- shape selector Shape tab Selector 我们

第一：是什么？

我们在之前讲过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的一些简单的使用，更多的内容还需要大家在不断的学习中去发现了！

关于

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

标签：菜单,效果,--,shape,selector,Shape,tab,Selector,我们
来源： https://blog.51cto.com/u_11520563/2911956

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。