使用Kotlin的Android SeekBar

cunchi4221

2088人浏览 · 2020-07-16 20:40:57

cunchi4221 · 2020-07-16 20:40:57 发布

In this tutorial, we’ll discuss and implement SeekBar in our Android Application using Kotlin.

在本教程中，我们将使用Kotlin在Android应用程序中讨论和实现SeekBar。

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

SeekBar is a UI element that is an extension of the ProgressBar.

SeekBar是一个UI元素，它是ProgressBar的扩展。

SeekBar adds a draggable thumb to the ProgressBar. It is commonly used in music apps to provide volume control.

SeekBar将可拖动的拇指添加到ProgressBar。它通常在音乐应用中用于提供音量控制。

SeekBar is like a scale with an upper and lower limit and every step is a single unit.

SeekBar就像一个具有上限和下限的标尺，每个步骤都是一个单位。

SeekBar XML属性 (SeekBar XML Attributes)

Some of the important XML attributes of SeekBar are:

SeekBar的一些重要XML属性是：

android:minWidth/maxWidth/minHeight/maxHeight: these attributes are used to set the dimensions of the seekbar view. They don’t change the thickness of the SeekBar.
android:minWidth/maxWidth/minHeight/maxHeight ：这些属性用于设置搜索栏视图的尺寸。它们不会更改SeekBar的厚度。
android:max/min: The upper/lower limit of the SeekBar. The android:min is available from Android SDK 26 and above.
android:max/min ：SeekBar的上限/下限。 android：min可从Android SDK 26及更高版本中获得。
android:progress: The current value of the thumb position.
android:progress ：拇指位置的当前值。
android:progressTint: Here we pass the color for the progress to the left of the thumb position.
android:progressTint ：在这里，我们将android:progressTint的颜色传递到拇指位置的左侧。
android:progressBackgroundTint: This color is displayed for the SeekBar background, to the right of the thumb.
android:progressBackgroundTint ：此颜色显示在拇指右边的SeekBar背景中。
android:thumb: Here we can pass a custom drawable that will act as the thumb of the seek bar.
android:thumb ：这里我们可以传递一个自定义的drawable，它将用作搜索栏的拇指。
android:thumbTint: color of the thumb.
android:thumbTint ：拇指的颜色。
android:thumbOffset: The distance between the thumb and the current progress in dp. A negative value shifts the thumb to the right of the progress. A positive one shifts it to the left.
android:thumbOffset ：拇指与dp当前进度之间的距离。负值会将拇指移到进度的右侧。正数将其向左移动。
style: it’s used to set custom/predefined styles on the SeekBar. There is a popular seekbar style – “Discrete” – which breaks the progress into discrete intervals.
style ：用于在SeekBar上设置自定义/预定义的样式。有一种流行的搜索栏样式-“离散”-将进度分为离散间隔。
android:tickMark: Here we pass a drawable, which acts as breakpoints on the SeekBar. The number of breakpoints/tickMarks is equal to android:max.
android:tickMark ：这里我们传递了一个drawable，它用作SeekBar上的断点。断点/刻度标记的数量等于android：max。
android:tickMarkTint: used to set a color on the tickMark drawable.
android:tickMarkTint ：用于在tickMark可绘制对象上设置颜色。
android:splitTrack: This expects a boolean value. By default on Android Lollipop and above this is true. It splits the Seekbar track into two parts – left and right of the SeekBar. This isn’t always visible in white background activities.
android:splitTrack ：这需要一个布尔值。默认情况下，Android Lollipop或更高版本上是这样。它将Seekbar轨道分为两部分– SeekBar的左侧和右侧。在白色背景活动中并不总是可见。

在Kotlin中创建SeekBar (Creating SeekBar in Kotlin)

We can implement the SeekBar.OnSeekBarChangeListener interface to create SeekBar programatically. We have to implement the following three Kotlin functions.

我们可以实现SeekBar.OnSeekBarChangeListener接口，以编程方式创建SeekBar。我们必须实现以下三个Kotlin函数。

fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) 

fun onStartTrackingTouch(p0: SeekBar?)

fun onStopTrackingTouch(p0: SeekBar?)

SeekBar示例 (SeekBar Examples)

Let’s look at the different types of SeekBar by setting the above properties.

通过设置以上属性，让我们看一下SeekBar的不同类型。

1.简单的SeekBar (1. Simple SeekBar)

<SeekBar
        android:id="@+id/seekbar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp" />

2.具有进度色颜色的SeekBar (2. SeekBar with Progress Tint Color)

<SeekBar
        android:id="@+id/seekbar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:max="50"
        android:minWidth="100dp"
        android:padding="8dp"
        android:progress="10"
        android:progressBackgroundTint="@android:color/black"
        android:progressTint="@color/colorPrimaryDark" />

3.带有拇指色调颜色和偏移的SeekBar (3. SeekBar with Thumb Tint Color And Offset)

<SeekBar
        android:id="@+id/seekbar3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="50"
        android:padding="8dp"
        android:progress="10"
        android:progressBackgroundTint="@android:color/holo_green_light"
        android:progressTint="@android:color/black"
        android:thumbOffset="-20dp"
        android:thumbTint="@color/colorPrimary" />

4.带有TickMarks的SeekBar (4. SeekBar with TickMarks)

<SeekBar
        android:id="@+id/seekbar4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="4"
        android:padding="8dp"
        android:progress="1"
        android:progressTint="@android:color/holo_green_light"
        android:thumbTint="@color/colorPrimary"
        android:tickMark="@drawable/tickmark"
        android:tickMarkTint="@color/colorAccent" />

The tickmark.xml drawable is given below.

下方给出了tickmark.xml可绘制对象。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-6dp"
        android:left="-3dp"
        android:top="-6dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <stroke
                android:width="2dp"
                android:color="#1fc78c" />
        </shape>
    </item>
</layer-list>

5.具有自定义样式的SeekBar (5. SeekBar with Custom Style)

Here we set Discrete style with different intervals (max value).

在这里，我们以不同的间隔（最大值）设置Discrete风格。

<SeekBar
        android:id="@+id/seekbar5"
        style="@android:style/Widget.Material.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp" />


    <SeekBar
        android:id="@+id/seekbar6"
        style="@android:style/Widget.Material.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:padding="8dp" />

6.带有分割轨道的SeekBar (6. SeekBar with Split Track)

The first one has a Split track enabled by default. The second one does not.

默认情况下，第一个启用拆分轨道。第二个没有。

<SeekBar
        android:id="@+id/seekbar7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="50"
        android:padding="8dp"
        android:progress="10"
        android:thumbTint="@color/colorPrimary"
        android:tickMark="@android:drawable/checkbox_on_background"
        android:tickMarkTint="@android:color/black" />

    <SeekBar
        android:id="@+id/seekbar8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="50"
        android:padding="8dp"
        android:progress="10"
        android:splitTrack="false"
        android:thumbTint="@color/colorPrimary"
        android:tickMark="@android:drawable/checkbox_on_background"
        android:tickMarkTint="@android:color/black" />

Android SeekBar Kotlin项目结构 (Android SeekBar Kotlin Project Structure)

1.活动XML代码 (1. Activity XML Code)

The code for the activity_main.xml layout is as follows.

