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技术。参考本文上面的代码，就能轻松实现。如需参考源码，点击这里。
大家午安。