`

自定义RadioButton样式2

阅读更多
先看一下图:


上面这种3选1的效果如何做呢?用代码写?
其实有更简单的办法,忘了RadioButton有什么特性了吗?
我就用RadioButton实现了如上效果,其实很简单的。
首先定义一张background,命名为radio.xml,注意该background必须为xml样式的图片:
Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">    
  3.     <item    
  4.     android:state_checked="false"    
  5.     android:drawable="@drawable/tabswitcher_long" />    
  6.     <item    
  7.     android:state_checked="true"    
  8.     android:drawable="@drawable/tabswitcher_short" />    
  9. </selector>   
<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
    android:state_checked="false" 
    android:drawable="@drawable/tabswitcher_long" /> 
    <item 
    android:state_checked="true" 
    android:drawable="@drawable/tabswitcher_short" /> 
</selector> 

这里我们只要关心state_checked状态就可以了。所以很简单的配置。
接下来就是布局文件里面引用这张图片了:
Java代码 复制代码 收藏代码
  1. <RadioGroup   
  2.         android:gravity="center"  
  3.         android:orientation="horizontal"     
  4.         android:layout_width="fill_parent"      
  5.         android:layout_height="wrap_content"  
  6.         >   
  7.         <RadioButton      
  8.             android:id="@+id/btn_0"     
  9.             android:layout_width="fill_parent"      
  10.             android:layout_height="wrap_content"  
  11.             android:text="最新信息"    
  12.             android:textSize="17.0sp"      
  13.             android:textColor="@android:color/black"     
  14.             android:gravity="center"    
  15.             android:layout_weight="1"  
  16.             android:checked="true"  
  17.             android:button="@null"  
  18.             android:background="@drawable/radio"  
  19.             />     
  20.         <RadioButton      
  21.             android:id="@+id/btn_1"  
  22.             android:layout_width="fill_parent"      
  23.             android:layout_height="wrap_content"  
  24.             android:text="在线专家"  
  25.             android:textSize="17.0sp"  
  26.             android:textColor="@android:color/black"     
  27.             android:gravity="center"  
  28.             android:layout_weight="1"  
  29.             android:button="@null"  
  30.             android:background="@drawable/radio"  
  31.             />     
  32.         <RadioButton      
  33.             android:id="@+id/btn_2"  
  34.             android:layout_width="fill_parent"      
  35.             android:layout_height="wrap_content"  
  36.             android:text="预约服务"  
  37.             android:textSize="17.0sp"  
  38.             android:textColor="@android:color/black"     
  39.             android:gravity="center"  
  40.             android:layout_weight="1"  
  41.             android:button="@null"  
  42.             android:background="@drawable/radio"  
  43.             />     
  44.     </RadioGroup>  
<RadioGroup
		android:gravity="center"
		android:orientation="horizontal"  
        android:layout_width="fill_parent"   
        android:layout_height="wrap_content"
		>
		<RadioButton   
            android:id="@+id/btn_0"  
            android:layout_width="fill_parent"   
        	android:layout_height="wrap_content"
            android:text="最新信息" 
            android:textSize="17.0sp"   
            android:textColor="@android:color/black"  
            android:gravity="center" 
            android:layout_weight="1"
            android:checked="true"
            android:button="@null"
            android:background="@drawable/radio"
            />  
        <RadioButton   
            android:id="@+id/btn_1"
            android:layout_width="fill_parent"   
        	android:layout_height="wrap_content"
            android:text="在线专家"
            android:textSize="17.0sp"
            android:textColor="@android:color/black"  
            android:gravity="center"
            android:layout_weight="1"
            android:button="@null"
          	android:background="@drawable/radio"
            />  
        <RadioButton   
            android:id="@+id/btn_2"
            android:layout_width="fill_parent"   
        	android:layout_height="wrap_content"
            android:text="预约服务"
            android:textSize="17.0sp"
            android:textColor="@android:color/black"  
            android:gravity="center"
            android:layout_weight="1"
            android:button="@null"
          	android:background="@drawable/radio"
            />  
	</RadioGroup>

注意将android:button="@null"全部设为null,并且将android:background="@drawable/radio"设为刚才新建的图片。这样就完成了。
一句代码都不用写!

看看竖下来的效果:


傍边有图标的怎么办?


也很简单啦,只要在每个RadioButton上加android:drawableLeft="@drawable/tubiao_0"就可以了。
另外要设置图标与文字的距离怎么办?
有一个方法setCompoundDrawablePadding(pad)可以设置图标与文字的距离,对应的属性为android:drawablePadding。

有了这招完全可以实现类似的n选1效果,看下面:



应用:
http://www.iteye.com/topic/1116261#2256664
分享到:
评论

相关推荐

    C# WinForm 自定义 RadioButton

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

    android 自定义RadioButton的样式

    默认情况下,Android提供的RadioButton样式较为单一,可能无法满足某些设计需求。因此,自定义RadioButton的样式成为了一种常见的需求。 #### 自定义RadioButton的基本步骤 1. **创建Drawable资源**:首先需要为...

    RadioButton和CheckBox自定义样式

    在本文中,我们将深入探讨如何自定义RadioButton和CheckBox的样式,特别是通过重写onDraw()方法来实现颜色选择器效果。首先,我们需要了解这两个控件的基本结构和工作原理。 RadioButton和CheckBox都是继承自...

    自定义android RadioButton样式

    因此,自定义RadioButton样式是提升应用视觉效果的重要手段。这篇内容将详细介绍如何自定义Android的RadioButton样式。 首先,我们可以在`res/drawable`目录下创建一个XML文件,例如`custom_radiobutton.xml`,来...

    Android自定义RadioButton及RadioGroup

    创建自定义RadioButton的第一步是创建一个新的XML布局文件,用于定义自定义的样式。在res/drawable目录下,可以创建一个名为custom_radio_button.xml的文件,内容如下: ```xml ``` 这里,@drawable/...

    自定义RadioButton

    自定义RadioButton允许开发者根据项目需求调整其外观、交互和功能,以提供更个性化的用户体验。以下是对这个自定义RadioButton相关的知识点进行的详细解释: 1. **RadioButton基本使用**:RadioButton属于Android的...

    android 自定义单选按钮radioButton

    本教程将深入探讨如何在Android中自定义RadioButton,使其满足特定的设计需求。 一、RadioButton基础 RadioButton是Android的 android.widget.RadioGroup 类中的一个子类,它在视觉上表现为一个小圆圈,未被选中时...

    自定义RadioButton的实例

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

    Android 模仿美团的支付方式选择自定义RadioButton

    2. 创建自定义RadioButton类:在Java代码中,继承RadioButton并重写其onDraw()方法,或者使用自定义ViewGroup(如LinearLayout或RelativeLayout)并覆盖onMeasure()和onLayout()方法。这样,我们可以控制RadioButton...

    RadioButton自定义样式详解

    3. 自定义RadioButton样式: - 我们可以通过修改默认的样式来实现自定义效果。首先,创建一个XML资源文件(如:res/drawable/radioButton_style.xml),定义自定义的背景、选中状态图标等。 - 在RadioButton的...

    类似美团支付方式选择自定义RadioButton

    默认的RadioButton样式可能无法满足所有设计需求,因此我们需要自定义其外观和行为。 自定义RadioButton通常包括以下几个步骤: 1. **创建自定义View类**:创建一个新的Java类,继承自RadioButton,然后在此类中...

    仿美团支付自定义radiobutton

    而我们要做的,就是通过自定义RadioButton,让其外观和交互更加符合美团支付页面的风格。 实现自定义RadioButton的第一步,是创建一个新的XML布局文件,作为RadioButton的视图模板。在这个文件中,我们可以定义按钮...

    好看的自定义radiobutton

    标题“好看的自定义radiobutton”暗示我们将讨论如何美化标准的RadioButton组件,使其更具吸引力。描述中提到的“好看的自定义menu 可以点击不同部分进行切换”则扩展了这个话题,意味着我们要探讨的不仅限于单个...

    WPF 实现RadioButton样式两种方式,vs2010

    这种方式适用于需要在运行时动态改变RadioButton样式的情况。在C#代码中,你可以这样做: 1. 首先,确保你的窗口或用户控件已经加载了资源字典,这通常在`Loaded`事件处理程序中完成: ```csharp private void ...

    自定义RadioButton&CheckBox样式的实现

    本篇将详细介绍如何实现自定义RadioButton和CheckBox样式的实践过程。 首先,我们需要了解Android中的样式系统。在Android中,我们可以使用XML资源文件来定义样式,包括颜色、尺寸、字体等属性。对于RadioButton和...

    android 高仿微信底部菜单 用自定义的radiobutton和radiogroup实现,能实现气泡数字的效果

    在自定义RadioButton时,我们可以改变其默认的样式和行为,以达到我们需要的视觉效果。 在高仿微信底部菜单中,我们通常会有四个或五个选项,每个选项对应一个功能,例如“聊天”、“发现”、“我”等。为了实现这...

    android充值demo 自定义editview自定义radiobutton

    在Android开发中,"android充值demo 自定义editview自定义radiobutton"是一个常见的应用场景,它涉及到用户界面(UI)的设计和交互,特别是针对移动应用中的支付功能。下面将详细讲解这个主题涉及的知识点。 首先,...

Global site tag (gtag.js) - Google Analytics