主页tab是必须会有的,各种实现也很多。各有千秋。但目标都是简单、可控。今天用ConstraintLayout+radioGroup做一个tab。简单性可控性都还可以。本文目的把ConstraintLayout用起来。有需要的可以直接拿去用。

看一下效果

列下关键问题:

1.当然是切换tab.用radiogroup实现。

2.选中tab要1)字体颜色变换2)icon变换3)背景变换

3.去掉checked的那个小圈圈。

4.做上红点提示。

下面一个个来实现

第一步

ConstraintLayout 做根节点来布局。(android studio 2.2 以上)

第二步来个radiogroup

看一下RadioGroup怎么放:

 <RadioGroup
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:checkedButton="@+id/radioButton"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:ignore="MissingConstraints">
</RadioGroup>

 主要操作:在design界面把RG拖到底部,去掉padding. 

第三步来4个radiobutton

把layout_width去掉,都设为0dp。layout_weight=“1“

然后看到应该是如下这样的

第四步:不需要左右圈圈。

设置方法

android:button="@null"

文字居中

android:textAlignment="center"

文字颜色:

这里文字需要两个颜色,选中和非选中。那么需要一个selector.

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

icon设置:

也需要两个icon切换,选中与非选中

需要一个selector

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

设置背景:同样需要一个selector

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

几个点需要注意:文字跟icon距离 可以通过

android:drawablePadding来设置
经过以上步奏:
定义出来一radiobutton的样式是这样的:
  <style name="main_tab">
<item name="android:padding">5dp</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:background">@drawable/main_tab_bg_selector</item>
<item name="android:textSize">12sp</item>
<item name="android:textColor">@drawable/main_tab_text_color_selector</item>
<item name="android:textAlignment">center</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_width">0dp</item>
<item name="android:button">@null</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>

然后台可以看到布局出来了。

到这儿基本完成90%了。基本可以用了。

但是现在应用往往有小点提示。

很多人想着在radiobutton里做文章,搞来搞去,结果很麻烦。我觉得还另起一层,分开了搞。只是相对位置弄好就行了。

第五步来实现小红点。

ConstraintLayout又派上用场了,比相对布局牛X,可以添加基准线,可以按百分比来。

那就来几条:

  <android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.125" /> <android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="45dp" /> <android.support.constraint.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.375" /> <android.support.constraint.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.625" /> <android.support.constraint.Guideline
android:id="@+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.875" />

好了,再来几个textview按照guideline去布局。

显示不显示都很好控制。OK基本完成。

粘上整个代码:

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.lechang.MainActivity"> <RadioGroup
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:checkedButton="@+id/radioButton"
android:orientation="horizontal"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:ignore="MissingConstraints"> <RadioButton
android:id="@+id/ra_qulity"
style="@style/main_tab"
android:background="@drawable/main_tab_bg_selector"
android:checked="true"
android:drawableTop="@drawable/main_tab_my_selector"
android:text="@string/str_qulity" /> <RadioButton
android:id="@+id/ra_rink"
style="@style/main_tab"
android:drawableTop="@drawable/main_tab_my_selector"
android:text="@string/str_rink" /> <RadioButton
android:id="@+id/ra_dynamic"
style="@style/main_tab"
android:drawableTop="@drawable/main_tab_my_selector"
android:text="@string/str_dynamic" /> <RadioButton
android:id="@+id/ra_my"
style="@style/main_tab"
android:drawableTop="@drawable/main_tab_my_selector"
android:text="@string/str_my" />
</RadioGroup> <android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.125" /> <android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="45dp" /> <android.support.constraint.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.375" /> <android.support.constraint.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.625" /> <android.support.constraint.Guideline
android:id="@+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.875" /> <TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/main_tab_tip_rectangle_red_bg"
android:gravity="center"
android:minHeight="5dp"
android:minWidth="10dp"
android:text="99"
android:textColor="@color/white"
android:textSize="5sp"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
app:layout_constraintTop_toTopOf="@+id/guideline2" /> <TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/main_tab_tip_rectangle_red_bg"
android:gravity="center"
android:minHeight="5dp"
android:minWidth="10dp"
android:text="99"
android:textSize="5sp"
app:layout_constraintLeft_toLeftOf="@+id/guideline3"
app:layout_constraintTop_toTopOf="@+id/guideline2" /> <TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/main_tab_tip_rectangle_red_bg"
android:gravity="center"
android:minHeight="5dp"
android:minWidth="10dp"
android:text="99"
android:textSize="5sp"
app:layout_constraintLeft_toLeftOf="@+id/guideline4"
app:layout_constraintTop_toTopOf="@+id/guideline2" /> <TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/main_tab_tip_rectangle_red_bg"
android:gravity="center"
android:minHeight="5dp"
android:minWidth="10dp"
android:text="99"
android:textSize="5sp"
app:layout_constraintLeft_toLeftOf="@+id/guideline5"
app:layout_constraintTop_toTopOf="@+id/guideline2" /> </android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#f00"></solid>
<corners android:radius="5dp"></corners>
</shape>

