Android控件<第三篇>:SeekBar

2021-08-29  本文已影响0人  NoBugException

SeekBar是ProgressBar的一个延伸,ProgressBar的进度一般由代码控制,SeekBar的进度可以拖拽来控制。

最简单的SeekBar代码如下:

<SeekBar
    android:id="@+id/seekBar"
    android:max="100"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

效果如下:

160.gif
(1)监听

SeekBar可以监听进度条拖拽的状态,代码如下:

 seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
        }
    });

当拖拽开始时,执行onStartTrackingTouch方法,且只会执行一次;
当拖拽结束时,执行onStopTrackingTouch方法,且只会执行一次;
当正在拖拽时,执行onProgressChanged方法,进度每次变化都会执行onProgressChanged方法,参数progress表示当前进度。

(2)设置默认进度
(3)thumb属性的使用

SeekBar有一个非常重要的属性thumb,这个属性用于设置圆形按钮的背景。

准备一张图片,如下;

seekbar_thumb_bg.png

更换圆形按钮背景:

    android:thumb="@mipmap/seekbar_thumb_bg" 

效果如图:

161.gif
(4)progressDrawable属性的使用

progressDrawable可以修改进度条的背景色。

属性用法如下:

    android:progressDrawable="@drawable/seekbar_bg"

效果如下:

162.gif

详细代码如下:

seekbar_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:angle="0"
                android:startColor="#D57DD5"
                android:endColor="#5101DD"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <scale
                android:scaleWidth="100%"
                android:drawable="@drawable/seekbar_shape"/>
        </clip>
    </item>
</layer-list>

seekbar_shape.xml

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

    <corners android:radius="5dip" />
    <gradient
        android:angle="0"
        android:startColor="#02C90B"
        android:endColor="#EC8464" />

</shape>
(5)光学边界

以上效果图中,圆形按钮和进度条重叠的地方看起来有点奇怪,那是因为默认有一个光学边界,光学边界由splitTrack属性控制,只要将这个属性设置为false即可。

    android:splitTrack="false"

效果如下:

图片.png
(6)离散点

SeekBar有一个主题

    style="@style/Widget.AppCompat.SeekBar.Discrete"

设置这个主题可以为SeekBar添加离散点,假如SeekBar没有设置最大进度,那么这些离散点将会紧挨着连在一起,如图:

图片.png

中间的黑线是由若干个点组成,假如将最大长度设置为10,那么黑点就很明显了,如图:

图片.png

[本章完...]

上一篇下一篇

猜你喜欢

热点阅读