使用Kotlin的Android ToggleButton

郑承恩

2023-12-01

In this tutorial, we’ll learn how to implement Android ToggleButton using Kotlin. We will learn how to create custom toggle buttons and how do they work.

在本教程中，我们将学习如何使用Kotlin实现Android ToggleButton。我们将学习如何创建自定义切换按钮以及它们如何工作。

什么是Android ToggleButton？ (What is Android ToggleButton?)

Android ToggleButton widget is used to toggle the state of the Button(checked/unchecked).

Android ToggleButton小部件用于切换Button的状态（选中/未选中）。

ToggleButton和RadioButton之间的区别 (Difference between ToggleButton and RadioButton)

A RadioButton cannot change the state once it’s clicked unless it’s present in a RadioGroup.

单击RadioButton不能更改状态，除非它存在于RadioGroup中。

A ToggleButton is closer to a Switch Widget that is available with Material Design.

ToggleButton靠近Material Design随附的Switch Widget 。

ToggleButton和Switch之间的区别 (Difference between ToggleButton and Switch)

The Switch Widget has a slider control while the ToggleButton does not have it.

开关小部件具有滑块控件，而ToggleButton没有。

ToggleButton属性 (ToggleButton Attributes)

ToggleButton extends the Button class. It inherits most of the Button attributes such as android:text, android:drawableRight, android:textAllCaps, and android:background.

ToggleButton扩展了Button类。它继承了大多数Button属性，例如android:text ， android:drawableRight ， android:textAllCaps和android:background 。

Some of the important ToggleButton attributes are:

一些重要的ToggleButton属性是：

android:textOn
android：textOn
android:textOff
android：textOff
android:disableAlpha
android：disableAlpha
android:checked
android：选中

在XML中定义切换按钮 (Defining a Toggle Button in XML)

<ToggleButton
        android:id="@+id/toggleButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="NIGHT"
        android:checked="true"
        android:textOn="DAY" />

By default Toggle button:

默认情况下，切换按钮：

checked attribute is false
checked属性为假
textOff attribute is OFF
textOff属性为OFF
textOn attribute is ON
textOn属性为ON
The indicator color is colorAccent that’s defined in the styles.xml file.
指示器颜色是在styles.xml文件中定义的colorAccent 。

使用Kotlin以编程方式创建ToggleButton (Creating ToggleButton Programmatically using Kotlin)

val toggleButton = ToggleButton(this)
toggleButton.textOff = "ABC"
toggleButton.textOn = "DEF"
toggleButton.isChecked = true

The textOn, textOff, and isChecked properties behave as getter and setter methods.

textOn，textOff和isChecked属性的行为与getter和setter方法相同。

在ToggleButton上设置侦听器 (Setting a Listener on the ToggleButton)

We have to implement CompoundButton.OnCheckedChangeListener interface callback method to invoke it when the ToggleButton is selected.

当选择ToggleButton时，我们必须实现CompoundButton.OnCheckedChangeListener接口回调方法来调用它。

There are following listener methods for ToggleButton.

ToggleButton有以下侦听器方法。

Android ToggleButton Kotlin示例项目 (Android ToggleButton Kotlin Example Project)

We’ve created two drawables using Vector Assets in our drawable directory. The toggle_drawable.xml acts as the background selector. It will set the appropriate background according to the state of the toggle button.

我们在drawable目录中使用Vector Assets创建了两个drawable。 toggle_drawable.xml用作背景选择器。它将根据切换按钮的状态设置适当的背景。

ToggleButton Kotlin代码 (ToggleButton Kotlin Code)

The code for the background selector toggle_drawable.xml is given below.

下面给出了背景选择器toggle_drawable.xml的代码。

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

It’ll show the relevant image on the ToggleButton based on the state – checked/unchecked.

它将根据状态-选中/未选中在ToggleButton上显示相关图像。

The code for the activity_main.xml layout file is given below.

下面给出了activity_main.xml布局文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ToggleButton
        android:id="@+id/toggleButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="NIGHT"
        android:textOn="DAY" />

    <ToggleButton
        android:id="@+id/toggleButtonDrawable"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/toggle_drawable"
        android:checked="true"
        android:textOff=""
        android:textOn="" />

</LinearLayout>

We have to set empty field explicitly in textOn and textOff otherwise they’ll show default values.

我们必须在textOn和textOff中显式设置空字段，否则它们将显示默认值。

The code for the MainActivity.kt class is given below.

MainActivity.kt类的代码如下。

package net.androidy.androidlytogglebutton

import android.content.Context
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.CompoundButton
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), CompoundButton.OnCheckedChangeListener {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        toggleButton1.setOnCheckedChangeListener(this)
        toggleButton2.setOnCheckedChangeListener(this)
        toggleButtonDrawable.setOnCheckedChangeListener(this)

    }

    override fun onCheckedChanged(p0: CompoundButton?, p1: Boolean) {
        when (p0?.id) {
            R.id.toggleButtonDrawable -> displayToast(message = "Toggle Button Drawable State is Filled? $p1")
            else -> displayToast(message = "Toggle Button State is checked? $p1")
        }
    }


    fun displayToast(context: Context = this, message: String, duration: Int = Toast.LENGTH_SHORT) {
        Toast.makeText(context, message, duration).show()
    }
}

We are implementing CompundButton.OnCheckedChangeListener interface. We are overriding the onCheckChanged function in our Kotlin class.

我们正在实现CompundButton.OnCheckedChangeListener接口。我们将覆盖Kotlin类中的onCheckChanged函数。

Thanks to android kotlin extensions, we don’t have to use findViewById to get the xml widgets in our Activity class.

感谢android kotlin扩展，我们不必使用findViewById即可在Activity类中获取xml小部件。

Inside the onCheckChanged function, we’ve used “when statement” to display a Toast message showing whether the Button was checked/unchecked.

在onCheckChanged函数内部，我们使用了“ when语句”来显示Toast消息，该消息显示按钮是否已选中/未选中。

Kotlin Functions allow us to set default values for the parameters.

Kotlin函数允许我们设置参数的默认值。

自定义切换按钮 (Custom ToggleButton)

We can set styles on our ToggleButton inside the styles.xml file.

我们可以在styles.xml文件中的ToggleButton上设置样式。

<style name="AppTheme.ToggleButton" parent="Base.Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/colorPrimaryDark</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="colorAccent">@android:color/holo_purple</item>
    </style>

To set the custom style on our ToggleButton:

在我们的ToggleButton上设置自定义样式：

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.ToggleButton" />

Custom Toggle Button Output:

自定义切换按钮输出：

AndroidlyToggleButton AndroidlyToggleButton

翻译自: https://www.journaldev.com/168/android-togglebutton-kotlin