学习笔记之——RadioButton在XML文件便可实现点击切换样式
2016-08-30 22:29
525 查看
夏去秋来,天气已渐渐转凉(小伙伴们早晚要记得加衣~\(≧▽≦)/~啦啦啦),8月即将过去,又一次迎来了开学季。回想当初作为大一新生的我也是充满期待,不料想遭受了大学和社会一年又一年的洗礼,便从一脸懵逼样变成一脸妖精样。
哈哈,开了个玩笑~下面还是进入水篇正题吧!
相信学了android基础课程的同学应该都会很清楚哪几个基本控件是拥有可点击checked属性,哪几个是没有可点击属性的,在此我就不详细说明了,不懂的小伙伴们建议可以看一下基础课程讲解视频(度娘或者google一搜一堆滴~)
然后本文要记录的就是使用含有可点击属性checked的控件RadioButton在XML文件便可实现点击切换样式。功能实现很简单,有很多很多方法可以实现,所以不局限于本篇所讲解方法,仅供参考^_^
还是按照以往的惯例先上效果图
顾名思义,两张效果图即可表现出功能逻辑,即左边部分是不可滑动固定的填充屏幕高度的列表,点击的时候切换按钮的图片和字体样式,甚至背景图片也可以,右边是一个可滑动的listview列表,点击左边按钮加载右边列表的内容,接下来上代码
先分别定义各个按钮的drawable样式,在此处我就只贴一个radio_huoqi.xml
字体颜色text_color.xml:
xml布局:
让android:button="@null"
设置android:drawableTop="@drawable/radio_huoqi"即可实现图片在文本上方
完整布局代码:
此处使用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>
哈哈,开了个玩笑~下面还是进入水篇正题吧!
相信学了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>
相关文章推荐
- OpenCV学习笔记(六)——对XML和YAML文件实现I/O操作
- 学习笔记之cocos2d-x2.1.1实现修改plist文件数据,用TinyXml解析XML
- 学习笔记之cocos2d-x2.1.1实现修改plist文件数据,用TinyXml解析XML
- Android之Fragment+ViewPager实现点击+滑动界面切换学习笔记
- OpenCV学习笔记(六)——对XML和YAML文件实现I/O操作
- JS+XMLDOM+XSL:实现中英文界面切换、排序、分页显示、增删改查XML文件数据源
- linux下用函数和系统调用分别实现计算文件长度(不解) 学习笔记
- IBATIS学习笔记(3) SQL Map XML配置文件
- 学习笔记---使用prototype.js扩展struts标签实现xmlhttprequest
- linux0.11学习笔记-技术铺垫-简单AB任务切换程序(5)-实现三个任务切换
- ibatis学习笔记(二)>>>>>>>sqlMapConfig.xml文件详解
- jetty的学习笔记之jetty.xml文件语法
- AS3----Spring 框架学习笔记(二)----xml智能提示DTD文件
- Java IO 实现文件复制 -Java 学习笔记 (25)
- linux0.11学习笔记-技术铺垫-简单AB任务切换程序(1)-实现一个简单的bootloader
- PHP操作XML文件学习笔记
- JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页
- xml学习(三)---利用xml文件实现数据岛功能(网页显示xml文件中的内容免C#代码操作xml文件)
- Python学习笔记-XML大文件的XSD验证方法
- ITCAST视频-Spring学习笔记(使用Spring配置文件实现AOP)