3

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

我试图在gravity和layout_gravity上设置RadioGroupand RadioButtons，以及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>
4

2 回答 2

2

使用 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);
            }
        }
    });
}
}
于 2018-12-17T18:23:15.617 回答
0

你想要 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" 
/>

于 2018-12-17T18:39:37.593 回答