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怎麼放：

 1 <RadioGroup
 2     android:layout_width="0dp"
 3     android:layout_height="50dp"
 4     android:layout_marginBottom="0dp"
 5     android:layout_marginLeft="0dp"
 6     android:layout_marginRight="0dp"
 7     android:checkedButton="@+id/radioButton"
 8     android:orientation="horizontal"
 9     android:visibility="visible"
10     app:layout_constraintBottom_toBottomOf="parent"
11     app:layout_constraintHorizontal_bias="0.0"
12     app:layout_constraintLeft_toLeftOf="parent"
13     app:layout_constraintRight_toRightOf="parent"
14     tools:ignore="MissingConstraints">
15 </RadioGroup>

 

　主要操做：在design界面把RG拖到底部，去掉padding.　

第三步來4個radiobutton

把layout_width去掉，都設爲0dp。layout_weight=「1「

而後看到應該是以下這樣的

 

 第四步：不須要左右圈圈。

設置方法 

android:button="@null"

文字居中 

android:textAlignment="center"

文字顏色：

這裏文字須要兩個顏色，選中和非選中。那麼須要一個selector.

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

icon設置：

也須要兩個icon切換，選中與非選中

須要一個selector

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

設置背景：一樣須要一個selector

 

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

 

 幾個點須要注意：文字跟icon距離 能夠經過

android:drawablePadding來設置
通過以上步奏：
定義出來一radiobutton的樣式是這樣的：

 1  <style name="main_tab">
 2         <item name="android:padding">5dp</item>
 3         <item name="android:drawablePadding">5dp</item>
 4         <item name="android:background">@drawable/main_tab_bg_selector</item>
 5         <item name="android:textSize">12sp</item>
 6         <item name="android:textColor">@drawable/main_tab_text_color_selector</item>
 7         <item name="android:textAlignment">center</item>
 8         <item name="android:layout_weight">1</item>
 9         <item name="android:layout_width">0dp</item>
10         <item name="android:button">@null</item>
11         <item name="android:layout_height">wrap_content</item>
12         <item name="android:focusable">true</item>
13         <item name="android:clickable">true</item>
14     </style>

而後臺能夠看到佈局出來了。

到這兒基本完成90%了。基本能夠用了。

可是如今應用每每有小點提示。

不少人想着在radiobutton裏作文章，搞來搞去，結果很麻煩。我以爲還另起一層，分開了搞。只是相對位置弄好就好了。

第五步來實現小紅點。

ConstraintLayout又派上用場了，比相對佈局牛X，能夠添加基準線，能夠按百分比來。

那就來幾條：

 1  <android.support.constraint.Guideline
 2         android:id="@+id/guideline"
 3         android:layout_width="wrap_content"
 4         android:layout_height="wrap_content"
 5         android:orientation="vertical"
 6         app:layout_constraintGuide_percent="0.125" />
 7 
 8     <android.support.constraint.Guideline
 9         android:id="@+id/guideline2"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:orientation="horizontal"
13         app:layout_constraintGuide_end="45dp" />
14 
15     <android.support.constraint.Guideline
16         android:id="@+id/guideline3"
17         android:layout_width="wrap_content"
18         android:layout_height="wrap_content"
19         android:orientation="vertical"
20         app:layout_constraintGuide_percent="0.375" />
21 
22     <android.support.constraint.Guideline
23         android:id="@+id/guideline4"
24         android:layout_width="wrap_content"
25         android:layout_height="wrap_content"
26         android:orientation="vertical"
27         app:layout_constraintGuide_percent="0.625" />
28 
29     <android.support.constraint.Guideline
30         android:id="@+id/guideline5"
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:orientation="vertical"
34         app:layout_constraintGuide_percent="0.875" />

好了，再來幾個textview按照guideline去佈局。

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

 

