自定义 RadioButton 选中和未选中时的图片

最新推荐文章于 2024-05-22 12:13:56 发布
最新推荐文章于 2024-05-22 12:13:56 发布
阅读量4.4w 收藏 10
点赞数
分类专栏： Android 文章标签： radiobutton android button patch xml encoding
RadioButton长成什么样子是由其Background、Button等属性决定的，Android系统 
使用style定义了默认的属性，在android源码 
android/frameworks/base/core/res/res/values/styles.xml中可以看到默认的定义： 
Xml代码   收藏代码
  1. <style name="Widget.CompoundButton.RadioButton">  
  2.         <item name="android:background">@android:drawable/btn_radio_label_background</item>  
  3.         <item name="android:button">@android:drawable/btn_radio</item>  
  4. </style>  

即其背景图是btn_radio_label_background，其button的样子是btn_radio 

btn_radio_label_background是什么？ 
其路径是android/frameworks/base/core/res/res/drawable-mdpi/btn_radio_label_background.9.png 
可以看到是一个NinePatch图片，用来做背景，可以拉伸填充。 

btn_radio是什么？ 
其路径是android/frameworks/base/core/res/res/drawable/btn_radio.xml 
是个xml定义的drawable，打开看其内容： 
Xml代码   收藏代码
  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">      
  2.     <item android:state_checked="true" android:state_window_focused="false"  
  3.           android:drawable="@drawable/btn_radio_on" />  
  4.     <item android:state_checked="false" android:state_window_focused="false"  
  5.           android:drawable="@drawable/btn_radio_off" />  
  6.   
  7.     <item android:state_checked="true" android:state_pressed="true"  
  8.           android:drawable="@drawable/btn_radio_on_pressed" />  
  9.     <item android:state_checked="false" android:state_pressed="true"  
  10.           android:drawable="@drawable/btn_radio_off_pressed" />  
  11.   
  12.     <item android:state_checked="true" android:state_focused="true"  
  13.           android:drawable="@drawable/btn_radio_on_selected" />  
  14.     <item android:state_checked="false" android:state_focused="true"  
  15.           android:drawable="@drawable/btn_radio_off_selected" />  
  16.   
  17.     <item android:state_checked="false" android:drawable="@drawable/btn_radio_off" />  
  18.     <item android:state_checked="true" android:drawable="@drawable/btn_radio_on" />  
  19. </selector>  

定义了不同状态下radioButton长成什么样子。 
如果不知道selector是什么，就要去看下Android SDK文档中Dev Guide->Application Resources->Resource Types。 
以下面一个item为例： 
<item android:state_checked="true" android:state_pressed="true" 
          android:drawable="@drawable/btn_radio_on_pressed" /> 
意思即为当radiobutton被选中时，并且被按下时，其Button应该长成btn_radio_on_pressed这个样子。 
 
文件是android/frameworks/base/core/res/res/drawable-mdpi/btn_radio_on_pressed.png 

drawable的item中可以有以下属性： 
android:drawable="@[package:]drawable/drawable_resource"
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_active=["true" | "false"]
android:state_checkable=["true" | "false"] 
android:state_checked=["true" | "false"] 
android:state_enabled=["true" | "false"] 
android:state_window_focused=["true" | "false"] 
当按钮的状态和某个item匹配后，就会使用此item定义的drawable作为按钮图片。 

从上面分析我们如果要修改RadioButton的外观，那么步骤应该是： 
(1)制作一个9patch的图片作为背景图 
准备一副PNG图片，其中白色为透明色，是否需要透明各人根据自己需要决定。 
 
运行SDK/tools/draw9patch 
在可伸缩的范围周围加上黑色的线告知系统这些区域可以伸缩。 
制作完的图片，周围多了黑色线。 
 
(2)针对不同的状态提供按钮图片 
enabled, on: 紫色外框、红色中心点 
 
enabled, off:只有紫色外框 
 
enabled, on, pressed:黄色外框，红色中心点 
 
