代码之家 › 专栏 › 技术社区 › Olivier MATROT

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

android

Olivier MATROT · 技术社区 · 6 年前

我在单选按钮组中使用背景和文本正确调整单选按钮大小时遇到问题。

基本上,我在网格布局中有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>

正如您在下面的屏幕截图中所看到的,这些圆不再是圆了。。。

为什么呢?

3 回复 | 直到 6 年前

Badja 6 年前

这不是因为 android:layout_width="fill_parent"

单选按钮是否没有试图伸展以填充屏幕宽度?

Abhra 6 年前

而不是 android:layout_width="0sp" android:layout_width="0dp" sp用于文本大小。

Ben P. 6 年前

您可以通过使用 ConstraintLayout 作为父母而不是 GridLayout 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"/>