Android RadioButton *with* 图标和中心对齐答案

【问题标题】：Android RadioButton *with* icon and center alignedAndroid RadioButton *with* 图标和中心对齐
【发布时间】：2019-05-18 01:58:55
【问题描述】：

是否可以使用 RadioButtons 创建一个水平 RadioGroup，其中每个按钮包含一个单选、图标和文本，并且这三个项目彼此垂直居中对齐？

我尝试在RadioGroup 和RadioButtons 上设置gravity 和layout_gravity，以及在每个按钮上设置layout_weight 等，但无济于事。为什么在 Android 上这么难？

^ 我想要以图标和标题为中心的单选按钮。

我需要整个区域都是可选的，所以我真的很想设置 RadioButton 的图标和文本值，而不是在 UI 中添加单独的 ImageView。我想使用 RadioGroup，因为我在自定义 Preference 项目中使用它，所以选择和持久性对我来说处理得很好。

这里是 XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/widget_frame"
    style="@style/AppTheme"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:theme="@style/AppTheme"
    tools:context=".settings.homeScreenPreference">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:text="@string/set_home_screen" />

    <!--Settings icon-->
    <ImageView
        android:id="@+id/settingsIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/settings_icon_description"
        android:drawable="@drawable/ic_settings"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/settingsTitle"
        app:layout_constraintEnd_toStartOf="@+id/diidsIcon"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_settings" />

    <!--Cards icon-->
    <ImageView
        android:id="@+id/diidsIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/my_cards_icon_description"
        android:drawable="@drawable/ic_my_cards"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/scannerIcon"
        app:layout_constraintStart_toEndOf="@+id/settingsIcon"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_my_cards" />

    <!--Scanner icon-->
    <ImageView
        android:id="@+id/scannerIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/scanner_icon_description"
        android:drawable="@drawable/ic_scan_qr"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/diidsIcon"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_scan_qr" />

    <!--Settings title-->
    <TextView
        android:id="@+id/settingsTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/settings"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/diidsTitle"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/settingsIcon" />

    <!--Cards title-->
    <TextView
        android:id="@+id/diidsTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/my_cards"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/scannerTitle"
        app:layout_constraintStart_toEndOf="@+id/settingsTitle"
        app:layout_constraintTop_toBottomOf="@id/diidsIcon" />

    <!--Scanner title-->
    <TextView
        android:id="@+id/scannerTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/scan_code"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/diidsTitle"
        app:layout_constraintTop_toBottomOf="@id/scannerIcon" />

    <!--Radio group-->
    <RadioGroup
        android:id="@+id/home_screen_radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/settingsTitle">

        <!--Settings radio-->
        <RadioButton
            android:id="@+id/settingsButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent" />

        <!--Cards radio-->
        <RadioButton
            android:id="@+id/diidsButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent" />

        <!--Scanner radio-->
        <RadioButton
            android:id="@+id/scannerButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent"/>
    </RadioGroup>
</android.support.constraint.ConstraintLayout>

【问题讨论】：

标签： android android-radiobutton android-radiogroup center-align

【解决方案1】：

使用 CheckedTextView 代替 RadioButton 你会得到这个

布局 XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

 <CheckedTextView
    android:id="@+id/one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="Settings"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/two"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <CheckedTextView
    android:id="@+id/two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="My DIID"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/three"
    app:layout_constraintStart_toEndOf="@+id/one"
    app:layout_constraintTop_toTopOf="parent" />

 <CheckedTextView
    android:id="@+id/three"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="Scan Code"
    android:textSize="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/two"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

使 2 可绘制并像这样添加现在背景可绘制

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

   <item android:drawable="@drawable/ic_android_green_24dp" 
   android:state_checked="true" 
/>
</selector>

现在的 MainActivity

public class MainActivity extends AppCompatActivity {
CheckedTextView one,two,three;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    one = findViewById(R.id.one);
    two = findViewById(R.id.two);
    three = findViewById(R.id.three);
    mDrawable = getResources().getDrawable(R.drawable.ic_android_black_24dp);
    one.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (one.isChecked()){
                one.setTextColor(getResources().getColor(R.color.black));
                one.setChecked(false);
            }else{
                one.setTextColor(getResources().getColor(R.color.colorPrimary));
                one.setChecked(true);
            }
        }
    });
    two.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (two.isChecked()){
                two.setTextColor(getResources().getColor(R.color.black));
                two.setChecked(false);
            }else{
                two.setTextColor(getResources().getColor(R.color.colorPrimary));
                two.setChecked(true);
            }
        }
    });
    three.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (three.isChecked()){
                three.setTextColor(getResources().getColor(R.color.black));
                three.setChecked(false);
            }else{
                three.setTextColor(getResources().getColor(R.color.colorPrimary));
                three.setChecked(true);
            }
        }
    });
}
}

【讨论】：

我看到你给我留下了两个详细的答案，我正在测试它们。我需要能够自定义图标的大小，但我还没有弄清楚如何做到这一点。这就是为什么我还没有选择你的任何一个答案作为正确的解决方案。我真的很想在 XML 中保留尽可能多的代码样式，以便将 .kt 代码保持在最低限度。
如果你喜欢用它没问题，如果有什么我可以做的，请多问我。
如果您能回答我遇到的其他问题，那就太好了...stackoverflow.com/questions/53834600/…

【解决方案2】：

您希望 RadioButton 位于中心，上面的文字是这样的

这是 XML 代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:checked="true"
        android:drawableTop="@drawable/ic_state"
        android:drawableBottom="@android:drawable/btn_radio"
        android:gravity="center"
        android:text="Text on top" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawableTop="@drawable/ic_state"
        android:drawableBottom="@android:drawable/btn_radio"
        android:gravity="center"
        android:text="Text on top" />
  </RadioGroup>
</android.support.constraint.ConstraintLayout>

并为选中和未选中状态使用 2 个背景可绘制对象

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/ic_android_black_24dp" 
android:state_checked="false" />

<item android:drawable="@drawable/ic_android_green_24dp" android:state_checked="true" 
/>

【讨论】：