在android中添加自定义单选按钮

Posted 2023-04-19

技术标签:

【中文标题】在android中添加自定义单选按钮【英文标题】：Adding custom radio buttons in android 【发布时间】：2013-10-10 09:55:11 【问题描述】：

我正在尝试为 android 中的常规按钮获得单选按钮效果

我在下面有一个简单的 android 单选按钮

代码是 ::

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_
        android:layout_
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_
            android:layout_
            android:checked="true"
            android:text="RadioButton1" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_
            android:layout_
            android:text="RadioButton2" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_
            android:layout_
            android:text="RadioButton3" />
    </RadioGroup>


</RelativeLayout>

如何自定义如下：：

谢谢！

[编辑] 使用来自答案之一的代码

但是按钮名称被select选项遮住了怎么去掉呢？

EDIT 更多更改

最后的更改应该至少我应该知道我从三个单选按钮中选择了哪个按钮......是否有可能得到如下？

【问题讨论】：

4 年后大声笑 - 这可能对你有用crosp.net/blog/android/… @SomeoneSomewhere .....哈哈哈...谢谢...很有用:) :) 描述的最简单的方法here.. 【参考方案1】：

添加一个引用图像或选择器（如下所示）的背景可绘制对象，并使按钮透明：

<RadioButton
    android:id="@+id/radio0"
    android:layout_
    android:layout_
    android:background="@null"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:text="RadioButton1" />

如果您希望您的单选按钮在选中时具有不同的资源，请创建一个选择器背景可绘制对象：

res/drawable/yourbuttonbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/b"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/b" />
</selector>

在上面的选择器中，我们引用了两个可绘制对象，a 和 b，我们是这样创建它们的：

res/drawable/a.xml - 选定状态

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:
        android:color="#53aade" />
</shape>

res/drawable/b.xml - 常规状态

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:
        android:color="#555555" />
</shape>

更多关于drawables的信息：http://developer.android.com/guide/topics/resources/drawable-resource.html

【讨论】：

嘿，谢谢我完成了功能......但是按钮名称被选择选项覆盖......如何删除它......保持功能完好......正如我在我的问题中所展示的那样，我正在努力实现的一切......任何进一步的方向！ [注意：：请查看更新后的问题] @Unicorn 添加android:button="@android:color/transparent" 删除它。 @Unicorn 是的，我明白了。您需要做的就是创建一个可绘制的选择器，就像我在回答中所说的那样。您将创建两个可绘制对象。一种用于常规按钮样式，一种用于按下按钮样式。我将使用这些可绘制对象的代码更新我的答案。要适应文本而不是重叠文本，请将按钮设置为可绘制，而不是背景，并确保它是一个 9 补丁，其中包含拉伸点和内容区域以适应文本。单选按钮的正常行为，您在寻找复选框吗？【参考方案2】：

我已更新接受的答案并删除了不必要的内容。

我已经为下面的图片创建了 XML。

RadioButton 的 XML 代码将是：

<RadioGroup
        android:id="@+id/daily_weekly_button_view"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <RadioButton
            android:id="@+id/radio0"
            android:layout_
            android:gravity="center"
            android:layout_
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:checked="true"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Daily"
            android:textColor="@color/radio_flat_text_selector" />

        <RadioButton
            android:id="@+id/radio1"
            android:gravity="center"
            android:layout_
            android:layout_
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Weekly"
            android:textColor="@color/radio_flat_text_selector" />

</RadioGroup>

`radio_flat_selector.xml` 用于背景选择器：

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

`radio_flat_selected.xml` 选择按钮：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="1dp"
        />
    <solid android:color="@color/colorAccent" />
    <stroke
        android:
        android:color="@color/colorAccent" />
</shape>

`radio_flat_regular.xml` 用于常规选择器：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1dp" />
    <solid android:color="#fff" />
    <stroke
        android:
        android:color="@color/colorAccent" />
</shape>

以上3个文件代码都在drawable/文件夹中。

现在我们还需要Text颜色选择器来相应地改变文本的颜色。

`radio_flat_text_selector.xml` 用于文本颜色选择器

（此文件使用color/ 文件夹。）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="false" />
    <item android:color="@color/colorWhite" android:state_checked="true" />
</selector>

注意：我为这种类型的解决方案参考了很多答案，但没有找到好的解决方案，所以我做到了。

希望对您有所帮助。

谢谢。

【讨论】：

