自定义View的一次简单尝试

自定义View的一次简单尝试

一直想写一写自定义View，又感觉很难，最近有空看了鸿洋大神的自定义View系列，有了一点点启发，照着代码稍加改动做一个下载进度，全当是练习。

大概效果如下：

第一种，圆环进度，根据第三篇Android自定义View (三)，依葫芦画瓢，自定义View：CircleProgressBar；

核心代码，重写onDraw
画图就要计算位置、大小，这里画了一张图，可以参考代码理解

      @Override
    protected void onDraw(Canvas canvas) {

        // 获取圆心的x坐标
        int centre = getWidth() / 2;
        // 半径
        // 多减1，以免超出边界
        int radius = centre - mCircleWidth / 2 - 1;
        // 设置圆环的宽度
        paint.setStrokeWidth(mCircleWidth);
        // 消除锯齿
        paint.setAntiAlias(true);
        // 设置空心
        paint.setStyle(Paint.Style.STROKE);
        // 圆弧的形状和大小的界限
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);
        // 设置圆环的颜色
        paint.setColor(mFirstColor);
        // 画出圆环
        canvas.drawCircle(centre, centre, radius, paint);
        // 设置圆环的颜色
        paint.setColor(mSecondColor);
        // 根据进度画圆弧
        // 起始位置是水平，从顶部开始-90
        canvas.drawArc(oval, -90, mProgress, false, paint);
        // 设置字体颜色
        paint.setColor(mTxtColor);
        // 设置字体大小
        paint.setTextSize(mTxtSize);
        // 文字区域
        paint.getTextBounds(txtPro, 0, txtPro.length(), txtRect);
        // 文字在圆环内居中
        canvas.drawText(txtPro, centre - txtRect.width() / 2, centre + txtRect.height() / 2, paint);
    }

第二种，线性进度条。
视图参考代码：

    @Override
    protected void onDraw(Canvas canvas) {

        int left = getPaddingLeft();
        int right = getPaddingRight();
        int bottom = getPaddingBottom();

        //控件宽度
        int mWidth = getWidth() - left - right;

        paint.setColor(mDoneColor);
        paint.setTextSize(mTxtSize);
        paint.setAntiAlias(true);
        paint.getTextBounds(mTxtPer, 0, mTxtPer.length(), txtRect);

        // 进度条长度
        int lineX = mWidth - txtRect.width();
        // 高度
        int lineY = getHeight() - bottom - txtRect.height() / 2;
        // 进度
        float per = ((float) mProgress) / 100;
        // 已完成长度
        int doneWidth = (int) (per * lineX);

        // 已完成起始位置
        int doneStart = left;
        // 已完成结束位置
        int doneEnd = left + doneWidth;
        // 未完成起始位置
        int undoStart = doneEnd + txtRect.width();
        // 未完成结束位置
        int undoEnd = getWidth() - right;

        // 渲染文字
        canvas.drawText(mTxtPer, doneEnd, getHeight() - bottom, paint);
        // 已完成
        paint.setStrokeWidth((float) mLineHeight);
        canvas.drawLine(doneStart, lineY, doneEnd, lineY, paint);
        // 未完成
        paint.setColor(mUndoColor);
        canvas.drawLine(undoStart, lineY, undoEnd, lineY, paint);

    }

OK，已经能实现想要的功能，当中可能还有许多问题或不对的地方；
第一次写技术博客，欢迎留言吐槽。

点击下载代码