android seekbar自动动,Android 自定义SeekBar(滑块跟随进度条移动)
项目中有个播放音频须要进度条而且播放时间跟随进度条移动以下android
下面看一下怎么自定义这个控件，首先咱们继承canvas
AppCompatSeekBar，而后在进度条上画一个带圆角的框，在里面再画进度时间app
直接上代码：ide
/**
* 带进度的seekbar
*/
public class SeekBarAndText extends AppCompatSeekBar {
// 画笔
private Paint mPaint;
// 进度文字位置信息
private Rect mProgressTextRect = new Rect();
// 滑块按钮宽度
private int mThumbWidth = dp2px(60);
// 进度监听
private OnSeekBarAndtextChangeListener onSeekBarAndtextChangeListener;
//对外提供的接口用于返回当前要画的时间
private SongTimeCallBack songTimeCallBack;
public SeekBarAndText(Context context) {
this(context, null);
}
public SeekBarAndText(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.seekBarStyle);
}
public SeekBarAndText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new TextPaint();//初始化画笔
mPaint.setAntiAlias(true);//消除锯齿
mPaint.setColor(Color.parseColor("#99000000"));//画笔颜色
mPaint.setTextSize(sp2px(6));//字体大小
// 若是不设置padding，当滑动到最左边或最右边时，滑块会显示不全
setPadding(mThumbWidth / 2, 0, mThumbWidth / 2, 0);
// 设置滑动监听
this.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
if (onSeekBarAndtextChangeListener != null) {
onSeekBarAndtextChangeListener.onProgressChanged(seekBar,progress,fromUser);
}
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
if (onSeekBarAndtextChangeListener != null) {
onSeekBarAndtextChangeListener.onStartTrackingTouch(seekBar);
}
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
if (onSeekBarAndtextChangeListener != null) {
onSeekBarAndtextChangeListener.onStopTrackingTouch(seekBar);
}
}
});
}
@Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
String progressText="";//要画的文字
if(songTimeCallBack!=null) {
//将要画的时间对外提供
progressText=songTimeCallBack.getDrawText();
}
//画滑块
mPaint.getTextBounds(progressText, 0, progressText.length(), mProgressTextRect);
// 进度百分比
float progressRatio = (float) getProgress() / getMax();
float thumbOffset = (mThumbWidth - mProgressTextRect.width()) / 2 - mThumbWidth * progressRatio;
float thumbX = getWidth() * progressRatio + thumbOffset;
float thumbY = getHeight() / 2f + mProgressTextRect.height() / 2f;
float indicatorOffset = getWidth() * progressRatio - mThumbWidth/ 2 - mThumbWidth * progressRatio;
if(progressRatio>0) {
//画文字
canvas.drawText(progressText, thumbX, thumbY, mPaint);
//mPaint.getTextBounds(progressText, 0, progressText.length(), mProgressTextRect);
//滑块移动
mProgressTextRect.offsetTo((int)thumbX,(int)thumbY);
}else{
canvas.drawText(progressText, (mThumbWidth - mProgressTextRect.width()) / 2 , thumbY, mPaint);
}
}
/**
* 设置进度监听
*
* @param listener OnIndicatorSeekBarChangeListener
*/
public void setOnSeekBarChangeListener(OnSeekBarAndtextChangeListener listener) {
this.onSeekBarAndtextChangeListener = listener;
}
/**
* 进度监听
*/
public interface OnSeekBarAndtextChangeListener {
public void onProgress(SeekBar seekBar, int progress, float indicatorOffset);
/**
* 进度监听回调
*
* @param seekBar SeekBar
* @param progress 进度
* @param fromuser
*/
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromuser);
/**
* 开始拖动
*
* @param seekBar SeekBar
*/
public void onStartTrackingTouch(SeekBar seekBar);
/**
* 中止拖动
*
* @param seekBar SeekBar
*/
public void onStopTrackingTouch(SeekBar seekBar);
}
/**
* dp转px
*
* @param dp dp值
* @return px值
*/
public int dp2px(float dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
getResources().getDisplayMetrics());
}
/**
* sp转px
*
* @param sp sp值
* @return px值
*/
private int sp2px(float sp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp,
getResources().getDisplayMetrics());
}
public interface SongTimeCallBack{
String getSongTime(int progress);
String getDrawText();
}
public void setSongTimeCallBack(SongTimeCallBack songTimeCallBack){
this.songTimeCallBack=songTimeCallBack;
}
}
在布局中使用：布局
android:id="@+id/music_seek_bar"
android:layout_width="fill_parent"
android:max="100"
android:background="@null"
android:thumb="@drawable/seek_bar_thumb"
android:progressDrawable="@drawable/seek_bar_bg"
android:layout_height="wrap_content"
android:maxHeight="2dp"
android:minHeight="2dp"/>
滑块有个背景android:thumb="@drawable/seek_bar_thumb"字体
在drawable下面建立seek_bar_thumb：this
android:shape="rectangle">
android:width="30dp"
android:height="15dp" />
最终就能实现滑块跟随进度条一块儿移动并显示播放时间。code
更多文章请关注公众号：xml