如何调整 Android 中的 ToggleButtons，使它们有边框并改变颜色？

Question

我有 3 个 ToggleButtons，如您在屏幕截图中所见：

我想进行以下布局修改：

应该有分隔切换按钮的边缘
未选中的切换按钮的填充颜色应为白色，而选中的切换按钮的填充颜色应为绿色，这样您就可以看到其中哪些被选中（我将以编程方式确保只有一个那些可以检查）

这是我的 XML 内衬布局中切换按钮的布局：

    <LinearLayout
        android:id ="@+id/linearLayoutForButtons"
        android:layout_width="0dp"
        android:layout_height="@dimen/_25sdp"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        >


        <ToggleButton
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAllCaps="false"
            android:background="#95f9ad"
            android:layout_weight="1"
            android:checked="true"
            android:textOn="Button 1"
            android:textOff="Button 1"
            android:textSize="@dimen/_8ssp"
            app:layout_constraintTop_toTopOf="parent" />

        <ToggleButton
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#95f9ad"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:checked="false"
            android:textSize="@dimen/_8ssp"
            android:textOn="Button 2"
            android:textOff="Button 2" />

        <ToggleButton
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#95f9ad"
            android:textAllCaps="false"
            android:layout_weight="1"
            android:checked="false"
            android:textSize="@dimen/_8ssp"
            android:textOn="Button 3"
            android:textOff="Button 3"/>
    </LinearLayout>

知道我该怎么做吗？它实际上应该类似于此处使用的 ToggleButtons

提醒：有人知道怎么做吗？我会感谢每一条评论。

Answer 1

我们也可以这样创建

也许这就是您要找的更多内容。这确实需要一些更改。

activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/root_view_background"
        android:padding="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ToggleButton
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button_1_selector"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ToggleButton
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button_2_selector"
            app:layout_constraintStart_toEndOf="@id/button1"
            app:layout_constraintTop_toTopOf="@id/button1" />

        <ToggleButton
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button_3_selector"
            app:layout_constraintStart_toEndOf="@id/button2"
            app:layout_constraintTop_toTopOf="@id/button1" />

        </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

可绘制root_view_background.xml（这是黑色轮廓）

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <stroke android:color="@color/black" android:width="1dp" />
    <corners android:radius="3dp" />
</shape>

Drawable button_1_background_checked（这是左按钮的绿色背景）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/holo_green_light" />
    <corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" /> 
</shape>

Drawable button_2_background_checked（这是中间按钮的绿色背景）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/holo_green_light" />
</shape>

已选中可绘制对象 button_3_background（这是右键的绿色背景）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/holo_green_light" />
    <corners android:topRightRadius="3dp" android:bottomRightRadius="3dp" />
</shape>

Drawable button_1_selector（这会改变第一个按钮是否选中时的背景）

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

Drawable button_2_selector（无论是否选中，这都会更改第二个按钮的背景）

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

Drawable button_3_selector（这会更改最后一个按钮是否选中时的背景）

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

如何调整 Android 中的 ToggleButtons，使它们有边框并改变颜色？

How to adjust ToggleButtons in Android such that they have a rim and change their color?

android

togglebutton