TSeekBar
自定义thumb上带文本显示的拖动条
简介
这是自定义thumb上带文本显示的拖动条,看下面效果图。
项目
github地址:TSeekBar
欢迎克隆参考。
主要代码
定义
自定义控件继承自AppCompatSeekBar
public class TSeekBar extends AppCompatSeekBar {...}
创建构造方法。这里我们设置文本的大小、颜色、和thumb之间的间距为可以设定的属性。分别在构造方法和attrs.xml文件中加入如下代码。
public TSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.TSeekBar, defStyleAttr, 0);
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = array.getIndex(i);
switch (attr) {
case R.styleable.TSeekBar_textSize:
// 文本的字体大小
mTextSize = array.getDimension(attr, 15f);
break;
case R.styleable.TSeekBar_textColor:
// 文本的字体颜色
mTextColor = array.getColor(attr, Color.WHITE);
break;
case R.styleable.TSeekBar_textPadding:
// 文本和thumb之间的padding
mTextPadding = array.getDimension(attr, 5f);
break;
}
}
array.recycle();
init();
}
attrs.xml分别定义大小,颜色,边距属性。
<declare-styleable name="TSeekBar">
<attr name="textSize" format="dimension" />
<attr name="textColor" format="color" />
<attr name="textPadding" format="dimension" />
</declare-styleable>
绘制
1、定义画笔。
2、计算绘制文本的宽高。
3、重写onDraw方法绘制。
4、重写onTouchEvent方法,监听手势,不断重绘。
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);//设置抗锯齿
mPaint.setTextSize(mTextSize);//设置文字大小
mPaint.setColor(mTextColor);//设置文字颜色
}
@Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
calTextWH();// 确定文本的宽高
Rect rectSeek = this.getProgressDrawable().getBounds();
float textX = rectSeek.width() * getProgress() / 100 - mTextWidth / 2 + getPaddingLeft();
float textY = getPaddingTop() - mTextPadding;
canvas.drawText(mText, textX, textY, mPaint);// 画文字
}
@Override
public boolean onTouchEvent(MotionEvent event) {
invalidate();//监听手势滑动,不断重绘文字和背景图的显示位置
return super.onTouchEvent(event);
}
/**
* 计算绘制文本的宽高
*/
private void calTextWH() {
Paint.FontMetrics fm = mPaint.getFontMetrics();
//文本的宽度
long curTime = getProgress() * (mEndTime - mStartTime) / 100 + mStartTime;
mText = mFormat.format(curTime);
mTextWidth = mPaint.measureText(mText);
// 左下角为绘制text的基点,如果将文本绘制在进度条之下,那就需要知道文本高度;反之则不需要。
// float textHeight = fm.bottom - fm.top + fm.leading;
}
使用
布局文件中进行如下定义
<pers.owen.tseekbar.TSeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:maxHeight="5dp"
android:progress="0"
android:indeterminateOnly="false"
android:progressDrawable="@drawable/layer_seekbar_style"
android:splitTrack="false"
android:thumb="@mipmap/icon_red_button"
android:paddingTop="35dp"
android:paddingLeft="17dp"
android:paddingRight="17dp"
app:textColor="#3b3b3b"
app:textSize="10sp"
app:textPadding="4.5dp"/>
好了,这篇文章很简单,属于入门级的自定义view技术。参考本文上面的代码,就能轻松实现。如需参考源码,点击这里。
大家午安。