SeekBar ( 拖动条 ) 控件

SeekBar ( 拖动条 ) 控件一般用于音乐播放器或者视频播放器的音量控制或者播放进度控制

SeekBar 是 ProgressBar 的子类,所以 ProgressBar的属性都可以用

SeekBar 属性

SeekBar 有以下几个简单的属性

属性 说明
android:max ="100" 滑动条的最大值
android:progress="60" 滑动条的当前值
android:secondaryProgress="70" 二级滑动条的进度
android:thumb = "@mipmap/sb_icon" 滑块的 drawable

SeekBar 事件

SeekBar 内置了 SeekBar.OnSeekBarChangeListener 事件

该事件会触发三个方法

方法 说明
onProgressChanged 进度发生改变时会触发
onStartTrackingTouch 按住 SeekBar 时会触发
onStopTrackingTouch 放开 SeekBar 时触发

范例:基本的 SeekBar

  1. 创建一个 空的 Android 项目 cn.twle.android.SeekBar

  2. 修改 activity_main.xml 文件添加一个 SeekBar

    <?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:padding="8dp" 
        android:orientation="horizontal" >
    
        <SeekBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:max="100" 
            android:progress="60" />
    </LinearLayout>
    

运行结果如下

范例:获取 SeekBar 当前值

要获取 SeekBar 的当前值需要给它添加一个 SeekBar.OnSeekBarChangeListener 事件,然后重写 onProgressChanged() 方法

  1. 复用上面的 demo

  2. 修改 activity_main.xml 文件添加一个 ProgressBar

    <?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:padding="8dp" 
        android:orientation="vertical" >
    
        <SeekBar
            android:id="@+id/volume"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:max="100" 
            android:progress="60" />
    
        <TextView 
            android:id="@+id/volume_hint" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="当前音量: 60/100" />
    </LinearLayout>
    
  3. 修改 MainActivity.javaSeekBar 添加一个 SeekBar.OnSeekBarChangeListener

    package cn.twle.android.seekbar;
    
    import android.content.Context;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    
    import android.widget.SeekBar;
    import android.widget.TextView;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity {
    
        private SeekBar  volume;
        private TextView volume_hint;
        private Context mContext;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mContext = MainActivity.this;
            bindViews();
        }
    
        private void bindViews() {
            volume = (SeekBar) findViewById(R.id.volume);
            volume_hint = (TextView) findViewById(R.id.volume_hint);
            volume.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                    volume_hint.setText("当前音量:" + progress + "  / 100 ");
                }
    
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
                    Toast.makeText(mContext, "触碰 SeekBar", Toast.LENGTH_SHORT).show();
                }
    
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
                    Toast.makeText(mContext, "放开 SeekBar", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
    

定制 SeekBar

SeekBar 很简单,就一个轨道和一个拖动条,SeekBar 提供了两个属性让我们可以定制它

属性 说明
android:progressDrawable 用于设置 SeekBar 轨道的 Drawable
android:thumb 用于设置 SeekBar 拖动条的 Drawable
  1. 复用上面的 demo

  2. 下载 /static/i/android/seekbar_thumb.zip 并解压到 res/drawable 目录

  3. res/drawable 目录下新建一个文件 sb_thumb.xml 创建滑块状态的 Drawable

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed"/>
        <item android:state_pressed="false" android:drawable="@drawable/seekbar_thumb_normal"/>
    </selector>
    
  4. 创建一个 layer-list 的 drawable 资源 sb_bar.xml 用于 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>
                <solid android:color="#FFFFD042" />
            </shape>
        </item>
        <item android:id="@android:id/secondaryProgress">
            <clip>
                <shape>
                    <solid android:color="#FFFFFFFF" />
                </shape>
            </clip>
        </item>
        <item android:id="@android:id/progress">
            <clip>
                <shape>
                    <solid android:color="#FF96E85D" />
                </shape>
            </clip>
        </item>
    </layer-list>
    
  5. 修改 activity_main.xml 引入 SeekBar ,设置 progressDrawable 与 thumb

    <?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:padding="8dp" 
        android:orientation="vertical" >
    
        <SeekBar
                android:id="@+id/volume"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxHeight="5.0dp"
                android:minHeight="5.0dp"
                android:progress="60"
                android:max="100" 
                android:progressDrawable="@drawable/sb_bar"
                android:thumb="@drawable/sb_thumb"/>
    
        <TextView 
            android:id="@+id/volume_hint" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:text="当前音量: 60/100" />
    
    </LinearLayout>
    

参考文档

官方文档: SeekBar

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.