学习笔记之——RadioButton在XML文件便可实现点击切换样式

来源：互联网发布：linux 查看文件内容编辑：程序博客网时间：2024/06/05 08:52

夏去秋来，天气已渐渐转凉（小伙伴们早晚要记得加衣~\(≧▽≦)/~啦啦啦），8月即将过去，又一次迎来了开学季。回想当初作为大一新生的我也是充满期待，不料想遭受了大学和社会一年又一年的洗礼，便从一脸懵逼样变成一脸妖精样。

哈哈，开了个玩笑~下面还是进入水篇正题吧！

相信学了android基础课程的同学应该都会很清楚哪几个基本控件是拥有可点击checked属性，哪几个是没有可点击属性的，在此我就不详细说明了，不懂的小伙伴们建议可以看一下基础课程讲解视频（度娘或者google一搜一堆滴~）

然后本文要记录的就是使用含有可点击属性checked的控件RadioButton在XML文件便可实现点击切换样式。功能实现很简单，有很多很多方法可以实现，所以不局限于本篇所讲解方法，仅供参考^_^

还是按照以往的惯例先上效果图

顾名思义，两张效果图即可表现出功能逻辑，即左边部分是不可滑动固定的填充屏幕高度的列表，点击的时候切换按钮的图片和字体样式，甚至背景图片也可以，右边是一个可滑动的listview列表，点击左边按钮加载右边列表的内容，接下来上代码

先分别定义各个按钮的drawable样式，在此处我就只贴一个radio_huoqi.xml

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

字体颜色text_color.xml：

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

xml布局：

让android:button="@null"

设置android:drawableTop="@drawable/radio_huoqi"即可实现图片在文本上方

两句话即可搞定按钮切换样式改变效果，O(∩_∩)O哈哈哈~

<span style="background-color: rgb(240, 240, 240);">android:drawableTop="@drawable/radio_huoqi"</span>

<pre name="code" class="html">android:textColor="@drawable/radio_textcolor"

完整布局代码：

<LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent" >        <LinearLayout            android:layout_width="100dp"            android:layout_height="match_parent"            android:orientation="vertical" >            <RadioGroup                android:id="@+id/radioGroup_moneyrate"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:gravity="center" >                <RadioButton                    android:id="@+id/radio_huoqi"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:padding="2dp"                    android:layout_weight="1"                    android:background="@color/color_fff_white"                    android:button="@null"                    android:checked="true"                    android:drawableTop="@drawable/radio_huoqi"                    android:gravity="center"                    android:text="活期"                    android:textColor="@drawable/radio_textcolor"                    android:textSize="15sp" />                                <TextView                android:id="@+id/tv1"                android:layout_width="match_parent"                android:layout_height="0.5dp"                android:background="@color/color_bg_e0"                android:textAppearance="?android:attr/textAppearanceLarge" />                <RadioButton                    android:id="@+id/radio_month3"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:padding="2dp"                    android:background="@color/color_fff_white"                    android:button="@null"                    android:drawableTop="@drawable/radio_month3"                    android:textColor="@drawable/radio_textcolor"                    android:gravity="center"                    android:text="三个月"                    android:textSize="15sp" />                                <TextView                android:id="@+id/tv2"                android:layout_width="match_parent"                android:layout_height="0.5dp"                android:background="@color/color_bg_e0"                android:textAppearance="?android:attr/textAppearanceLarge" />                                <RadioButton                    android:id="@+id/radio_month6"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:padding="2dp"                    android:layout_weight="1"                    android:background="@color/color_fff_white"                    android:button="@null"                    android:drawableTop="@drawable/radio_month6"                    android:textColor="@drawable/radio_textcolor"                    android:gravity="center"                    android:text="六个月"                    android:textSize="15sp" />                                <TextView                android:id="@+id/tv3"                android:layout_width="match_parent"                android:layout_height="0.5dp"                android:background="@color/color_bg_e0"                android:textAppearance="?android:attr/textAppearanceLarge" />                                <RadioButton                    android:id="@+id/radio_year1"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:padding="2dp"                    android:layout_weight="1"                    android:background="@color/color_fff_white"                    android:button="@null"                    android:drawableTop="@drawable/radio_year1"                    android:textColor="@drawable/radio_textcolor"                    android:gravity="center"                    android:text="一年"                    android:textSize="15sp" />                                <TextView                android:id="@+id/tv4"                android:layout_width="match_parent"                android:layout_height="0.5dp"                android:background="@color/color_bg_e0"                android:textAppearance="?android:attr/textAppearanceLarge" />                                <RadioButton                    android:id="@+id/radio_year2"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:padding="2dp"                    android:background="@color/color_fff_white"                    android:button="@null"                    android:drawableTop="@drawable/radio_year2"                    android:textColor="@drawable/radio_textcolor"                    android:gravity="center"                    android:text="二年"                    android:textSize="15sp" />                                <TextView                android:id="@+id/tv5"                android:layout_width="match_parent"                android:layout_height="0.5dp"                android:background="@color/color_bg_e0"                android:textAppearance="?android:attr/textAppearanceLarge" />                                <RadioButton                    android:id="@+id/radio_year3"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:padding="2dp"                    android:background="@color/color_fff_white"                    android:button="@null"                    android:drawableTop="@drawable/radio_year3"                    android:textColor="@drawable/radio_textcolor"                    android:gravity="center"                    android:text="三年"                    android:textSize="15sp" />                                <TextView                android:id="@+id/tv6"                android:layout_width="match_parent"                android:layout_height="0.5dp"                android:background="@color/color_bg_e0"                android:textAppearance="?android:attr/textAppearanceLarge" />                                <RadioButton                    android:id="@+id/radio_year5"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:layout_weight="1"                    android:padding="2dp"                    android:background="@color/color_fff_white"                    android:button="@null"                    android:drawableTop="@drawable/radio_year5"                    android:textColor="@drawable/radio_textcolor"                    android:gravity="center"                    android:text="五年"                    android:textSize="15sp" />            </RadioGroup>        </LinearLayout>        <TextView            android:id="@+id/textView1"            android:layout_width="1dp"            android:layout_height="match_parent"            android:background="@color/color_f5"            android:textAppearance="?android:attr/textAppearanceLarge" />        <ListView            android:id="@+id/lv_moneyrate_right"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@color/color_fff"            android:scrollbars="none" >        </ListView>    </LinearLayout>

