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: