关于SeekBar的简单介绍

本篇博客主要讲解如何简单使用SeekBar（只是抛砖引玉，有什么错误的地方还请大神指出来），在查看源码的时候你会发现，seekbar其实是ProgressBar的子类，但是ProgressBar是不跟用户交互的，只是提供显示任务进度的作用，而SeekBar则是对ProgressBar的功能进行扩充，使其可以和用户进行交互，即响应用户的点击和拖动事件。

先来看一下本篇博客最终实现的效果图：

其中第一个SeekBar是系统原生的SeekBar，我没有对里面的属性进行任何的修改，而第二个Seek我自定义了它的progressDrawable和thumb。
好了，现在我们看一下如何实现效果图上的SeekBar。
首先在刚开始的时候提到过SeekBar是ProgressBar的子类，但是ProgressBar有两个Progress，分别为Progress和secondProgress，它们之间的默认的层级关系如下：

这个层级在不需要与用户拖动动作进行交互时是OK，一旦我们需要响应用户的拖动动作，又需要显示secondProgress，那么我们就需要更改一下它们之间的层级关系了（我也不清楚这样描述合不合理，有大神清楚的可以帮忙指出）。因为我们用户拖动改变的是progress的进度，也就是在处于第二层，试想一下，如果secondProgress的进度为100%的话，那岂不是我们怎么滑动都看不见progress（因为被遮挡了）。
所以我们需要在设置progressdrawable的时候重新设置一下它们的层级关系。
新的层级关系如下：

好了，我们通过代码更新secondprogress的进度，然后用户手动拖动改变的是progress的进度，不会存在遮挡的问题，像这种样式的进度条一般在视频播放或者音乐播放的场景下比较常见，因为这时需要更新两个任务的进度，一个是播放任务的进度，一个是缓冲任务的进度。（我看了一下网易音乐的UI，它的更牛X，在缓冲的时候thumb还是有环形progress的，这个后期在说吧！！）

下面看一下代码上的实现（主要是依靠xml文件的实现）;
首先准备好以下素材：
SeekBar的背景、progress、secondProgress；这里提供一下供大家参考一下：
背景：
ic_line_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="200dp"android:height="3dp"android:viewportWidth="24.0"android:viewportHeight="24.0"><path
        android:fillColor="#FF000000"android:pathData="M0,13h24v-2L0,11v2z"/>
</vector>

progress:
ic_line_red_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="200dp"android:height="3dp"android:viewportWidth="24.0"android:viewportHeight="24.0"><path
        android:fillColor="#FFFF0000"android:pathData="M0,13h24v-2L0,11v2z"/>
</vector>

secondProgress:
ic_line_green_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="200dp"android:height="3dp"android:viewportWidth="24.0"android:viewportHeight="24.0"><path
        android:fillColor="#FF00FF00"android:pathData="M0,13h24v-2L0,11v2z"/>
</vector>

这里拿到的drawable我们还不能直接使用，需要将其转换成clipDrawable，通过使用clip标签进行转换，文件如下：
main_progress_drawable.xml

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

second_progress_drawable.xml:

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

现在我们可以利用我们准备好的素材设置我们的seekbar了，seekbar的progressDrawable如下：
progress_drawable.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"android:drawable="@drawable/ic_line_black_24dp" /><item
        android:id="@android:id/secondaryProgress"android:drawable="@drawable/second_progress_drawable" /><item
        android:id="@android:id/progress"android:drawable="@drawable/main_progress_drawable" />
</layer-list>

这里我们又用到了layer-list标签，通过标签就可以看到，这玩意可以影响一个view的层级，注意每个item的android：id这个属性的值，这个与seekbar应用的布局中声明的id是对应的。在这个layer-list标签中，我们将progress置于secondProgress的上面，解决了层级间的遮挡问题。

主布局文件：
activity_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent"><SeekBar
        android:layout_alignParentTop="true"android:layout_width="match_parent"android:layout_height="wrap_content" /><SeekBar
        android:layout_alignParentLeft="true"android:layout_centerInParent="true"android:background="@android:color/transparent"android:id="@+id/seekBar"android:layout_width="match_parent"android:layout_height="wrap_content"android:progressDrawable="@drawable/progress_drawable"android:thumb="@drawable/test" /><Button
        android:onClick="startTest"android:layout_alignParentBottom="true"android:text="Start Test"android:textAllCaps="false"android:layout_width="match_parent"android:layout_height="wrap_content" />
</RelativeLayout>

附加一段测试代码：

package com.example.zhuyuqiang.helloworld;import android.os.CountDownTimer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;public class MainActivity extends AppCompatActivity {private SeekBar mSeekBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mSeekBar = (SeekBar)findViewById(R.id.seekBar);}@Overrideprotected void onResume() {super.onResume();}public void startTest(View view){mSeekBar.setProgress(0);mSeekBar.setSecondaryProgress(0);new CountDownTimer(10000,100){@Overridepublic void onTick(long millisUntilFinished) {android.util.Log.e("zyq","time = "+millisUntilFinished);mSeekBar.setSecondaryProgress(100-(int) (millisUntilFinished/100));}@Overridepublic void onFinish() {mSeekBar.setSecondaryProgress(100);new CountDownTimer(10000,100){@Overridepublic void onTick(long millisUntilFinished) {mSeekBar.setProgress(100-(int) (millisUntilFinished/100));}@Overridepublic void onFinish() {mSeekBar.setProgress(100);}}.start();}}.start();}
}

在点击事件中，先更新secondProgress的进度，也就是我们假想中的缓冲进度，然后更新progress的进度。有兴趣的可以自己根据代码重新试一下，在这里就不多说了！！！

有兴趣的朋友可以以关注我，遇到问题大家一起讨论一下！！

关于SeekBar的简单介绍相关推荐

从零开始开发Android相机app（三）简单介绍图像滤镜功能
目前章节 1.从零开始安卓端相机功能开发(一)了解用什么去开发以及流程 2.从零开始安卓端相机功能开发(二)让我们来开发一个相机 3.从零开始开发Android相机app(三)简单介绍图像滤镜功能文 ...
遗传算法的简单介绍以及模式定理的简单证明
遗传算法遗传算法(Genetic Algorithm,GA),最早是由美国的John holland在20世纪70年代提出.算法通过模拟达尔文生物进化论的自然选择以及遗传学机理的生物进化过程来搜 ...
2021年大数据ELK（十八）：Beats 简单介绍和FileBeat工作原理
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Beats 简单介绍和FileBeat工作原理一.Beats 二.FileB ...
2021年大数据ELK（十五）：Elasticsearch SQL简单介绍
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Elasticsearch SQL简单介绍一.SQL与Elasticsear ...
2021年大数据ELK（二）：Elasticsearch简单介绍
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章一.Elasticsearch简介 1.介绍 2.创始人二.E ...
iOS开发UI篇—多控制器和导航控制器简单介绍
iOS开发UI篇-多控制器和导航控制器简单介绍一.多控制器一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理有多个vi ...
简单介绍一下R中的几种统计分布及常用模型
统计学上分布有很多,在R中基本都有描述.因能力有限,我们就挑选几个常用的.比较重要的简单介绍一下每种分布的定义,公式,以及在R中的展示. 统计分布每一种分布有四个函数:d――density(密度函数) ...
LVS(Linux Virtual Server)三种负载均衡模型和十种调度的简单介绍
LVS(Linux Virtual Server)三种负载均衡模型和十种调度的简单介绍 LVS (Linux Virtual Server) LVS(Linux Virtual Server)其实就是 ...
dubbo学习过程、使用经验分享及实现原理简单介绍
一.前言部门去年年中开始各种改造,第一步是模块服务化,这边初选dubbo试用在一些非重要模块上,慢慢引入到一些稍微重要的功能上,半年时间,学习过程及线上使用遇到的些问题在此总结下. 整理这篇文章差不 ...

关于SeekBar的简单介绍

关于SeekBar的简单介绍相关推荐

最新文章

热门文章