自定义进度条

    在开发中，我们常常需要自定义进度条（如上图所示），尤其是在视频或音乐播放器中，需要显示出总时间和播放的当前时间，而且当前时随着进度移动而移动，本文即为实现上图所示的进度条，如有更好的方法，请指正。

    1.首先在res\drawable文件夹下定新建seekbar_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>            <gradient android:startColor="@color/seekbar_bg_start" android:endColor="@color/seekbar_bg_end" android:angle="270.0" />            <corners android:topLeftRadius="2dip" android:topRightRadius="2dip" android:bottomLeftRadius="2dip" android:bottomRightRadius="2dip" />        </shape>    </item>    <item android:id="@android:id/secondaryProgress">        <clip>            <shape>                <gradient android:startColor="@color/seekbar_secondary_start" android:endColor="@color/seekbar_secondary_end" android:angle="270.0" />                <corners android:topLeftRadius="2dip" android:topRightRadius="2dip" android:bottomLeftRadius="2dip" android:bottomRightRadius="2dip" />            </shape>        </clip>    </item>    <item android:id="@android:id/progress">        <clip>            <shape>                <gradient android:startColor="@color/seekbar_progress_start" android:endColor="@color/seekbar_progress_end" android:angle="0.0" />                <corners android:topLeftRadius="2dip" android:topRightRadius="2dip" android:bottomLeftRadius="2dip" android:bottomRightRadius="2dip" />            </shape>        </clip>    </item></layer-list>

    其中startColor属性为进度条的渐变颜色中开始的颜色（图中为左边），endColor属性则定义结束的颜色（图中为右边），angle属性定义渐变的方向，270即为从左向右渐变。

    2.在src文件夹下自定义我们的进度条View：

import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Typeface;import android.util.AttributeSet;import android.widget.SeekBar;public class MySeekBar extends SeekBar {    public boolean haveSecPro = false;    private Paint paint;    private String curTime;    private int mTimeWidth;    public MySeekBar(Context context) {        super(context);    }    public MySeekBar(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    public MySeekBar(Context context, AttributeSet attrs) {        super(context, attrs);        paint = new Paint();        paint.setColor(Color.WHITE);        paint.setTextSize(40);        paint.setTypeface(Typeface.SANS_SERIF);        mTimeWidth = (int) paint.measureText("00:00:00");    }    public synchronized void setProgress(int progress, String curTime) {            super.setProgress(progress);            this.curTime = curTime;    }@SuppressLint("DefaultLocale")@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);float seekThumbRate = Float.parseFloat(String.format("%.2f", ((float) this.getProgress() / this.getMax()) * mTimeWidth));float seekbarCurrLeft = Float.parseFloat(String.format("%.2f", ((float) this.getProgress() / this.getMax()) * this.getWidth()));if (curTime != null) {float x = (seekbarCurrLeft - seekThumbRate) >= 0 ? (seekbarCurrLeft - seekThumbRate) : seekbarCurrLeft;canvas.drawText(curTime, x, this.getHeight() - 5, paint);}}}

    其中，重写的onDraw()方法是关键，在这里面绘制出随进度移动的时间显示。

    3.如果需要在xml布局文件中使用此自定义进度条：

<com.idealsee.splayer.view.JainkSeekBar      android:id="@+id/player_jaink_seekbar_right"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:layout_centerVertical="true"      android:layout_marginLeft="15dp"      android:layout_toLeftOf="@id/player_duration_right_tv"      android:maxHeight="6dp"      android:minHeight="6dp"      android:paddingBottom="8dp"      android:paddingLeft="8dp"      android:paddingRight="8dp"      android:progressDrawable="@drawable/seekbar_style"      android:scrollbarStyle="insideInset"      android:thumbOffset="4dp"      android:thumb="@drawable/seekbar_thumb" />

    最后要说的是，此进度条的使用方法和原生进度条类似，只是在设置进度的时候，要调用重写的setProgress(int progress, String curTime)方法，其中curTime即为当前要显示的时间，HH:mm:ss格式，调用此方法后，onDraw()方法会自动被调用，重绘出当前的时间。