自定义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，已经能实现想要的功能，当中可能还有许多问题或不对的地方；
第一次写技术博客，欢迎留言吐槽。

点击下载代码