enabled, off, pressed:黄色外框 
 
disabled, on: 灰色外框、灰色中心点 
 
disabled, off: 灰色外框 
 
其余的状态此处就不再定义。 
(3)使用xml描述一个drawable 
在res/drawable/创建custom_radio_btn.xml 
Xml代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <item android:state_enabled="true" android:state_checked="true" android:state_pressed="true"  
  4.           android:drawable="@drawable/enabled_on_pressed" />  
  5.             
  6.     <item android:state_enabled="true" android:state_checked="false" android:state_pressed="true"  
  7.           android:drawable="@drawable/enabled_off_pressed" />  
  8.   
  9.     <item android:state_enabled="true" android:state_checked="true"  
  10.           android:drawable="@drawable/enabled_on" />  
  11.             
  12.     <item android:state_enabled="true" android:state_checked="false"  
  13.           android:drawable="@drawable/enabled_off" />  
  14.             
  15.     <item android:state_enabled="false" android:state_checked="true"  
  16.           android:drawable="@drawable/disabled_on" />  
  17.             
  18.     <item android:state_enabled="false" android:state_checked="false"  
  19.           android:drawable="@drawable/disabled_off" />                
  20. </selector>  

Item顺序是有讲究的，条件限定越细致，则应该放到前面。比如这儿如果把1，2行和3，4行的item交换，那么pressed的就永远无法触发了，因为有item已经满足条件返回了。可以理解为代码中的if语句。 
(4)创建一个自定义的style，并应用到RaidioButton的style属性上 
Xml代码   收藏代码
  1. <style name="CustomRadioBtn">  
  2.         <item name="android:background">@drawable/radio_btn_bg</item>  
  3.         <item name="android:button">@drawable/custom_radio_btn</item>  
  4. </style>  


运行ap即可看到此RadioButton的外观已经改变，此demo可以看到文字被按钮遮盖了一部分， 
这儿是因第一步制作9patch图片时没有留出按钮图片空间来，稍作修改即可。 

 


转自：http://mypyg.iteye.com/blog/768471



































































                

        

        

    




    

      

        

            

              
                
                  Claude16888
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    10
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
androidRadioButton 自定义样式

				
			

			

				

					greatsuny的专栏
				

				

					05-09
					
					821
					
				

			

		

		

			
				
之前android学习的时，就只是简简单的

			
		

	



                

              
                



	

		

			

				
					
android radiobutton自定义图片,Android RadioButton左边图片不能居中显示问题

				
			

			

				

					weixin_32614533的博客
				

				

					05-26
					
					594
					
				

			

		

		

			
				
RadioButton设置图片无法居中问题像下面这样的布局只能让文字居中，文字左边的圆圈图标还是靠左显示。android:id="@+id/group"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:orientatio...

			
		

	



                


  
              

                


	

		

			

				
					
Android Radiobutton自定义背景、文字颜色、点击效果

				
			

			

				

					qq_57492804的博客
				

				

					12-04
					
					2386
					
				

			

		

		

			
				
Android Radiobutton自定义背景、文字颜色、点击效果

			
		

	





	

		

			

				
					
Android 项目中自定义多个 RadioButton 并排一列选择效果实现

					
最新发布

				
			

			

				

					结合项目案例，记录点点滴滴，自己回顾，分享他人o__o
				

				

					05-22
					
					7350
					
				

			

		

		

			
				
3.1、布局文件引用了android:background=“@drawable/radiostyles”3.2、布局文件引用了android:textColor=“@color/colorselector”根据项目实际情况，按钮的个数通过函数参数传递进来，代码动态生成按钮个数。

			
		

	



		

			
		



	

		

			

				
					
android radiobutton自定义图片,Android RadioButton 图片位置与大小实例详解

				
			

			

				

					weixin_39996762的博客
				

				

					05-26
					
					359
					
				

			

		

		

			
				
