如何在 Android 中自定义 MDC 滑块？

在Android 中的 Material Design 组件滑块一文中，讨论了如何在 android 中实现 Material Design 组件滑块，以及如何处理所有类型滑块的点击侦听器。在本文中，讨论了如何在 Android 中自定义 Material Design 组件滑块。查看下图以了解讨论的概述。在继续之前，了解滑块的解剖结构很重要，这在上一篇文章中进行了讨论。

创建项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。

添加所需的依赖项

在 build.gradle 文件中包含 google material design components 依赖项。添加依赖项后，不要忘记单击右上角的“立即同步”按钮。

implementation ‘com.google.android.material:material:1.4.0’

请注意，在同步项目时，您需要连接到网络，并确保将依赖项添加到应用级 Gradle文件中，如下所示。

步骤 1：使用 activity_main.xml 文件

应用程序的主要布局包含两个滑块，一个是连续滑块，另一个是离散滑块和一个用于显示滑块结果的 TextView。用于演示目的。要实现相同的布局，请调用 activity_main.xml 文件中的以下代码。

输出界面

设置滑块的标签格式

在MainActivity.kt文件中，我们必须使用带有 setLabelFormat{} 的滑块实例覆盖滑块的默认 toolTipText。要实现相同的调用，请在 MainActivity.kt 文件中调用以下代码。

科特林

import android.annotation.SuppressLint
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.Slider
import java.text.NumberFormat
import java.util.*
  
class MainActivity : AppCompatActivity() {
    @SuppressLint("NewApi")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // register all UI elements with their appropriate IDs
        val tvResult: TextView = findViewById(R.id.tvResult)
        val slider1: Slider = findViewById(R.id.slider1)
        val slider2: Slider = findViewById(R.id.slider2)
  
        // create instance of current format of INR
        val formatINR = NumberFormat.getCurrencyInstance()
        formatINR.maximumFractionDigits = 0
        formatINR.currency = Currency.getInstance("INR")
  
        // create instance of current format of USD
        val formatUSD = NumberFormat.getCurrencyInstance()
        formatUSD.maximumFractionDigits = 0
        formatUSD.currency = Currency.getInstance("USD")
  
        // set the custom label for slider1 as INR
        slider1.setLabelFormatter {
            formatINR.format(it.toDouble())
        }
  
        // set the custom label for slider1 as USD
        slider2.setLabelFormatter {
            formatUSD.format(it.toDouble())
        }
  
        // add Change Listener for slider1 to show the result on TextView
        slider1.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = formatINR.format(value.toDouble())
        }
  
        // add Change Listener for slider2 to show the result on TextView
        slider2.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = formatUSD.format(value.toDouble())
        }
    }
}

输出：

改变轨道的高度和颜色：

轨道高度的 XML 属性：

app:trackHeight=”valueInDp”

轨道颜色的 XML 属性：

app:trackColor=”CustomColorValue”

要实现相同的调用在 activity_main.xml 文件中的以下代码

输出界面：

Track 的其他一些属性是：

Element	Attribute
Min value	android:valueFrom
Max value	android:valueTo
Step size (discrete)	android:stepSize
Initial selected value (Slider)	android:value
Initial selected values (RangeSlider)	app:values
Height	app:trackHeight
Color	app:trackColor
Color for track’s active part	app:trackColorActive
Color for track’s inactive part	app:trackColorInactive
Minimum separation for adjacent thumbs	app:minSeparation

更改拇指的颜色和半径颜色：

拇指颜色的 XML 属性：

app:trackHeight=”valueInDp”

拇指半径的 XML 属性：

app:trackColor=”CustomColorValue”

要实现相同的调用在 activity_main.xml 文件中的以下代码

输出界面

Thumb 的其他一些属性是：

Element	Attribute
Color	app:thumbColor
Radius	app:thumbRadius
Elevation	app:thumbElevation
Halo color	app:haloColor
Halo radius	app:haloRadius
Stroke color	app:thumbStrokeColor
Stroke width	app:thumbStrokeWidth

更改刻度线的颜色并使它们可见和不可见：

这些更改仅在离散滑块中可见，因为连续滑块在轨道上不会有刻度线。

刻度线可见性的属性：

app:tickVisible=”booleanValue”

刻度线颜色的属性：

app:tickColor=”@android:color/black”

要实现相同的调用在 activity_main.xml 文件中的以下代码

输出：

Tick 标记的其他一些属性是：

Element	Attribute
Color	app:tickColor
Color for track’s active part	app:tickColorActive
Color for track’s inactive part	app:tickColorInactive
Tick visible	app:tickVisible

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！