代码中使用点击事件：

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId){if (checkedId == radio_huoqi.getId()){}else if (checkedId == radio_month3.getId()){}else if (checkedId == radio_month6.getId()){}else if (checkedId == radio_year1.getId()){}else if (checkedId == radio_year2.getId()){}else if (checkedId == radio_year3.getId()){}else if (checkedId == radio_year5.getId()){}else{}<pre name="code" class="html"><span style="white-space:pre"></span>}});

此处使用switch……case也是更方便的

但是细心的小伙伴肯定会发现，按照这样的xml布局方式，如果左边按钮个数变少了，高度变高了，也就是每个按钮分配的android:layout_weight="1"变多了，这个时候的图片和文字的间距会被拉伸开就变得非常丑逼……所以RadioGroup可以换一种方式嵌套RadioButton和LinearLayout来分配它的android:layout_weight=""和android:gravity=""保证不管按钮多高，图片和文字一直居中显示

<RadioGroup        android:id="@+id/radioGroup_moneyrate"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center" >       <LinearLayout            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_marginTop="5dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical" >            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:button="@null"                android:drawablePadding="5dp"                android:drawableTop="@drawable/huoqi"                android:text="六个月" >            </RadioButton>        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_marginTop="5dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical" >            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:button="@null"                android:drawablePadding="5dp"                android:drawableTop="@drawable/huoqi"                android:text="六个月" >            </RadioButton>        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_marginTop="5dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical" >            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:button="@null"                android:drawablePadding="5dp"                android:drawableTop="@drawable/huoqi"                android:text="六个月" >            </RadioButton>        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_marginTop="5dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical" >            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:button="@null"                android:drawablePadding="5dp"                android:drawableTop="@drawable/huoqi"                android:text="六个月" >            </RadioButton>        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_marginTop="5dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical" >            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:button="@null"                android:drawablePadding="5dp"                android:drawableTop="@drawable/huoqi"                android:text="六个月" >            </RadioButton>        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_marginTop="5dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical" >            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:button="@null"                android:drawablePadding="5dp"                android:drawableTop="@drawable/huoqi"                android:text="六个月" >            </RadioButton>        </LinearLayout>    </RadioGroup>

0 0