ConstraintLayout+radioGroup做一个tab.简单好用。

主页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>