android seekbar刻度值 seekbar的使用android

自定义SeekBar的基础用法1，贴3张效果图，下面分别分析这3种样式的实现代码及布局。

图一：

图二：

图三：

---

图一是系统默认的样式
布局文件：res/layout/activity_main.xml
android:max=[integer] 设置进度条的最大进度值
android:progress=[integer] 设置进度条的当前进度值，即滑块的当前位置

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="当前进度值"
        android:textSize="20sp" />

    <SeekBar
        android:id="@+id/seekbar_default"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="10" />
</LinearLayout>

活动文件：MainActivity.java
SeekBar事件监听：通过设置事件监听器setOnSeekBarChangeListener来获取SeekBar的当前状态，通常要监听以下3个事件
1.public voidonProgressChanged(SeekBar seekBae,int progress,boolean fromUser); seekBar进度变化时回调
2.public voidonStartTrackingTouch(SeekBar seekBar);seekBar开始触摸时回调
3.public voidonStopTrackingTouch(SeekBar seekBar);seekBar停止触摸时回调

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

    private SeekBar seekBarDefault;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        seekBarDefault = (SeekBar) findViewById(R.id.seekbar_default);
        seekBarDefault.setOnSeekBarChangeListener(this);
        textView = (TextView) findViewById(R.id.textview);
    }

    /**
     * seekBar进度变化时回调
     */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        switch (seekBar.getId()) {
            case R.id.seekbar_default:
                //获取到seekbar的当前进度，并将进度数值更新到textview中
                textView.setText("当前进度值：" + String.valueOf(seekBar.getProgress()));
                break;
        }
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    }

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

---

图二是自定义SeekBar，下面是用到的素材

res/drawable/but_normal.png 滑块默认图片

res/drawable/btu_press.png 滑块按下图片

布局文件：res/layout/activity_main.xml

android:maxHeight=”12dp” 自定义进度条样式的最大高度

android:progressDrawable=[drawable] 设置进度条的图样

android:secnotallow=[integer] 设置第二进度条的进度值

android:thumb=[drawable] 设置滑块的图样

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="当前进度值" />

    <SeekBar
        android:id="@+id/seekbar_self"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:maxHeight="12dp"
        android:progress="20"
        android:progressDrawable="@drawable/bg_bar"
        android:secondaryProgress="30"
        android:thumb="@drawable/thumb_bar" />
</LinearLayout>

布局文件：res/drawable/bg_bar.xml 指定进度条图样
这个布局文件中共有3个item，他们的id分别是background、secondaryProgress、progress，他们书写的顺序不能变动。其中background表示滑块按钮右边的进度条背景图样，即进度条默认背景；secondaryProgress表示第二进度条背景；progress表示滑块左边已经滑过的进度条背景图样。其次在secondaryProgress和progress中应该用<clip></clip>包含住所引用的图形资源。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <size android:height="20px" />
            <solid android:color="#b69eee" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <size android:height="20px" />
                <solid android:color="#fe4" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <size android:height="20px" />
                <solid android:color="#16bbf9" />
            </shape>
        </clip>
    </item>

</layer-list>

本例中所用的图形是用shape绘制的，当然也可以用真实的图片素材来代替shape绘图，如下代码使用了backgrou.png作为默认进度条的背景图片。这里再重复一次，在secondaryProgress和progress中应该用<clip></clip>包含住所引用的图形资源。

<item android:id="@android:id/progress">
    <clip android:drawable="@drawable/background" />
</item>

布局文件：res/drawable/thumb.xml 指定滑块图样
设置了滑块在按下、焦点、默认状态下的图样

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--按下状态-->
    <item android:drawable="@drawable/btu_press" android:state_pressed="true" />

    <!--焦点状态-->
    <item android:drawable="@drawable/btu_press" android:state_focused="true" />

    <!--默认状态-->
    <item android:drawable="@drawable/but_normal" />
</selector>

活动文件：MainActivity.java

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

    private SeekBar seekBarSelf;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        seekBarSelf = (SeekBar) findViewById(R.id.seekbar_self);
        seekBarSelf.setOnSeekBarChangeListener(this);
        textView = (TextView) findViewById(R.id.textview);

    }

    /**
     * 进度变化时回调
     */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        switch (seekBar.getId()) {
            case R.id.seekbar_self:
                //获取到seekbar的当前进度，并将进度数值更新到textview
                textView.setText("当前进度值：" + String.valueOf(seekBar.getProgress()));
        }
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    }

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

---

图三也是自定义SeekBar，下面是用到的素材

res/drawable/thumb.png 滑块图样

(←这有个图片)

布局文件：res/layout/activity_main.xml

android:thumbOffset=”0dp” 设置进度条滑块的偏移量

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <SeekBar
        android:id="@+id/sb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar_bg"
        android:thumb="@drawable/thumb"
        android:thumbOffset="0dp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="请按住滑块，拖动到最右边"
        android:textColor="#888888"
        android:textSize="14dp" />
</RelativeLayout>

布局文件：res/seekbar_bg.xml 指定进度条样式
这里只有两个item，id分别是background和progress，与之前的例子比较省略了中间的secondaryProgress，省略后第二进度条的样式会和progress一样。当然background和progress顺序同样不能变动。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <size android:height="30dp" />
            <corners android:radius="2dp" />
            <solid android:color="#E7EAE9" />
            <stroke
                android:width="1dp"
                android:color="#C3C5C4" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <solid android:color="#7AC23C" />
                <stroke
                    android:width="1dp"
                    android:color="#C3C5C4" />
            </shape>
        </clip>
    </item>
</layer-list>

活动文件：MainActivity.java

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

    private TextView tv;
    private SeekBar seekBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv = (TextView) findViewById(R.id.tv);
        seekBar = (SeekBar) findViewById(R.id.sb);
        seekBar.setOnSeekBarChangeListener(this);
    }

    /**
     * seekBar进度变化时回调
     */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        if (seekBar.getProgress() == seekBar.getMax()) {
            tv.setVisibility(View.VISIBLE);
            tv.setTextColor(Color.WHITE);
            tv.setText("完成验证");
        } else {
            tv.setVisibility(View.INVISIBLE);
        }
    }

    /**
     * seekBar开始触摸时回调
     */
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    }

    /**
     * seekBar停止触摸时回调
     */
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        if (seekBar.getProgress() != seekBar.getMax()) {
            seekBar.setProgress(0);
            tv.setVisibility(View.VISIBLE);
            tv.setTextColor(Color.GRAY);
            tv.setText("请按住滑块，拖动到最右边");
        }
    }
}

---

以上的例子只是SeekBar最基础的自定义用法，SeekBar还可以在布局文件中指定style来自定义样式，我会在《Android基础控件——SeekBar_2》中总结。