如何创建自定义的Android单选按钮？

Question

我的安卓应用有几个单选按钮选项，但我想让它们看起来完全不同。类似下面的样子（快速模拟），您只需点击所需的单词，它们就会变成粗体和下划线。

有人知道我如何实现类似这样的效果吗？欢迎提供所有提示！

- kramer65

---

如果你找到了答案，请分享一下。这会非常有帮助。 - Syn3sthete

Answer 1

一般来说，如果要覆盖默认小部件的外观，您需要创建一个可绘制文件夹，并将所有xml定义放入该文件夹中。然后在布局的RadioButton块中引用该xml文件。

这里有一篇很好的博客文章，介绍如何完成以上所有步骤：

http://blog.devminded.com/posts/custom-android-radiobutton

- SBerg413

Answer 2

我知道现在可能有点晚了，但这不是让我自己保留解决方案的理由。

1) 你需要为RadioGroup和它的RadioButton实现.XML布局。使用Horizontal值设置RadioGroup子元素的方向，以便将按钮并排显示。使用@null值设置RadioButton按钮，以隐藏默认选择器

如下所示：

<RadioGroup
        android:id="@+id/my_radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/i_like_radiobutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:padding="10dp"
            android:text="I Like"
            android:textColor="@android:color/holo_orange_light" />

        <RadioButton
            android:id="@+id/i_dont_like_radiobutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:padding="10dp"
            android:text="I Dont Like"
            android:textColor="@android:color/holo_orange_light" />
    </RadioGroup>

2) 在您的Activity类中，初始化并设置它们的监听器。监听器应该跟踪RadioButton的更改，并根据选择或取消选择的状态设置UI更改。如下所示：

    RadioGroup myRadioGroup = (RadioGroup) findViewById(R.id.my_radiogroup);
    RadioButton likeRadioButton = (RadioButton) findViewById(R.id.i_like_radiobutton);
    RadioButton dontLikeRadioButton = (RadioButton) findViewById(R.id.i_dont_like_radiobutton);

    //Like button listener
    likeRadioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked) {
                //Make the text underlined
                SpannableString content = new SpannableString(getString(R.string.like_text));
                content.setSpan(new UnderlineSpan(), 0, content.length(), 0);
                buttonView.setText(content);
                //Make the text BOLD
                buttonView.setTypeface(null, Typeface.BOLD);
            } else {
                //Change the color here and make the Text bold
                SpannableString content = new SpannableString(getString(R.string.like_text));
                content.setSpan(null, 0, content.length(), 0);
                buttonView.setText(content);
                buttonView.setTypeface(null, Typeface.NORMAL);

            }
        }
    });

    //Don't Like button listener
    dontLikeRadioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked) {
                //Change the color here and make the Text bold
                SpannableString content = new SpannableString(getString(R.string.like_text));
                content.setSpan(new UnderlineSpan(), 0, content.length(), 0);
                buttonView.setText(content);
                buttonView.setTypeface(null, Typeface.BOLD);
            } else {
                //Change the color here and make the Text bold
                SpannableString content = new SpannableString(getString(R.string.like_text));
                content.setSpan(null, 0, content.length(), 0); 
             buttonView.setText(content);
             buttonView.setTypeface(null, Typeface.NORMAL);

            }
        }
    });

3）现在，RadioButton将根据其状态自动更改颜色和文本样式。如果需要，您还可以进行更多的定制。

4）要在用户选择任何一个按钮时执行所需的操作，我们需要对RadioGroup的setOnCheckedChangeListener方法进行重写，如下所示：

genderRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            if (checkedId == R.id.i_dont_like_radiobutton) {
                //Do some actions
            } else if (checkedId == R.id.i_like_radiobutton){

            }
        }
    });

最终输出将与问题图像非常相似，除了分隔符。

希望它有所帮助。

- Sami Eltamawy