Android简易实战教程--第三十四话《 自定义SeekBar以及里面的一些小知识》

时间：2022-04-21 12:45:26

转载本专栏文章，请注明出处尊重原创：博客地址http://blog.csdn.net/qq_32059827/article/details/52849676：小杨的博客

许多应用可能需要加入进度，例如下载、播放视频、音频、读取数据库等等，都需要一个等待状态的进度条。原生的进度条的确不美观，今天这篇小案例，就让咱们的进度条“靓起来”。

首先来看一个小案例，我们部队seekbae做样式修改，使用默认的效果。

定义一个布局：

<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:orientation="vertical">

    <TextView

        android:id="@+id/seekbar_tetview_one"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="SeekBar自定义" />

    <TextView

        android:id="@+id/seekbar_tetview_two"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="SeekBar拖动时信息提示" />

    <SeekBar

        android:id="@+id/seekBar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:max="100"

        android:maxHeight="20dp"

        android:minHeight="20dp"

        android:paddingLeft="18dp"

        android:paddingRight="18dp"

         />

</LinearLayout>

布局里面两端TextView中一个用于告知拖动进度，一个告知当前拖动状态，在紧接着就是一个seekbar，我们设置它的进度满时为值为100。

看一下主活动中加载代码：

package com.itydl.seekbar;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.widget.SeekBar;

import android.widget.SeekBar.OnSeekBarChangeListener;

import android.widget.TextView;

public class MainActivity extends Activity {

    	private SeekBar seekBar;

    	private TextView textView_one, textView_two;

    	@Override

    	protected void onCreate(Bundle savedInstanceState) {

    		super.onCreate(savedInstanceState);

    		setContentView(R.layout.activity_main);

    		textView_one = (TextView) findViewById(R.id.seekbar_tetview_one);

    		textView_two = (TextView) findViewById(R.id.seekbar_tetview_two);

    		seekBar = (SeekBar) findViewById(R.id.seekBar);

    		seekBar.setOnSeekBarChangeListener(seekbarChangeListener);

    	}

    	private OnSeekBarChangeListener seekbarChangeListener = new OnSeekBarChangeListener() {

    		// 停止拖动时执行

    		@Override

    		public void onStopTrackingTouch(SeekBar seekBar) {

    			textView_two.setText("停止拖动了！");

    		}

    		// 在进度开始改变时执行

    		@Override

    		public void onStartTrackingTouch(SeekBar seekBar) {

    			textView_two.setText("进度开始改变");

    		}

    		// 当进度发生改变时执行,我们使用Handler更新UI。当然，直接在这里更新UI也是可以的。

    		@Override

    		public void onProgressChanged(SeekBar seekBar, int progress,

    				boolean fromUser) {

    			textView_two.setText("正在进行拖动操作，还没有停下来一直再拖动");

    			Message message = new Message();

    			message.what = progress;

    			handler.sendMessage(message);

    		}

    	};

    	/**

    	 * 用Handler来更新UI

    	 */

    	private Handler handler = new Handler() {

    		@Override

    		public void handleMessage(Message msg) {

    			textView_one.setText("当前拖动位置占 :       "

    					+ msg.what + "/100");

    		}

    	};

    }

进度条改变的时候会回调监听事件，在运行之前我们先看看这个监听回调的方法的功能，有必要提及一下这个小知识：

//当拖动条发生变化时调用该方法

public void onProgressChanged(SeekBar seekBar,int progress,Boolean fromUser)

{System.out.println(progress);}

//当用户开始滑动滑块时调用该方法（即按下鼠调用一次）

public void onStartTrackingTouch（SeekBar seekBar）{System.out.println(“start:=>”+seekBar.getProgress());}

//当用户结束对滑块滑动时,调用该方法（即松开鼠标）

public void onStopTrackingTouch (SeekBar seekBar)

{System.out.println(“stop:=>”+seekBar.getProgress());}}

好了，运行程序，如下：

Android简易实战教程--第三十四话《 自定义SeekBar以及里面的一些小知识》

接下来进入本博客的主题。修改seekBar的样式。

首先来一版图片版本的，即指示器、背景、进度条颜色都是用图片代替：

xml中seekbar的属性可以做如下修改：

<SeekBar

            android:thumb="@drawable/video_progress_thumb"//图片

            android:layout_width="0dp"

            android:thumbOffset="0dp"

            android:progressDrawable="@drawable/custom_seekbar"//自定义drawable

            android:layout_height="wrap_content"

            android:layout_marginRight="30dp"

            android:maxHeight="6dp"

            android:minHeight="6dp"

            android:layout_weight="1" />

做了修改，就标注一下都是什么意思，详细的解释如下：

 <!--thumb表示控制按钮，就是拖动的那个小圆圈，成为指示器  -->

 <!-- progressDrawable用于定义进度条的样式，包括背景、进度色、第二进度色等 。本身从系统的@android:style/Widget.SeekBar拷贝过来再做一下修改-->

 <!--  android:thumbOffset="0dp"表示thumb图标的偏移量，设置为0表示图标从头开始 -->

指示器的引用直接是一张图片，进度的引用是通过自定义drawable方式。

@drawable/custom_seekbar的代码如下：

<?xml version="1.0" encoding="utf-8"?>

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

    <!-- seekbar的大背景 -->

    <item android:id="@android:id/background" android:drawable="@drawable/video_seekbar_bg">//引入图片

    </item>

    <!-- 第二进度样式 设置跟下面进度一样-->

    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/video_seekbar_progress">

    </item>

    <!-- 进度的背景 -->

    <item android:id="@android:id/progress" android:drawable="@drawable/video_seekbar_progress">//引入图片

    </item>

</layer-list>

运行程序如下：

Android简易实战教程--第三十四话《 自定义SeekBar以及里面的一些小知识》

这个时候发现跟原生的还是有很大区别的。

紧跟节奏，上边是通过设置进度条背景图片方式来改变了样式，下面使用颜色修改进度条的样式。类似定义颜色选择器。利用颜色资源替代图片资源：

seekbar_define_color_style.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="10dip" />

            <solid android:color="#ff0000" />

        </shape>

    </item>

    <item android:id="@android:id/progress">

        <clip>

            <shape>

                <corners android:radius="10dip" />

                <solid android:color="#00ff00" />

            </shape>

        </clip>

    </item>

</layer-list>

然后把修改xml中这行代码android:progressDrawable="@drawable/seekbar_define_color_style"

最后运行看看结果：

Android简易实战教程--第三十四话《 自定义SeekBar以及里面的一些小知识》

Android简易实战教程--第三十四话《 自定义SeekBar以及里面的一些小知识》

该小案例完毕。

相关文章