Question

我在单选按钮组中正确设置带有背景和文字的单选按钮的大小时遇到问题。

所以基本上，我在网格布局中有10个单选按钮，其布局如下：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnCount="10" android:orientation="horizontal">
    <RadioGroup android:id="@+id/qol_criteria1_radio_group" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
        <RadioButton android:id="@+id/qol_criteria1_score1" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="1" android:tag="1" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score2" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="2" android:tag="2" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score3" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="3" android:tag="3" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score4" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="4" android:tag="4" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score5" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="5" android:tag="5" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score6" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="6" android:tag="6" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score7" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="7" android:tag="7" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score8" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="8" android:tag="8" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score9" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="9" android:tag="9" android:gravity="center" />
        <RadioButton android:id="@+id/qol_criteria1_score10" android:layout_width="0sp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/qol_score_background" android:button="@android:color/transparent" android:checked="false" android:text="10" android:tag="10" android:gravity="center" />
    </RadioGroup>
</GridLayout>

可绘制对象是：

<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:left="4sp"
        android:right="4sp"
        android:drawable="@drawable/ic_btn_radio_mobile_01"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:left="4sp"
        android:right="4sp"
        android:drawable="@drawable/ic_btn_radio_mobile_02"
        android:state_pressed="true" />
    <item
        android:left="4sp"
        android:right="4sp"
        android:drawable="@drawable/ic_btn_radio_mobile_02"
        android:state_checked="true" />
    <item
        android:left="4sp"
        android:right="4sp"
        android:drawable="@drawable/ic_btn_radio_mobile_01" />
</selector>

和图标（在布局外部显示时为圆圈）：

<vector android:height="24sp" android:viewportHeight="32"
    android:viewportWidth="32" android:width="24sp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#00000000"
        android:pathData="M15.844,15.9m-13.5,0a13.5,13.5 0,1 1,27 0a13.5,13.5 0,1 1,-27 0"
        android:strokeColor="#918D8D" android:strokeLineCap="round" android:strokeWidth="2"/>
</vector>

和

<vector android:height="24sp" android:viewportHeight="32"
    android:viewportWidth="32" android:width="24sp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#00000000"
        android:pathData="M10.83,13.354l4.999,5.834l14.17,-17.501"
        android:strokeColor="#FF5F00" android:strokeLineCap="round" android:strokeWidth="2"/>
    <path android:fillColor="#00000000"
        android:pathData="M29.172,13.775c0.109,0.679 0.162,1.37 0.162,2.078c0,7.456 -6.042,13.499 -13.499,13.499c-7.458,0 -13.501,-6.043 -13.501,-13.499c0,-7.458 6.043,-13.5 13.501,-13.5c1.839,0 3.593,0.366 5.192,1.033"
        android:strokeColor="#FF5F00" android:strokeLineCap="round" android:strokeWidth="2"/>
</vector>

如以下屏幕截图所示，圆圈不再是圆圈...

那是为什么？

Answer 1

这与android:layout_width="fill_parent"无关吗？

单选按钮是否不试图伸展以填满屏幕宽度？

Answer 2

使用android:layout_width="0sp"代替android:layout_width="0dp" 并将所有sp更改为dp。 sp用于文本大小。

Answer 3

您可以通过使用ConstraintLayout而不是GridLayout作为父元素来完成此操作。 ConstraintLayout允许您为其子级指定长宽比，并且可以使用此约束来确保RadioGroup的宽度是其高宽的十倍，这将使您的十个子级中的每一个都是正方形。

这是您应该使用的布局框架：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioGroup
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="10:1"
        android:orientation="horizontal">

        <!-- radio buttons -->

    </RadioGroup>

</androidx.constraintlayout.widget.ConstraintLayout>

几乎所有重要内容都在<RadioGroup>标记中。您将0dp用于宽度和高度，以便约束将定义宽度和高度。左右约束确保可以拉伸以填满整个屏幕，比率约束可以确保获得正确的宽高比。

您可以在此框架中使用几乎与今天相同的RadioButton。您需要做的唯一更改是将高度更改为match_parent而不是wrap_content：

<RadioButton
    android:id="@+id/qol_criteria1_score1"
    android:tag="1"
    android:layout_width="0sp"
    android:layout_height="match_parent"     <---- this needs to change
    android:layout_weight="1"
    android:gravity="center"
    android:text="1"
    android:background="@drawable/qol_score_background"
    android:button="@android:color/transparent"
    android:checked="false"/>

单选按钮组中的单选按钮大小不正确

3 个答案: