自定义刻度尺进度条总结

应项目需要我这边要定义一个播放录音的控件，效果如图：

这边先讲一下具体的初版思路吧

1、首先我的思路是复杂的问题简单化，先把这个控件拆分为：上面的刻度和下面的进度条

2、刻度可以根据录音的具体时间来画，下面的进度可以继承SeekBar来实现

3、然后将两个控件的组合在一起放在一个自定义的Relativelayout中，组合成一个控件

先上一下效果动图

下面是上代码时间：

一：首先来画刻度尺的部分

刻度尺的部分是比较简单的这里我自定义了一个控件继承View然后同onDraw来画出这个刻度尺来

如果要画出刻度尺则必须知道自定义控件在屏幕的中位置，下面是获取控件在屏幕中具体位置的方法

下面是获取屏幕宽度的方法

WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;

下面是获取视图绝对坐标和相对坐标的方法

getLocationOnScreen ，计算该视图在全局坐标系中的x，y值，（注意这个值是要从屏幕顶端算起，也就是索包括了通知栏的高度）//获取在当前屏幕内的绝对坐标
getLocationInWindow ，计算该视图在它所在的widnow的坐标x，y值，//获取在整个窗口内的绝对坐标 (不是很理解= =、)
getLeft ,getTop,getBottom,getRight,这一组是获取相对在它父亲里的坐标
如果在Activity的OnCreate()事件输出那些参数，是全为0，要等UI控件都加载完了才能获取到这些。

可在onMeasure中中设置自定义控件的高度

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    int width;
    int height;

    if (heightMode == MeasureSpec.EXACTLY) {
        height = heightSize;
    } else {
        height = Math.min(mMinHeight, heightSize);
    }
    width = widthSize;
    setMeasuredDimension(width, height);
}

控件的宽和高确定好之后接下来就是要画刻度值了，刻度值分为两部分，一部分是水平的横线另一部分是

竖直的竖杠，横线比较简单至于竖线考虑到录音的时间是从一到无穷大的，于是这竖线的部分就需要分一分了

首先是1-6s的时候分别画录取时间加一的竖线，大于6的时候则要将对录音的时间进行三等分或者两等分，把时间分的均匀一点就行了，上面的刻度只是个大概的显示所以尽力做到平均就行了。

线画完之后就要画时间的显示了时间的显示如下

将时间进行等分的处理函数

private int courseTime(int record, int time) {
    if (record % 6 == 0) {//整除6则返回6的整倍数
        return record / 6 * time;
    } else if (record % 3 == 0) {//整除3
        if (time % 2 == 0) {//三等分的位置
            return (record / 3) * (time / 2);
        } else {//其他的位置
            return ((record / 3) * ((time + 1) / 2) - ((record / 3) * ((time - 1) / 2))) / 2 + ((record / 3) * ((time - 1) / 2));
        }
    } else if (record % 2 == 0) {//能整除2的数值
        if (time % 3 == 0) {//进行二等分的位置
            return (record / 2) * (time / 3);
        } else {//其他位置
            if ((record / 2) % 3 == 1) {//二等分之后再三等分进行余数的分配
                if (time < 3) {//前半部分的二等分
                    return (record / 2 / 3 * time);
                } else {//后半部分的二等分
                    return (record / 2 + record / 2 / 3 * (time - 3));
                }
            } else {//同上
                if ((record / 2) % 3 == 2) {
                    if (time < 3) {
                        return (record / 2 / 3 * time + time);
                    } else {
                        return (record / 2 + record / 2 / 3 * (time - 3) + (time - 3));
                    }
                }
            }
        }
    } else {//质数的分配
        if (time == 0) {
            return 0;
        } else if (time == 3) {
            return record / 2;
        } else if (time == 6) {
            return record;
        } else if (time < 3) {
            if ((record / 2) % 3 == 1) {
                return (record / 2 / 3 * time);
            } else if ((record / 2) % 3 == 2) {
                return (record / 2 / 3 * time + time);
            } else {
                return record / 2 / 3 * time;
            }
        } else {
            if ((record / 2 + 1) % 3 == 1) {
                return (record / 2 + record / 2 / 3 * (time - 3));
            } else if ((record / 2) % 3 == 2) {
                return (record / 2 + record / 2 / 3 * (time - 3) + (time - 3));
            } else {
                return record / 2 + (record / 2 + 1) / 3 * (time - 3);
            }
        }
    }
    return 0;
}