我非常接近我想要的，但我也看到了项目之间的圆角半径。当我有三个按钮时，我明白了。有没有办法确保半径只适用于组本身？ imgur.com/mP8dtKR @AdamMc331，您必须创建 3 个选择器，一个用于行首的按钮，一个用于中间的按钮，另一个用于最后一个，然后您可以调整并且只有一个圆角的边缘，如果你将包裹在内的内，还可以用负标记隐藏其中一个如何创建颜色/文件夹？你能帮我吗是的，它会工作的。如果您有任何问题，请告诉我。我在 android 4 上试过，并通过 Appcompat 活动得到了这个 ibb.co/jyHVXHS，但当我用 Activity 扩展时效果很好【参考方案3】：

使用与 Evan 的回答相同的 XML 文件格式，但您只需要一个可绘制文件即可进行格式化。

<RadioButton
    android:id="@+id/radio0"
    android:layout_
    android:layout_
    android:background="@drawable/custom_button_background"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

还有你单独的可绘制文件：

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

    <item android:state_pressed="true" >
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android: android:color="#333333" />
             <solid android:color="#cccccc" />            
         </shape>
    </item>

    <item android:state_checked="true">
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android: android:color="#333333" />
             <solid android:color="#cccccc" /> 
         </shape>
    </item>  

    <item>
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android: android:color="#cccccc" />
             <solid android:color="#ffffff" />            
         </shape>
    </item>
</selector>

【讨论】：

谢谢你……它看起来很有帮助。仍在努力尝试。可绘制对象 customButtonBackground 的名称中不允许包含大写字母——至少 Android Studio 是这样告诉我的。【参考方案4】：

像接受的答案一样设置 RadioButton 的 android:background 和 android:button 对我不起作用。可绘制图像作为背景显示（尽管 android:button 被设置为 transparent ）到单选按钮文本为

android:background="@drawable/radiobuttonstyle"
    android:button="@android:color/transparent"

所以将单选按钮作为自定义可绘制radiobuttonstyle.xml

<RadioButton
    android:layout_
    android:layout_
    android:checked="true"
    android:text="Maintenance"
    android:id="@+id/radioButton1"
    android:button="@drawable/radiobuttonstyle"
      />

和radiobuttonstyle.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/ic_radio_checked"></item>
  <item android:state_checked="false" android:drawable="@drawable/ic_radio_unchecked"></item>
</selector>

在这个带有自定义按钮样式的单选按钮工作之后。

【讨论】：

【参考方案5】：

您必须使用 XML 可绘制路径 (my_checkbox) 填充“CompoundButton”类的“Button”属性。在 XML drawable 中，你必须有：

<?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/checkbox_not_checked" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
     <item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>

不要忘记将 my_checkbox 替换为您的复选框 drawable 的文件名，checkbox_not_checked 替换为您的 PNG 可绘制对象，这是您未选中和 checkbox_checked 时的复选框检查时使用您的图片。

对于尺寸，直接更新布局参数。

【讨论】：

我相信 OP 想要按钮中的文本。我认为做到这一点的唯一方法是将drawable应用于android:background与android:button；然后将android:button 声明为透明的。这样文本可以位于按钮内。【参考方案6】：

为了隐藏默认的单选按钮，我建议remove the button 而不是使其透明，因为所有视觉反馈都由可绘制背景处理：

android:button="@null"

另外最好use styles，因为有几个单选按钮：

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

你也需要Seslyn customButtonBackground drawable。

【讨论】：

【参考方案7】：

添加自定义drawable的最佳方法是：

<RadioButton
    android:id="@+id/radiocar"
    android:layout_
    android:layout_
    android:layout_gravity="center"
    android:background="@android:color/transparent"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:drawableRight="@mipmap/car"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:text="yourtexthere"/>

自定义drawable的阴影覆盖在此处被删除。

【讨论】：

我也选择了这个选项而不是background。如果设置了背景，不能给RadioButton添加文字，需要放置自己的TextView【参考方案8】：

简单的方法试试这个

在drawable文件夹中新建一个布局，命名为custom_radiobutton（也可以重命名）

 <?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/your_radio_off_image_name" />
 <item android:state_checked="true" 
android:drawable="@drawable/your_radio_on_image_name" />
</selector>

在你的布局活动中使用它

<RadioButton
 android:id="@+id/radiobutton"
 android:layout_
 android:layout_
 android:button="@drawable/custom_radiobutton"/>

【讨论】：

【参考方案9】：

有人因为设置自定义按钮不起作用而来到这里吗？我注意到 RadioButton 不起作用，但 androidx.appcompat.widget.AppCompatRadioButton 起作用了。

这样的单选按钮

 <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/your_id"
            android:layout_
            android:layout_
            android:button="@drawable/radio_button_selector"
            android:text="Your choice" />

使用这样的选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_button_selected" android:state_checked="true" />
    <item android:drawable="@drawable/radio_button_unselected" android:state_checked="false" />
</selector>

会起作用的。

【讨论】：