ConstraintLayout+radioGroup做一个tab.简单好用。的更多相关文章

  1. 尝试做一个.NET简单、高效、避免OOM的Excel工具

    Github : https://github.com/shps951023/MiniExcel 简介 我尝试做一个.NET简单.高效.避免OOM的Excel工具 目前主流框架大多将资料全载入到记忆体 ...

  2. 一听就懂:用Python做一个超简单的小游戏

    写它会用到 while 循环random 模块if 语句输入输出函数

  3. sweiper做一个tab切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C#做一个简单的进行串口通信的上位机

    C#做一个简单的进行串口通信的上位机   1.上位机与下位机 上位机相当于一个软件系统,可以用于接收数据.控制数据.即可以对接收到的数据直接发送操控命令来操作数据.上位机可以接收下位机的信号.下位机是 ...

  5. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  6. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  7. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  8. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  9. Jmeter初步使用二--使用jmeter做一个简单的性能测试

    经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...

随机推荐

  1. Django REST FrameWork中文教程2:请求和响应

    从这一点开始,我们将真正开始覆盖REST框架的核心.我们来介绍几个基本的构建块. 请求对象REST框架引入了Request扩展常规的对象HttpRequest,并提供更灵活的请求解析.Request对 ...

  2. 剖析Prometheus的内部存储机制

    Prometheus有着非常高效的时间序列数据存储方法,每个采样数据仅仅占用3.5byte左右空间,上百万条时间序列,30秒间隔,保留60天,大概花了200多G(引用官方PPT). 接下来让我们看看他 ...

  3. 如何搭建ftp的yum源

                ftp的yum的搭建步骤 第一步:安装vsftpd程序包(系统已经安装) [root@station40 ~]# rpm -qa |grep vsftpd vsftpd-2.2 ...

  4. C++点滴20130802

    1.sprintf与printf,fprintf为三兄弟.其中printf输出到屏幕,fprintf输出到文件,而sprintf输出到字符串中.通常情况下,屏幕是可以输出的,文件也可以写的(除非磁盘满 ...

  5. AOP的实现的几种方式

    1.静态代理,实现代码如下,实际上是对装饰器模式的一种应用 interface UserManager { public void addUser(); } class UserManagerImpl ...

  6. 【ASP.NET MVC 学习笔记】- 13 Child Action

    本文参考:http://www.cnblogs.com/willick/p/3410855.html 1.Child action 和 Patial view 类似,也是在应用程序的不同地方可以重复利 ...

  7. JS难点--面向对象(继承)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } 继承 让一个对象拥有另一个对象的属性或者 ...

  8. 使用Spring框架实现用户登录实例

    以下要讲的案例来自于<Spring 3.X 企业应用开发实战>这本书. 针对我一周的摸索,现在总结几个易错点,当然,这是在我自己犯过错误的前提下总结出来的,如果有说的不到位的地方,欢迎大家 ...

  9. 深度揭秘ES6代理Proxy

    最近在博客上看到关于ES6代理的文章都是一些关于如何使用Proxy的例子,很少有说明Proxy原理的文章,要知道只有真正掌握了一项技术的原理,才能够写出精妙绝伦的代码,所以我觉得有必要写一篇关于深刻揭 ...

  10. Oracle 表空间扩充

    Oracle 表空间扩充 一.现场环境: (1)操作系统:AIX (2)数据库:Oracle Database 10g Enterprise Edition Release 10.2.0.5.0 - ...