Android UI之自定义SeekBar

一、 自定义SeekBar

第一个Seekbar 背景是颜色，thumb是图片。

二、实现

seek.xml:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:background="@mipmap/bg_main"    tools:context="com.example.guan.seekbar.SeekBarActivity">    <TextView        android:id="@+id/text"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="20dp"        android:layout_marginLeft="30dp"        android:lines="1"        android:textColor="@color/white"        android:textSize="16dp"/>    <SeekBar        android:id="@+id/timeline"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="50dp"        android:focusable="true"        android:maxHeight="4dp"        android:minHeight="4dp"        android:progressDrawable="@drawable/po_seekbar"        android:thumb="@drawable/seekbar_thumb" /></RelativeLayout>

drawable/po_seekbar.xml:

<?xml version="1.0" encoding="utf-8"?><layer-list    xmlns:android="http://schemas.android.com/apk/res/android">    <!-- 将多个图片或上面两种效果按照顺序层叠起来 -->    <!-- 未选中，背景 -->    <item android:id="@+id/background">        <shape>            <solid android:color="#ff51495e" />        </shape>    </item>    <!-- 中间层 -->    <item android:id="@+id/secondaryProgress">        <clip>            <shape>                <solid android:color="#fff95e" />            </shape>        </clip>    </item>    <!-- 选中 -->    <item android:id="@+id/progress">        <clip>            <shape>                <solid android:color="#ff996dfe" />            </shape>        </clip>    </item></layer-list> 

drawable/seekbar_thumb.xml:

<?xml version="1.0" encoding="utf-8"?><selector    xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_focused="true" android:state_pressed="false" android:drawable="@mipmap/seekbar_thumb_normal" />    <item android:state_focused="true" android:state_pressed="true" android:drawable="@mipmap/seekbar_thumb_pressed" />    <item android:state_focused="false" android:state_pressed="true" android:drawable="@mipmap/seekbar_thumb_pressed" />    <item android:drawable="@mipmap/seekbar_thumb_normal" /></selector>

SeekBarActivity.java实现滑动刷新，显示进度：

package com.example.guan.seekbar;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.view.Window;import android.widget.SeekBar;import android.widget.TextView;import com.example.guan.uiwork.R;import butterknife.ButterKnife;import butterknife.InjectView;public class SeekBarActivity extends Activity {    @InjectView(R.id.timeline)    SeekBar timeline;    @InjectView(R.id.text)    TextView text;    //标记是否需要刷新    private boolean flag = true;    private Handler hangler = new Handler();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_seek_bar);        ButterKnife.inject(this);        timeline.setMax(500);        timeline.setOnSeekBarChangeListener(onSeekbar);    }    //第一个sekbar实现进度条    private SeekBar.OnSeekBarChangeListener onSeekbar = new SeekBar.OnSeekBarChangeListener() {        //当游标移动停止的时候调用该方法        @Override        public void onStopTrackingTouch(SeekBar seekBar) {            //设置标记为需要刷新            flag = true;        }        //当游标开始移动时调用该方法        @Override        public void onStartTrackingTouch(SeekBar seekBar) {            //停止刷新            flag = false;        }        //当进度条游标被改变或者进度条改变时调用该方法        @Override        public void onProgressChanged(SeekBar seekBar, int progress,                                      boolean fromUser) {            //更改textView的内容            text.setText(progress + "");        }    };}

三、资源图片

seekbar_thumb_pressed.png:

seekbar_thumb_normal.png:

背景 bg_main.png: