使用Kotlin的Android SeekBar
时间：2020-02-23 14:29:15 来源:igfitidea点击:
在本教程中，我们将使用Kotlin在Android应用程序中讨论和实现SeekBar。
什么是Android SeekBar？
SeekBar是一个UI元素，它是ProgressBar的扩展。
SeekBar将可拖动的拇指添加到ProgressBar。
它通常在音乐应用中用于提供音量控制。
SeekBar就像一个具有上限和下限的标尺，每个步骤都是一个单位。
SeekBar XML属性
SeekBar的一些重要XML属性是：
android：minWidth/maxWidth/minHeight/maxHeight：这些属性用于设置搜索列视图的尺寸。
它们不会改变SeekBar的厚度。android：max/min：SeekBar的上限/下限。
android：min可从Android SDK 26及更高版本获得。android：progress：拇指位置的当前值。
android：progressTint：其中我们将进度的颜色传递到拇指位置的左侧。
android：progressBackgroundTint：此颜色显示在拇指右边的SeekBar背景中。
android：thumb：在这里我们可以传递一个自定义的drawable，它将作为搜索列的拇指。
android：thumbTint：拇指的颜色。
android：thumbOffset：拇指与dp中当前进度之间的距离。
负值会将拇指移到进度的右侧。
正数将其向左移动。" style"：用于在SeekBar上设置自定义/预定义的样式。
有一种流行的搜索列样式-"离散"(Discrete)-将进度分为离散间隔。android：tickMark：在这里我们传递一个drawable，它作为SeekBar上的断点。
断点/刻度标记的数量等于android：max。android：tickMarkTint：用于在tickMark可绘制对象上设置颜色。
android：splitTrack：这需要一个布尔值。
默认情况下，Android Lollipop或者更高版本上是这样。
它将Seekbar轨道分为两部分– SeekBar的左侧和右侧。
在白色背景活动中并非总是可见。
在Kotlin中创建SeekBar
我们可以实现SeekBar.OnSeekBarChangeListener接口来以编程方式创建SeekBar。
我们必须实现以下三个Kotlin函数。
fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) fun onStartTrackingTouch(p0: SeekBar?) fun onStopTrackingTouch(p0: SeekBar?)
SeekBar示例
通过设置以上属性，让我们看一下SeekBar的不同类型。
1.简单的SeekBar
<SeekBar
android:id="@+id/seekbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
2.具有进度色颜色的SeekBar
<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
<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
<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"
下面给出了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
其中我们以不同的间隔(最大值)设置"离散"样式。
<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
默认情况下，第一个启用拆分轨道。
第二个没有。
<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项目结构
1.活动XML代码
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>
我们在最后一个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.活动科特林代码
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?) {
}
}
在上面的代码中，我们在Kotlin中创建了SeekBar，并将其添加到LinearLayout中。
我们在每个监听器上都设置了SeekBar更改监听器。
" p1"表示当前进度值，与" seekBar.getProgress()"相同。
我们在TextView中设置此值。
