使用Kotlin的Android ToggleButton
在本教程中,我们将学习如何使用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
属性为OFFtextOn
属性为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"