activity_main.xml布局的代码如下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:id="@+id/linearLayout"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="32sp" />

    <SeekBar
        android:id="@+id/seekbar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp" />


    <SeekBar
        android:id="@+id/seekbar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:max="50"
        android:minWidth="100dp"
        android:padding="8dp"
        android:progress="10"
        android:progressBackgroundTint="@android:color/black"
        android:progressTint="@color/colorPrimaryDark" />

    <SeekBar
        android:id="@+id/seekbar3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="50"
        android:padding="8dp"
        android:progress="10"
        android:progressBackgroundTint="@android:color/holo_green_light"
        android:progressTint="@android:color/black"
        android:thumbOffset="-20dp"
        android:thumbTint="@color/colorPrimary" />


    <SeekBar
        android:id="@+id/seekbar4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="4"
        android:padding="8dp"
        android:progress="1"
        android:progressTint="@android:color/holo_green_light"
        android:thumbTint="@color/colorPrimary"
        android:tickMark="@drawable/tickmark"
        android:tickMarkTint="@color/colorAccent" />


    <SeekBar
        android:id="@+id/seekbar5"
        style="@android:style/Widget.Material.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp" />


    <SeekBar
        android:id="@+id/seekbar6"
        style="@android:style/Widget.Material.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:padding="8dp" />


    <SeekBar
        android:id="@+id/seekbar7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="50"
        android:padding="8dp"
        android:progress="10"
        android:thumbTint="@color/colorPrimary"
        android:tickMark="@android:drawable/checkbox_on_background"
        android:tickMarkTint="@android:color/black" />

    <SeekBar
        android:id="@+id/seekbar8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="50"
        android:padding="8dp"
        android:progress="10"
        android:splitTrack="false"
        android:thumbTint="@color/colorPrimary"
        android:tickMark="@android:drawable/checkbox_on_background"
        android:tickMarkTint="@android:color/black" />


    <SeekBar
        android:id="@+id/seekbar9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:splitTrack="false"
        android:thumb="@mipmap/ic_launcher" />

</LinearLayout>

We’ve created a custom thumb in the last SeekBar.

我们在最后一个SeekBar中创建了一个自定义缩略图。

custom_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <size
                android:width="10dp"
                android:height="10dp" />

            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item android:drawable="@mipmap/ic_launcher" />

</layer-list>

2.活动Kotlin代码 (2. Activity Kotlin Code)

The Kotlin code for the MainActivity.kt class is as follows.

MainActivity.kt类的Kotlin代码如下。

package net.androidly.androidlyseekbar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.SeekBar
import kotlinx.android.synthetic.main.activity_main.*
import android.graphics.PorterDuff
import android.support.v4.content.ContextCompat


class MainActivity : AppCompatActivity(), SeekBar.OnSeekBarChangeListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        val seekbar = SeekBar(this)
        val layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        layoutParams.setMargins(30, 30, 30, 30)
        seekbar.layoutParams = layoutParams

        seekbar.progressDrawable.setColorFilter(ContextCompat.getColor(this, R.color.switch_thumb_normal_material_dark), PorterDuff.Mode.SRC_ATOP)
        seekbar.setBackgroundColor(ContextCompat.getColor(this,android.R.color.darker_gray))


        seekbar.setOnSeekBarChangeListener(this)
        linearLayout.addView(seekbar)

        seekbar1.setOnSeekBarChangeListener(this)
        seekbar2.setOnSeekBarChangeListener(this)
        seekbar3.setOnSeekBarChangeListener(this)
        seekbar4.setOnSeekBarChangeListener(this)
        seekbar5.setOnSeekBarChangeListener(this)
        seekbar6.setOnSeekBarChangeListener(this)
        seekbar7.setOnSeekBarChangeListener(this)
        seekbar8.setOnSeekBarChangeListener(this)
        seekbar9.setOnSeekBarChangeListener(this)
    }


    override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
        textView.text = "$p1"
    }

    override fun onStartTrackingTouch(p0: SeekBar?) {
    }

    override fun onStopTrackingTouch(p0: SeekBar?) {
    }

}

In the above code, we’ve created a SeekBar in Kotlin and added it to the LinearLayout.

在上面的代码中，我们在Kotlin中创建了SeekBar并将其添加到LinearLayout中。

We’ve set the SeekBar change listener on each of them. The p1 represents the current progress value which is the same as seekBar.getProgress(). We are setting this value in the TextView.

我们对它们每个都设置了SeekBar更改侦听器。 p1表示当前进度值，该值与seekBar.getProgress()相同。我们在TextView中设置此值。

Output:

输出：

AndroidlySeekbar AndroidlySeekbar