粘上整個代碼：

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     xmlns:app="http://schemas.android.com/apk/res-auto"
  4     xmlns:tools="http://schemas.android.com/tools"
  5     android:layout_width="match_parent"
  6     android:layout_height="match_parent"
  7     tools:context="com.lechang.MainActivity">
  8 
  9     <RadioGroup
 10         android:layout_width="0dp"
 11         android:layout_height="50dp"
 12         android:layout_marginBottom="0dp"
 13         android:layout_marginLeft="0dp"
 14         android:layout_marginRight="0dp"
 15         android:checkedButton="@+id/radioButton"
 16         android:orientation="horizontal"
 17         android:visibility="visible"
 18         app:layout_constraintBottom_toBottomOf="parent"
 19         app:layout_constraintHorizontal_bias="0.0"
 20         app:layout_constraintLeft_toLeftOf="parent"
 21         app:layout_constraintRight_toRightOf="parent"
 22         tools:ignore="MissingConstraints">
 23 
 24         <RadioButton
 25             android:id="@+id/ra_qulity"
 26             style="@style/main_tab"
 27             android:background="@drawable/main_tab_bg_selector"
 28             android:checked="true"
 29             android:drawableTop="@drawable/main_tab_my_selector"
 30             android:text="@string/str_qulity" />
 31 
 32         <RadioButton
 33             android:id="@+id/ra_rink"
 34             style="@style/main_tab"
 35             android:drawableTop="@drawable/main_tab_my_selector"
 36             android:text="@string/str_rink" />
 37 
 38         <RadioButton
 39             android:id="@+id/ra_dynamic"
 40             style="@style/main_tab"
 41             android:drawableTop="@drawable/main_tab_my_selector"
 42             android:text="@string/str_dynamic" />
 43 
 44         <RadioButton
 45             android:id="@+id/ra_my"
 46             style="@style/main_tab"
 47             android:drawableTop="@drawable/main_tab_my_selector"
 48             android:text="@string/str_my" />
 49     </RadioGroup>
 50 
 51     <android.support.constraint.Guideline
 52         android:id="@+id/guideline"
 53         android:layout_width="wrap_content"
 54         android:layout_height="wrap_content"
 55         android:orientation="vertical"
 56         app:layout_constraintGuide_percent="0.125" />
 57 
 58     <android.support.constraint.Guideline
 59         android:id="@+id/guideline2"
 60         android:layout_width="wrap_content"
 61         android:layout_height="wrap_content"
 62         android:orientation="horizontal"
 63         app:layout_constraintGuide_end="45dp" />
 64 
 65     <android.support.constraint.Guideline
 66         android:id="@+id/guideline3"
 67         android:layout_width="wrap_content"
 68         android:layout_height="wrap_content"
 69         android:orientation="vertical"
 70         app:layout_constraintGuide_percent="0.375" />
 71 
 72     <android.support.constraint.Guideline
 73         android:id="@+id/guideline4"
 74         android:layout_width="wrap_content"
 75         android:layout_height="wrap_content"
 76         android:orientation="vertical"
 77         app:layout_constraintGuide_percent="0.625" />
 78 
 79     <android.support.constraint.Guideline
 80         android:id="@+id/guideline5"
 81         android:layout_width="wrap_content"
 82         android:layout_height="wrap_content"
 83         android:orientation="vertical"
 84         app:layout_constraintGuide_percent="0.875" />
 85 
 86     <TextView
 87         android:id="@+id/textView"
 88         android:layout_width="wrap_content"
 89         android:layout_height="10dp"
 90         android:layout_marginLeft="10dp"
 91         android:background="@drawable/main_tab_tip_rectangle_red_bg"
 92         android:gravity="center"
 93         android:minHeight="5dp"
 94         android:minWidth="10dp"
 95         android:text="99"
 96         android:textColor="@color/white"
 97         android:textSize="5sp"
 98         app:layout_constraintLeft_toLeftOf="@+id/guideline"
 99         app:layout_constraintTop_toTopOf="@+id/guideline2" />
100 
101     <TextView
102         android:id="@+id/textView2"
103         android:layout_width="wrap_content"
104         android:layout_height="10dp"
105         android:layout_marginLeft="10dp"
106         android:background="@drawable/main_tab_tip_rectangle_red_bg"
107         android:gravity="center"
108         android:minHeight="5dp"
109         android:minWidth="10dp"
110         android:text="99"
111         android:textSize="5sp"
112         app:layout_constraintLeft_toLeftOf="@+id/guideline3"
113         app:layout_constraintTop_toTopOf="@+id/guideline2" />
114 
115     <TextView
116         android:id="@+id/textView3"
117         android:layout_width="wrap_content"
118         android:layout_height="10dp"
119         android:layout_marginLeft="10dp"
120         android:background="@drawable/main_tab_tip_rectangle_red_bg"
121         android:gravity="center"
122         android:minHeight="5dp"
123         android:minWidth="10dp"
124         android:text="99"
125         android:textSize="5sp"
126         app:layout_constraintLeft_toLeftOf="@+id/guideline4"
127         app:layout_constraintTop_toTopOf="@+id/guideline2" />
128 
129     <TextView
130         android:id="@+id/textView4"
131         android:layout_width="wrap_content"
132         android:layout_height="10dp"
133         android:layout_marginLeft="10dp"
134         android:background="@drawable/main_tab_tip_rectangle_red_bg"
135         android:gravity="center"
136         android:minHeight="5dp"
137         android:minWidth="10dp"
138         android:text="99"
139         android:textSize="5sp"
140         app:layout_constraintLeft_toLeftOf="@+id/guideline5"
141         app:layout_constraintTop_toTopOf="@+id/guideline2" />
142 
143 </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>