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

转载本专栏文章,请注明出处尊重原创:博客地址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以及里面的一些小知识》

该小案例完毕。

上一篇:python生成随机数、随机字符串


下一篇:PHP PSR-2 代码风格规范 (中文版)