上面的效果是用Radio进行制作的,一般我们做底部的切换栏的时候需要让按钮和文字都有一个选中的状态,然后根据点击不同的按钮触发不同的页面,这里的页面一般都是fragment做的。这里我们不讨论复杂的东西,只是讲如何实现这样的效果。这里的关键点是中间的按钮和两边的按钮没有互斥关系,仅仅是一个独立的ImageView,还有就是按钮的文字需要根据选中的状态进行变化,按钮的图片需要根据状态进行变化。

一、定义按钮的图片和文字效果

我们在res中建立一个color的目录,建立一个main_bottombar_text_selector.xml的文件:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#ff0000" android:state_pressed="false" android:state_checked="true" />
<item android:color="#555555"/>
</selector>

这里可以明显的看出,我用到的仅仅是颜色值,而根据不同的状态颜色值是不同的。下面开始建立按钮图片的效果。

在drawable中建立一个main_bottombar_icon_home_selector.xml,写入如下代码:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_icon_home_highlight" android:state_checked="true" android:state_pressed="false" />
<item android:drawable="@drawable/tab_icon_home" />
</selector>

这里和上面不同点在于根据不同的状态选取的是图片。

二、准备就绪,实现效果

实现效果的方式超级简单,和linearLayout中放控件一模一样。

<RadioGroup
android:id="@+id/main_bottom_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="horizontal"
android:paddingTop="5dp"
> <RadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="1dp"
android:drawableTop="@drawable/main_bottombar_icon_home_selector"
android:gravity="center"
android:text="Tab01"
android:textColor="@color/main_bottombar_text_selector"
android:textSize="11sp"
/> <RadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="1dp"
android:drawableTop="@drawable/main_bottombar_icon_home_selector"
android:gravity="center"
android:text="Tab02"
android:textColor="@color/main_bottombar_text_selector"
android:textSize="11sp"
/> <ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="-3dp"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"
/> <RadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="1dp"
android:drawableTop="@drawable/main_bottombar_icon_home_selector"
android:gravity="center"
android:text="Tab03"
android:textColor="@color/main_bottombar_text_selector"
android:textSize="11sp"
/> <RadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="1dp"
android:drawableTop="@drawable/main_bottombar_icon_home_selector"
android:gravity="center"
android:text="Tab04"
android:textColor="@color/main_bottombar_text_selector"
android:textSize="11sp"
/> </RadioGroup>

需要注意的是radioGroup默认是纵向排列的,需要设置方向为横向才行哦~

如果你需要顶部的切换tab,可以参考:

https://github.com/hoang8f/android-segmented-control

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0512/1615.html

如果你还需要红点的话,可以参考我的一个github工程,是通过自定义RadioGroup来进行红点的控制的:

https://github.com/tianzhijiexian/BottomTabBar

源码下载:http://download.csdn.net/detail/shark0017/8801535

参考自:http://www.tuicool.com/articles/7VBbu2m

如何用RadioButton做一个底部的切换栏的更多相关文章

  1. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  2. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  3. Micropython 如何用Turnipbit做一个自动浇水装置

    最近在研究Turnipbit这块板子,打算是连接一个摄像头模块,正在实验练习中,(祝自己早日弄好)上篇文章我们讲了用Turnipbit连接LCD5110显示英文词句,前几天给家里花浇水的时候发现花招了 ...

  4. 如何用C#做一个悬浮窗口程序

    用C#做一个像FlashGet的悬浮窗口,其实很简单,不像以前需要调用很多系统API.大致的步骤如下. 首先是主窗体部分,即要判断窗体的状态来决定是否显示悬浮窗口. 局部成员声明: private F ...

  5. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

  6. 如何用css做一个细虚线边框表格

    <style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...

  7. 微信小程序~TabBar底部导航切换栏

    底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...

  8. vue2.0实现底部导航切换效果

    使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...

  9. R数据分析:跟随top期刊手把手教你做一个临床预测模型

    临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...

随机推荐

  1. 实用js代码大全

    实用js代码大全 //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyC ...

  2. mysql判断一条记录是否存在,如果存在,则更新此语句,如果不存在,则插入

    前言,在我们的业务逻辑中,很有可能会遇到这样的情况. 1.我要更新一条记录的值. 2.但是我不确定这条记录存不存在??? 3.那如果存在?我就更新,如果不存在,我就插入! 那么如果这样,一般情况下,我 ...

  3. Struts2 源码分析——过滤器(Filter)

    章节简言 上一章笔者试着建一个Hello world的例子.是一个空白的struts2例子.明白了运行struts2至少需要用到哪一些Jar包.而这一章笔者将根据前面章节(Struts2 源码分析—— ...

  4. 百度Map与HT for Web结合的GIS网络拓扑应用

    在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...

  5. 【Swift学习】Swift编程之旅(四)基本运算符

    Swift支持大部分标准C语言的运算符, 且改进许多特性来减少常规编码错误.如赋值符 = 不返回值, 以防止错把等号 == 写成赋值号 = 而导致Bug. 数值运算符( + , -, *, /, %等 ...

  6. 【转】Xml序列化

    XML序列化是将对象的公共属性和字段转换为XML格式,以便存储或传输的过程.反序列化则是从XML输出中重新创建原始状态的对象.XML序列化中最主要的类是XmlSerializer类.它的最重要的方法是 ...

  7. Emit学习(2) - IL - 常用指令介绍

    学习Emit必不可少的, 会使用到IL中间代码. 初见IL代码, 让我有一种汇编的感觉, 让我想起了, 大学时, 学习8051的汇编语言. 多的就不扯了, 直接进入正题, OpCodes指令集是不是有 ...

  8. C#读取配置文件的几种方式

    配置文件 <?xml version="1.0" encoding="utf-8" ?> <configuration> <con ...

  9. 127.0.0.1\SQLEXPRESS连接异常

    当你的数据库为SQLEXPRESS时,在程序的数据库连接字符串的服务Server使用127.0.0.1\SQLEXPRESS时,如下: 它会显示一异常: Server Error in '/' App ...

  10. 头文件里面的ifndef /define/endif的作用

    c,c++里面,头文件里面的ifndef /define/endif的作用 今天和宿舍同学讨论一个小程序,发现有点地方不大懂······ 是关于头文件里面的一些地方: 例如:要编写头文件test.h ...