zoukankan      html  css  js  c++  java

  • 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>

     
  • 相关阅读:
    Eclipse集成Tomcat：6个常见的”how to”问题
    linux环境变量配置
    (原创)JS点击事件——Uncaught TypeError: Cannot set property 'onclick' of null
    [ JS 进阶 ] 闭包，作用域链，垃圾回收，内存泄露
    webstorm安装后的一些设置技巧：
    前端工程师的知识体系
    Git常用命令及软件推荐
    Vue.js双向绑定的实现原理
    GET和POST面试知识点
    CSS 巧用 :before和:after
  • 原文地址：https://www.cnblogs.com/mamamia/p/7686278.html
Copyright © 2011-2022 走看看