android 好看的单选框（radiogroup）、多选框（checkbox）和自定义LinearLayout选中变成红边框

原创

已于 2024-03-09 11:10:21 修改 · 6k 阅读

标签

#android #kotlin #开发语言

于 2020-08-24 19:29:01 首次发布

本文通过Kotlin展示了如何创建三种不同样式的单选框和复选框，包括带图片的单选框、文字单选框、文字复选框。文章提供了详细的代码示例和资源下载链接，帮助开发者实现更加美观的UI效果。

本文主要使用kotlin来实现，主要介绍3种选框，第一种图片单选框，第二种文字单选框，第三种文字复选框，性能优化得非常的好，非常推荐大家使用，效果如下图：
在这里插入图片描述

第一种好看的单选框

谷歌提供的默认单选框的UI实在是丑，一个圆形的选中按钮+文字，在现有的项目中几乎是没有人会采用的，几乎都会自定义一套好看的单选按钮样式，下面我们来看看本人自定义好看的单选框，中间带图片，效果图：
在这里插入图片描述

下面来看看代码是如何实现的：
MainActivity

class MainActivity : AppCompatActivity(), RadioGroup.OnCheckedChangeListener {
   
   
    override fun onCreate(savedInstanceState: Bundle?) {
   
   
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        radioGroup.setOnCheckedChangeListener(this)
    }

    override fun onCheckedChanged(p0: RadioGroup?, checkedId: Int) {
   
   
        Log.d("11", "进入"+checkedId)
        when (checkedId) {
   
   
            R.id.rb_1 -> {
   
   
                Log.d("11", "选择了第一个")
            }
            R.id.rb_2 -> {
   
   
                Log.d("11", "选择了第二个")
            }
            R.id.rb_3 -> {
   
   
                Log.d("11", "选择了第三个")
            }
        }
    }
}

layout_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_1"
            android:layout_width="100dp"
            android:layout_height="180dp"
            android:drawableTop="@mipmap/duanxiu"
            android:layout_margin="10dp"
            android:paddingTop="30dp"
            android:paddingRight="10dp"
            android:paddingBottom="10dp"
            android:paddingLeft="10dp"
            android:background="@drawable/select_selector_image"
            android:button="@null"/>

        <RadioButton
            android:id="@+id/rb_2"
            android:layout_width="100dp"
            android:layout_height="180dp"
            android:drawableTop="@mipmap/kuzi"
            android:drawablePadding="-20dp"
            android:padding="10dp"
            android:layout_margin="10dp"
            android:background="@drawable/select_selector_image"
            android:button="@null"/>

        <RadioButton
            android:id="@+id/rb_3"
            android:layout_width="100dp"
            android:layout_height="180dp"
            android:drawableTop="@mipmap/kuzi2"
            android:drawablePadding="-20dp"
            android:padding="10dp"
            android:layout_margin="10dp"
            android:background="@drawable/select_selector_image"
            android:button="@n