自定义RadioGroup实现单选完整示例

MainActivity如下:

package cc.testradiogroup;

import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.app.Activity;
/**
 * Demo描述:
 * 利用自定义RadioGroup实现单选
 *
 * 参考资料:
 * 1 http://blog.csdn.net/xiaanming
 * 2 http://bbs.51cto.com/thread-954128-1.html
 * 
 *   Thank you very much
 */
public class MainActivity extends Activity {
	private RadioGroup mRadioGroup; 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		init();
	}
  
	private void init(){
		mRadioGroup=(RadioGroup) findViewById(R.id.radioGroup);
		mRadioGroup.setOnCheckedChangeListener(new RadioButtonOnCheckedChangeListenerImpl());
	}
	
	// 监听单选的变化
	private class RadioButtonOnCheckedChangeListenerImpl implements OnCheckedChangeListener {
		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			RadioButton rb = (RadioButton) findViewById(group.getCheckedRadioButtonId());
			String currentSelected = rb.getText().toString();
			System.out.println("现在选中是:" + currentSelected);
		}
	}

}


main.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<!-- 步骤如下: -->
<!--1: android:button="@null" 去掉自带的图标   -->
<!--2:android:drawableRight="@drawable/line" 在文字的右边设置图片-->
<!--3: android:drawablePadding="10dip" 图片与文字间的距离-->
<!--4:android:layout_marginLeft="-17dip" 每个RadioButton距离左边缘或者距其左RadioButton的距离-->
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:text="测试自定义的RadioGroup来实现单选功能" >
    </TextView>

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/bg" >

        <RadioButton
            android:id="@+id/cai"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="-17dip"
            android:checked="true"
            android:button="@null"
            android:drawableRight="@drawable/line"
            android:drawablePadding="10dip"
            android:text="菜"
            android:textColor="@drawable/text_selector" >
        </RadioButton>

        <RadioButton
            android:id="@+id/tang"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             android:layout_marginLeft="-15dip"
            android:button="@null"
            android:drawableRight="@drawable/line"
            android:drawablePadding="10dip"
            android:text="汤" 
            android:textColor="@drawable/text_selector">
        </RadioButton>
        
        <RadioButton
            android:id="@+id/zhushi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             android:layout_marginLeft="-15dip"
            android:button="@null"
            android:drawableRight="@drawable/line"
            android:drawablePadding="10dip"
            android:text="主   食"
            android:textColor="@drawable/text_selector" >
        </RadioButton>
        
        <RadioButton
            android:id="@+id/zhou"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             android:layout_marginLeft="-15dip"
            android:button="@null"
            android:drawableRight="@drawable/line"
            android:drawablePadding="15dip"
            android:text="粥"
            android:textColor="@drawable/text_selector" >
        </RadioButton>
    </RadioGroup>

</LinearLayout>

text_selector.xml如下:

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



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
A:要自定义ViewUI的Radio单选框可以按照以下步骤进行: 1. 创建一个新的Radio组件并基于ViewUI的Radio组件进行扩展; 2. 通过props传入需要的属性值; 3. 通过父组件传递选项、选中项、选中事件等; 4. 创建RadioItem组件作为Radio的一个子组件,并根据需要进行扩展; 5. 通过v-for循环生成RadioItem组件,并通过props传入选项、是否选中等属性; 6. 监听RadioItem组件的选中状态改变事件,并通过$emit向父组件传递选中事件; 7. 在父组件中处理选中事件,更新选中项的值。 以下是示例代码: ```vue <template> <div class="my-radio-group"> <my-radio-item v-for="(option, index) in options" :key="index" :option="option" :checked="option === value" @change="handleItemChange" ></my-radio-item> </div> </template> <script> import { Radio, RadioGroup, RadioModel } from 'view-design' export default { name: 'MyRadioGroup', components: { MyRadioItem: { props: { option: { type: [String, Number], required: true, }, checked: { type: Boolean, default: false, }, }, methods: { handleChange() { this.$emit('change', this.option) }, }, template: ` <Radio v-model="checked" @on-change="handleChange" :label="option" ></Radio> `, }, }, props: { options: { type: Array, required: true, }, value: { type: [String, Number], default: '', }, }, watch: { value(newValue) { this.$emit('input', newValue) }, }, methods: { handleItemChange(value) { this.$emit('input', value) }, }, } </script> <style scoped> .my-radio-group { display: flex; flex-direction: column; } </style> ``` 使用示例: ```vue <template> <my-radio-group v-model="selectedOption" :options="['Option 1', 'Option 2', 'Option 3']" ></my-radio-group> </template> <script> import MyRadioGroup from './MyRadioGroup.vue' export default { name: 'MyComponent', components: { MyRadioGroup, }, data() { return { selectedOption: 'Option 1', } }, } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谷哥的小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值