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

Android旧文 专栏收录该内容
26 篇文章 0 订阅

第一:是什么?

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

关于

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

这里写图片描述

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值