【参考方案10】：

以下代码是自定义单选按钮的示例。请按照以下步骤操作..

Xml 文件。

 <FrameLayout
     android:layout_
     android:layout_
     android:layout_weight="0.5">

     <TextView
         android:id="@+id/text_gender"
         android:layout_
         android:layout_
         android:layout_gravity="left|center_vertical"
         android:gravity="center"
         android:text="@string/gender"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"

         />

     <TextView
         android:id="@+id/text_male"
         android:layout_
         android:layout_
         android:layout_gravity="center"
         android:layout_marginLeft="10dp"
         android:gravity="center"
         android:text="@string/male"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <RadioButton
         android:id="@+id/radio_Male"
         android:layout_
         android:layout_
         android:layout_gravity="right|center_vertical"
         android:layout_marginRight="4dp"
         android:button="@drawable/custom_radio_button"
         android:checked="true"
         android:text=""
         android:onClick="onButtonClicked"
         android:textSize="15sp"
         android:textStyle="normal"

         />
 </FrameLayout>

 <FrameLayout
     android:layout_
     android:layout_
     android:layout_weight="0.6">

     <RadioButton
         android:id="@+id/radio_Female"
         android:layout_
         android:layout_
         android:layout_gravity="right|center_vertical"
         android:layout_marginLeft="10dp"
         android:layout_marginRight="0dp"
         android:button="@drawable/custom_female_button"
         android:text=""
         android:onClick="onButtonClicked"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <TextView
         android:id="@+id/text_female"
         android:layout_
         android:layout_
         android:layout_gravity="left|center_vertical"
         android:gravity="center"
         android:text="@string/female"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <RadioButton
         android:id="@+id/radio_Other"
         android:layout_
         android:layout_
         android:layout_gravity="center_horizontal|bottom"
         android:layout_marginRight="10dp"
         android:button="@drawable/custom_other_button"
         android:text=""
         android:onClick="onButtonClicked"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <TextView
         android:id="@+id/text_other"
         android:layout_
         android:layout_
         android:layout_gravity="right|center_vertical"
         android:layout_marginRight="34dp"
         android:gravity="center"
         android:text="@string/other"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"/>
 </FrameLayout>

2.为单选按钮添加自定义xml

2.1.其他可绘制对象

custom_other_button.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/select_radio_other" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.2.女性可绘制

custom_female_button.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/select_radio_female" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.3。男性可绘制

custom_radio_button.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/select_radio_male" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>

输出： this is the output screen

【讨论】：

它不适用于 RadioGroup【参考方案11】：

我意识到这是一个迟来的答案，但通过 developer.android.com 查看，似乎切换按钮非常适合您的情况。

http://developer.android.com/guide/topics/ui/controls/togglebutton.html

当然，您仍然可以使用其他建议来获得背景可绘制对象，以获得您想要的自定义外观。

<ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_
    android:layout_
    android:background="@drawable/custom_button_background"
    android:textOn="On"
    android:textOff="Off"
    />

现在，如果您想进行最终编辑并在按钮周围产生“光环”效果，您可以使用另一个自定义选择器来做到这一点。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" > <!-- selected -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:
                android:color="@android:color/holo_blue_bright" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item> <!-- default -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:
                android:color="@android:color/darker_gray" />
            <corners
                android:radius="5dp" />
        </shape>
    </item> 
</selector>

【讨论】：

这是否仍然允许单选按钮行为，即当一个按钮被选中时，其他任何按钮都未选中？【参考方案12】：

TL;DR 使用android:drawableStart 代替android:button 作为我们的自定义可绘制选择器文件。将android:button 设置为@null。示例：

android:button="@null"
android:drawableStart="@drawable/radio_selector"

加长版：

不知道原因，但当我在运行 Android 11（API 级别 30）的设备上对其进行测试时，这里的现有答案对我不起作用。所以尝试了以下替代方法或破解，它奏效了。单选按钮组件的示例 xml 供参考：

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_
    android:layout_
    android:button="@null"
    android:drawableStart="@drawable/radio_selector"
    android:drawablePadding="5dp"
    android:text="@string/radioOption1" />

我们将android:drawableStart 用于我们的收音机的自定义可绘制图像或用于选择器的选中图标，而不是android:button。并且不要忘记将android:button 设置为@null

【讨论】：

以上是关于在android中添加自定义单选按钮的主要内容，如果未能解决你的问题，请参考以下文章

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

在 TableView 的自定义单元格中添加单选按钮并且无法访问外部

基于 Woocommerce 中的自定义单选按钮的动态运费

自定义单选按钮jqgrid编辑表单

是否可以更改android单选按钮组中的单选按钮图标

单选按钮的自定义布局