上面的效果是用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. CSS3 Animation Cheat Sheet:实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  2. 【GIT】Github上传本地代码详解

    本教程结合Github服务端和客户端完成本地代码上传至Github,下面进行详细讲解: 1.创建Github账号,这一个步骤应该不用太多解释,直接上官网进行注册登录即可https://github.c ...

  3. sql初始化XML操作

    /// <summary> /// 添加记录 /// </summary> /// <param name="sender"></para ...

  4. APP账号密码传输安全分析

            最近在搞公司的安卓APP测试(ThinkDrive 企邮云网盘)测试,安卓app测试时使用代理抓包,发现所此app使用HTTP传输账号密码,且密码只是普通MD5加密,存在安全隐患,无法 ...

  5. Azure ARM (4) 开始创建ARM Resource Group并创建存储账户

    <Windows Azure Platform 系列文章目录> 好了,接下来我们开始创建Azure Resource Group. 1.我们先登录Azure New Portal,地址是: ...

  6. Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例)

    这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例) ...

  7. 30天C#基础巩固------了解委托,string练习

    ---->了解委托.     生活中的例子:我要打官司,我需要找一个律师,法庭上面律师为当事人辩护,它真正执行的是当事人的陈词,这时律师 就相当于一个委托对象.当事人则委托律师为自己辩解.    ...

  8. HoverTree开源项目已经实现管理员登录

    ASP.NET开源项目HoverTree已经实现了管理员登录功能,最新代码请到以下网址查看.http://hovertree.com/down/ 点击Clone右边的Download就可以下载最新开发 ...

  9. .net的垃圾回收机制简述

    .如何理解.net中的垃圾回收机制. .NET Framework 的垃圾回收器管理应用程序的内存分配和释放.每次您使用 new 运算符创建对象时,运行库都从托管堆为该对象分配内存.只要托管堆中有地址 ...

  10. TCP 与 UDP

    TCP Transmission Control Protocol,传输控制协议,传输层通信协议. 采用“带重传的肯定确认”(Positive Acknowledge with Retransmiss ...