Android RadioButton 图片位置与大小Java：rgGroup = (RadioGroup) findViewById(R.id.re_group);rbWeiHui = (RadioButton) findViewById(R.id.rb_wei_hui);rbAdd = (RadioButton) findViewById(R.id.rb_add);rbMine = (Radi...

			
		

	





	

		

			

				
					
Android中单选框RadioButton修改默认图片

				
			

			

				

					houxian1103的博客
				

				

					08-20
					
					1516
					
				

			

		

		

			
				
1效果图：
2写一个选择器，里面是自己要设置的打开和关掉的按钮图标
selector_radio.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:...

			
		

	





	

		

			

				
					
android 自定义radiobutton 样式,Android编程实现自定义PopupMenu样式示例【显示图标与设置RadioButton图标】...

				
			

			

				

					weixin_34563472的博客
				

				

					05-25
					
					467
					
				

			

		

		

			
				
Android编程实现自定义PopupMenu样式示例【显示图标与设置RadioButton图标】发布时间：2020-10-04 06:21:31来源：脚本之家阅读：188作者：books1958本文实例讲述了Android编程实现自定义PopupMenu样式。分享给大家供大家参考，具体如下：PopupMenu是Android中一个十分轻量级的组件。与PopupWindow相比，PopupMenu...

			
		

	





	

		

			

				
					
C# WinForm 自定义 RadioButton

				
			

			

				

					04-01
				

			

		

		

			
				
在C# WinForm应用开发中，自定义RadioButton控件是一种常见的需求，这通常涉及到扩展.NET Framework提供的默认RadioButton控件的功能，以满足特定的设计或交互需求。本教程将深入讲解如何在Visual Studio 2005及其更...

			
		

	





	

		

			

				
					
自定义RadioButton

				
			

			

				

					03-22
				

			

		

		

			
				
4. **自定义颜色和样式**：利用`android:background`属性，可以设置选中和未选中时的背景颜色或图片。同时，`android:checkedButtonBackground`和`android:unCheckedButtonBackground`属性可以分别设定选中和未选中...

			
		

	





	

		

			

				
					
自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果

				
			

			

				

					09-05
				

			

		

		

			
				
 - 当RadioButton选中状态改变时，我们需要更新ViewPager的当前页面。可以通过设置`OnCheckedChangeListener`监听RadioButton的选择，并调用`setCurrentItem()`方法切换ViewPager的页面。  4. **界面布局**：  - 在...

			
		

	





	

		

			

				
					
自定义RadioButton的实例

				
			

			

				

					10-26
				

			

		

		

			
				
在默认情况下，RadioButton的布局样式和元素间距可能无法满足所有设计需求，因此，开发者有时需要自定义RadioButton以实现特定的视觉效果。本教程将详细介绍如何在Android中自定义RadioButton，特别是如何调整选中框...

			
		

	





	

		

			

				
					
Android开发设置RadioButton点击效果的方法

				
			

			

				

					01-05
				

			

		

		

			
				
本文实例讲述了Android开发设置RadioButton点击效果的方法。分享给大家供大家参考，具体如下：
在安卓开发中用到底部菜单栏 需要用到RadioButton这个组件
实际应用的过程中，需要对按钮进行点击，为了让用户知道是否点击可这个按钮，可以设置点击后 ，该按钮的颜色或者背景发生变化。
layout中这部分的代码为:

<RadioButton
    android:id=@+id/radio_button0
    android:layout_height=fill_parent
    android:layout_marginTop=2.0dip
    and

			
		

	





	

		

			

				
					
android 自定义RadioButton样式

				
			

			

				

					wk843620202的专栏
				

				

					03-25
					
					1328
					
				

			

		

		

			
				
http://gundumw100.iteye.com/blog/1146527



 
上面这种3选1的效果如何做呢？用代码写？ 
其实有更简单的办法，忘了RadioButton有什么特性了吗？ 
我就用RadioButton实现了如上效果，其实很简单的。 
首先定义一张background，命名为radio.xml，注意该background必须为xml样式的图片： 



			
		

	





	

		

			

				
					
Radiobutton的样式自定义

				
			

			

				

					小老鼠的博客
				

				

					05-23
					
					9672
					
				

			

		

		

			
				
Radiobutton的样式自定义无非就是style,然后在radiobutton中引用。



在style里面有相关属性：

background 来设置radiobutton的背景

button      来设置radiobutton的小框框, 当为null的时候,左边的按钮图片了

textcolor    来设置radiobutton的文字颜色


自定义的...

			
		

	





	

		

			

				
					
RadioButton的图片大小设置

				
			

			

				

					小哥丷的博客
				

				

					04-14
					
					1万+
					
				

			

		

		

			
				
修改RadioButton图片的大小

			
		

	





	

		

			

				
					
设置Android中RadioButton的图片大小和位置

					
热门推荐

				
			

			

				

					weixin_36723200的博客
				

				

					12-12
					
					2万+
					
				

			

		

		

			
				
设置Android中RadioButton的图片大小和位置今天在使用RadioGroup时遇到一个问题，在布局文件中设置好RadioGroup后结果预览起来图片非常大，这根本不是我想要的效果。下面是解决问题的过程：
  布局文件
 <RadioGroup
    android:id="@+id/rg_home"
    android:layout_width="match_parent"

			
		

	





	

		

			

				
					
Android RadioButton按钮，点击换图片。

				
			

			

				

					哆啦A梦丶幻想的博客
				

				

					06-07
					
					4050
					
				

			

		

		

			
				
Android RadioButton按钮，点击换图片
  思路：把RadioButton放入RadioGroup，然后根据RadioGroup修改图片。 
  获取图片的方法：夜神模拟器中增加图片,然后从夜神模拟器中获取图片。  夜神模拟器中增加图片的方法:在路径：mnt/shared/image中放图图片
第一步：把图片拖入路径中 
第二步：勾选你要的图片 
第三步：找到 路径：mnt/sdca

			
		

	





	

		

			

				
					
Android如何设置不在一个radiogroup的两个radiobutton只能选中其中一个

				
			

			

				

					05-31
				

			

		

		

			
				
如果要实现不在同一个 RadioGroup 的两个 RadioButton 只能选中其中一个的话，可以通过以下两种方式来实现：

1. 使用 RadioGroup 和 LinearLayout 组合实现：

在布局文件中，将两个 RadioButton 放在同一个 LinearLayout 中，然后再将 LinearLayout 放在 RadioGroup 中，这样就可以实现两个 RadioButton 只能选中其中一个的效果。具体代码如下：

```xml
<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton 1" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton 2" />
    </LinearLayout>
</RadioGroup>
```

2. 使用自定义属性实现：

在布局文件中，给两个 RadioButton 设置同一个自定义属性，然后在代码中监听两个 RadioButton 的点击事件，当一个 RadioButton 被选中时，将另一个 RadioButton 的选中状态设置为未选中。具体代码如下：

在 res/values/attrs.xml 文件中定义自定义属性：

```xml
<declare-styleable name="CustomRadioButton">
    <attr name="exclusive" format="boolean" />
</declare-styleable>
```

在布局文件中，给两个 RadioButton 设置相同的自定义属性：

```xml
<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RadioButton 1"
    app:exclusive="true" />

<RadioButton
    android:id="@+id/radioButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RadioButton 2"
    app:exclusive="true" />
```

在代码中，监听两个 RadioButton 的点击事件，并在事件中将另一个 RadioButton 的选中状态设置为未选中：

```java
RadioButton radioButton1 = findViewById(R.id.radioButton1);
RadioButton radioButton2 = findViewById(R.id.radioButton2);

radioButton1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        radioButton2.setChecked(false);
    }
});

radioButton2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        radioButton1.setChecked(false);
    }
});
```

以上是两种实现不在同一个 RadioGroup 的两个 RadioButton 只能选中其中一个的方法，您可以根据自己的需求选择其中一种。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值