android - 我们如何使用图像和选定的真实按钮创建单选按钮

Question

请让我知道我们如何创建带有图像和选择的真按钮的单选按钮？在这里，我附上了我需要的屏幕截图？

标签： androidandroid-layoutradio-buttonradio-group

Answer 1

我使用 textview 制作了三个自定义单选按钮，您可以使用 imageview

这是我的xml

<?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"
     android:background="@color/white"
     android:orientation="vertical">

<TextView
    android:id="@+id/tv_home"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:gravity="center"
    android:paddingTop="@dimen/docs__bottom_icon_padding"
    android:paddingBottom="@dimen/docs__bottom_icon_padding"
    android:text="@string/home"
    android:drawablePadding="@dimen/padding_icon_text_top_bar_docs"
    app:drawableTopCompat="@drawable/ic_home"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/tv_jpg"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/tv_jpg"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:gravity="center"
    android:paddingTop="@dimen/docs__bottom_icon_padding"
    android:paddingBottom="@dimen/docs__bottom_icon_padding"
    android:text="@string/files"
    android:drawablePadding="@dimen/padding_icon_text_top_bar_docs"
    app:drawableTopCompat="@drawable/ic_files"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/tv_pdf"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/tv_home" />

<TextView
    android:id="@+id/tv_pdf"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:gravity="center"
    android:paddingTop="@dimen/docs__bottom_icon_padding"
    android:paddingBottom="@dimen/docs__bottom_icon_padding"
    android:drawablePadding="@dimen/padding_icon_text_top_bar_docs"
    android:text="@string/pdf"
    app:drawableTopCompat="@drawable/ic_pdf"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/tv_jpg" />
</androidx.constraintlayout.widget.ConstraintLayout>

在活动的 onCreate 中写下这段代码

       tv_home.setOnClickListener {
            setSelected(tv_home)
        }
        tv_jpg.setOnClickListener {
            setSelected(tv_jpg)
        }
        tv_pdf.setOnClickListener {
            setSelected(tv_pdf)
        }

oncreate 的外侧将方法设为

private fun setSelected(pTextViw: TextView) {
    if (tv_home == pTextViw) {
        tv_home.compoundDrawables[1].setTint(mSelectedColor)
        tv_home.setTextColor(mSelectedColor)
        tv_jpg.compoundDrawables[1].setTint(mUnSelectedColor)
        tv_jpg.setTextColor(mUnSelectedColor)
        tv_pdf.compoundDrawables[1].setTint(mUnSelectedColor)
        tv_pdf.setTextColor(mUnSelectedColor)
    } else if (tv_jpg == pTextViw) {
        tv_home.compoundDrawables[1].setTint(mUnSelectedColor)
        tv_home.setTextColor(mUnSelectedColor)
        tv_jpg.compoundDrawables[1].setTint(mSelectedColor)
        tv_jpg.setTextColor(mSelectedColor)
        tv_pdf.compoundDrawables[1].setTint(mUnSelectedColor)
        tv_pdf.setTextColor(mUnSelectedColor)
    } else if (tv_pdf == pTextViw) {
        tv_home.compoundDrawables[1].setTint(mUnSelectedColor)
        tv_home.setTextColor(mUnSelectedColor)
        tv_jpg.compoundDrawables[1].setTint(mUnSelectedColor)
        tv_jpg.setTextColor(mUnSelectedColor)
        tv_pdf.compoundDrawables[1].setTint(mSelectedColor)
        tv_pdf.setTextColor(mSelectedColor)
    }
}