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

原创 2016年08月30日 22:29:37

         夏去秋来,天气已渐渐转凉(小伙伴们早晚要记得加衣~\(≧▽≦)/~啦啦啦),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()
		{
			
			@Override
			public 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>




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

RadioGroup的Radiobutton点击时改变字体颜色和背景颜色(采用Xml文件设置)

转载 http://blog.csdn.net/zzf112/article/details/20467957 1  radiobutton字体颜...

Spring4.0学习笔记005——Bean的配置三(基于XML文件)

Spring Bean的xml配置

Android学习笔记13——XML文件解析

java sax对xml的解析

学习笔记——JavaScript操作XML文件

通过一个实例来具体了解关于JavaScript来操作XML文件特性 跨浏览器读取xml文件 function createDocument() { var xmlDo...
  • celte
  • celte
  • 2013年03月31日 22:48
  • 817

Spring4.0学习笔记009——AOP的配置(基于XML文件)

基于XML文件来配置AOP

Spring4.0学习笔记004——Bean的配置二(基于XML文件)

Spring Bean的xml配置

Java EE学习笔记 II——Web应用和web.xml文件

一、徒手构建Web应用 对于IDE工具,业内有个说法:IDE工具会加快高手的效率,也会使初学者更加白痴。所以,我们来暂时把IDE放一边,徒手构建一个简单的Web应用程序。 ①在任意目录下新建一个...

Spring4.0学习笔记003——Bean的配置一(基于XML文件)

Spring Bean的xml配置

OpenCV学习笔记(2)——opencv方法训练.xml文件过程

给TXT文件里面的内容批量加上前缀 楼主先新建个文本文档,在里面输入  @echo off  (for /f "delims=" %%a in (2.txt) do echo 前缀%%a)>...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习笔记之——RadioButton在XML文件便可实现点击切换样式
举报原因:
原因补充:

(最多只允许输入30个字)