直接获取绘制字符串的宽度

textPaint.measureText(str)

将int值的秒级数转换为时分秒格式

private String getCourseTime(Integer seconds) {
    int day = seconds / (60 * 60 * 24);//换成天
    int hour = (seconds - (60 * 60 * 24 * day)) / 3600;//总秒数-换算成天的秒数=剩余的秒数    剩余的秒数换算为小时
    int minute = (seconds - 60 * 60 * 24 * day - 3600 * hour) / 60;//总秒数-换算成天的秒数-换算成小时的秒数=剩余的秒数    剩余的秒数换算为分
    int second = seconds - 60 * 60 * 24 * day - 3600 * hour - 60 * minute;//总秒数-换算成天的秒数-换算成小时的秒数-换算为分的秒数=剩余的秒数
    if (hour != 0) {
        return (hour >= 10 ? hour : "0" + hour) + ":" + (minute >= 10 ? minute : "0" + minute) + ":" + (second >= 10 ? second : "0" + second);
    } else if (minute != 0) {
        return (minute >= 10 ? minute : "0" + minute) + ":" + (second >= 10 ? second : "0" + second);
    } else {
        return "00:" + (second >= 10 ? second : "0" + second);
    }
}

然后直接在几道竖线下画平分的时间就行了，至此刻度尺就制作完毕了。

二：接下来就是下面的进度条部分了，这个部分我是继承了SeekBar的自定义View制作的

我们也分为三步

1、首先是红色的游标

把默认的游标去除

android:duplicateParentState="true"
android:thumb="@null"

要画出完整的图标就必须把进度条的背景放大

//设置控件的padding 给提示指示图标留出位置
setPadding(linePadding, (int) Math.ceil(imageHeight) - 30, linePadding, 25);

2、就是进度条的颜色、进度和上面的刻度尺要保持两端相同，我的思路是：①进度条的长度保持和上面的刻度尺长度相同 ②画一个图片来覆盖进度条默认的进度图片 ③画一个半透明的灰色横线来作为进度

rectSeek = this.getProgressDrawable().getBounds();
float bm_x = rectSeek.width() * getProgress() / getMax() + (linePadding - (int) Math.ceil(imageWidth) / 2);

①

//设置控件的padding 给提示指示图标留出位置
setPadding(linePadding, (int) Math.ceil(imageHeight) - 30, linePadding, 25);

②

图片使用一个xml格式的shape做的可以添加起始、中部和结尾的颜色

canvas.drawBitmap(seekbarThumbBitmap, 0, (int) Math.ceil(imageHeight) - 28, cursorImagePaint);//绘制假的进度条背景色

③

canvas.drawLine(0, (int) Math.ceil(imageHeight) - 28, bm_x + (int) Math.ceil(imageWidth) / 2, (int) Math.ceil(imageHeight) - 28, seekbarThumbPaint);

3、下面一个就是画tag的功能了，这个主要就是画一个红色的矩形

根据打印tag的时间来确定红色矩形的位置就可以了

mBarRect.left = getPaddingLeft();
mBarRect.right = getWidth() - getPaddingRight();
//final boolean isLayoutRtl = getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
float cx;
//float cy = getHeight() / 2 - getPaddingBottom() / 2 - 2;
float barRectwidth = mBarRect.width() - 50;

cx = mBarRect.left + barRectwidth
        * (mMarks.get(i).postion / (float) mDuration);
    //}
    //radius = getResources().getDimension(R.dimen.panit_line_space) / 3;
//canvas.drawCircle(cx, cy, radius, mShapePaint);
    //canvas.drawBitmap(mBitmap, cx, cy, mPaintTag);
canvas.drawRect(cx, (int) Math.ceil(imageHeight) - 28, cx + tagWidth, (int) Math.ceil(imageHeight) - 28 + tagHeight, tagPaint);

至此这个控件就基本结束了，下面就是要合入record的代码中了。