使用Kotlin的Android ToggleButton

时间:2020-02-23 14:29:22  来源:igfitidea点击:

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

什么是Android ToggleButton?

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

ToggleButton和RadioButton之间的区别

除非RadioButton出现在RadioGroup中,否则它一旦单击就无法更改状态。

ToggleButton靠近Material Design随附的Switch Widget。

ToggleButton和Switch之间的区别

开关小部件具有滑块控件,而"切换按钮"没有滑块控件。

ToggleButton属性

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

一些重要的ToggleButton属性是:

  • android:textOn
  • android:textOff
  • android:disableAlpha
  • android:选中

在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" 

默认情况下,切换按钮:

  • checked属性为假
  • textOff属性为OFF
  • textOn属性为ON
  • 指示器颜色是在" styles.xml"文件中定义的" colorAccent"。

使用Kotlin以编程方式创建ToggleButton

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

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

在ToggleButton上设置侦听器

我们有选择的切换按钮时执行CompoundButton.OnCheckedChangeListener接口回调方法来调用它。

ToggleButton有以下侦听器方法。

Android ToggleButton Kotlin示例项目

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

ToggleButton Kotlin代码

下面给出了背景选择器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>

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

下面给出了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>

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

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()
  }
}

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

多亏了android kotlin扩展,我们不必使用findViewById即可在Activity类中获取xml小部件。

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

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

自定义切换按钮

我们可以在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>

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

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