Android控件与布局——基础控件SeekBar

        最近在用原生的控件和布局绘制一些界面并使用，虽然这些都是Android基本知识，但是有的时候真的感觉力不从心，感觉有必要对Android常用的控件和布局做一个系统的了解。后续一个月甚至更多的时间都会围绕这个主题展开，毕竟这里面还是有不少高级控件的，我也会尽量结合应用深入的进行了解。

上一篇：ProgressBar    下一篇：RatingBar

今天，我们的主题是SeekBar，下面看一下官方文档的部分介绍：它是带有可拖拽图标的ProgressBar，用户可以通过这个图标的滑动来说设置当前的进度；不建议在它的两侧放置可以获取焦点的控件。

* A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch
* the thumb and drag left or right to set the current progress level or use the arrow keys.
* Placing focusable widgets to the left or right of a SeekBar is discouraged.
* <p>
* Clients of the SeekBar can attach a {@link SeekBar.OnSeekBarChangeListener} to
* be notified of the user's actions.

下面就看一下它最原始的样子：

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

这里为了展示效果，我特意把宽度设置成和父布局同宽，在上面的官方API介绍中，我们还忘了翻译一句，就是客户端可以通过对其添加监听事件来获取进度，下面我们就来尝试一下：

 progressSetting.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
               if(progress==0){
                   progressResult.setText("");
               }
               else {
                   progressResult.setText(progress+"%");
               }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

由上图可知，我们通过对其添加监听是可以通过回调实时获取进度数据的，我们可以结合这个功能做一些参数设置的场景需求

在上面的介绍中我们知道，它是继承至ProgressBar的，所以ProgressBar的属性和功能它都是具备的，关于ProgressBar的详细介绍可以参照上一篇博客。说到这里，其实SeekBar我们常用的主要就是通过监听实时获取用户可控的进度值是多少。下面我们就结合上一篇中说到的展示样式简单再延伸一下，在上一篇中，我们用到了：

<?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 android:shape="rectangle">
            <corners android:radius="12dp" />
            <solid android:color="#1E90DD" />
            <stroke android:width="5dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="12dp" />
                <solid android:color="#00CCEA" />
                <stroke android:width="5dp" />
            </shape>
        </clip>
    </item>
</layer-list>

这里我们同样通过属性android:progressDrawable对其进行设置

 android:progressDrawable="@drawable/progress_bar_back"

样式看起来稍微好一点点，当然你还可以设计出更好的效果出来。我们还可以通过其android:thumb属性设置移动图标的样式：

 android:thumb="@drawable/seek_bar_thumb"

说实话，我这里的图标以及背景都没有精心的绘制，所以较丑，在实际的使用过程中我们可以结合需求设计出各种好看的背景以及图标来使用。下面给出逻辑和布局代码（很简单），这个控件就算结束了。

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="aoto.com.commonwidgetandlayout.basic_widget.seekBar.SeekBarActivity">

    <TextView
        android:layout_marginTop="20dp"
        android:text="请调节温度控制阀调节温度："
        android:textColor="#000000"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <SeekBar
        android:progressDrawable="@drawable/progress_bar_back"
        android:thumb="@drawable/seek_bar_thumb"
        android:id="@+id/progress_setting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_marginTop="10dp"
        android:textColor="@color/colorPrimary"
        android:id="@+id/progress"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" />

</LinearLayout>

逻辑代码：

package aoto.com.commonwidgetandlayout.basic_widget.seekBar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

import aoto.com.commonwidgetandlayout.R;

/**
 * @author why
 * @date 2019-5-24 18:21:07
 */
public class SeekBarActivity extends AppCompatActivity {

    TextView progressResult;
    SeekBar progressSetting;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_seek_bar);
        progressSetting=findViewById(R.id.progress_setting);
        progressResult=findViewById(R.id.progress);

        progressSetting.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
               if(progress==0){
                   progressResult.setText("");
               }
               else {
                   progressResult.setText("已调至"+progress+"℃");
               }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

在SeekBar的style属性中，我们可以设置为如下：

 <SeekBar
        android:layout_marginTop="15dp"
        android:id="@+id/seek_bar_discrete"
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:progress="3" />

这是一种离散效果的SeekBar，演示效果如下：

这个之所以单独拿出来说一下是因为，在我们的布局Design界面中有这样一个单独的选项SeekBar(Discrete)，同样的，我们也可以对其进行进度数据回调监听，这里就不在演示了。

关于这个控件，还有一个用得较多的开源项目DiscreteSeekBar，效果图如下：

关于使用方式就不多介绍了，git上介绍的已经很详细了。

注：欢迎扫码关注