码迷,mamicode.com
首页 > 移动开发 > 详细

从Android绘制View小例子中深入理解自定义View

时间:2016-12-10 11:24:55      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:cap   listview   ted   需要   gray   ott   onlayout   alt   drawrect   

平时开发界面时,Android系统为我们提供了各种各样的View组件,TextView、ImageView、Button、LinearLayout、ScrollView、ListView等等,这些也基本满足了平时的开发要求。有时候开发也会遇到比较刁钻的需求,自定义View多多少少就会用到。

彻底搞懂自定义View并不容易,因为牵扯到尺寸计算、Location(定位)、Canvas、矩阵计算等等,内容还是挺多的。记得刚入门Android时很快搞定了一个自定义View,后面才发现这还远远不够。

1,首先要配置View的尺寸和位置

1)比如实现一个正方形的View,保持高度和宽度一致

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

2)配置View在父View中的位置,使用onLayout

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

2,在绘制内容前,你要准备好画笔

        prPaint = new Paint();
        //防锯齿
        prPaint.setAntiAlias(true);
        //防抖动
        prPaint.setDither(true);
        prPaint.setStrokeCap(Paint.Cap.ROUND);
        prPaint.setStyle(Paint.Style.STROKE);
        prPaint.setStrokeWidth(PR_STROKE_WIDTH);

        dot = new Path();
        //指定顺时针方向(CW)
        dot.addCircle(0, 0, DOTTED_LINE_WIDTH / 2, Path.Direction.CW);

        dotPaint = new Paint();
        dotPaint.setAntiAlias(true);
        dotPaint.setDither(true);
        dotPaint.setStyle(Paint.Style.STROKE);
        dotPaint.setColor(Color.WHITE);

        innerCircle = new Paint();
        innerCircle.setAntiAlias(true);
        innerCircle.setDither(true);
        innerCircle.setStyle(Paint.Style.STROKE);
        innerCircle.setStrokeWidth(INNER_LINE);
        innerCircle.setColor(themeColor);

        effects_line = new DashPathEffect(new float[]{30, 10}, 1);

3,将内容通过画布绘制出来

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        dotDrawRect.set(dotRect);
        final float centerX = dotDrawRect.centerX();
        final float centerY = dotDrawRect.centerY();
        float radius = dotDrawRect.width() / 2;

        initPathEffect();

        dotPaint.setPathEffect(effects1);
        canvas.drawCircle(centerX, centerY, radius, dotPaint);

        radius = radius - DOTTED_LINE_PADDING;
        dotPaint.setPathEffect(effects2);
        canvas.drawCircle(centerX, centerY, radius, dotPaint);

        radius = radius - DOTTED_LINE_PADDING;
        dotPaint.setPathEffect(effects3);
        canvas.drawCircle(centerX, centerY, radius, dotPaint);

        radius = radius - DOTTED_LINE_PADDING;
        dotPaint.setPathEffect(effects4);
        canvas.drawCircle(centerX, centerY, radius, dotPaint);

        radius = radius - DOTTED_LINE_PADDING;
        innerCircle.setPathEffect(null);
        innerCircle.setColor(Color.WHITE);
        canvas.drawCircle(centerX, centerY, radius, innerCircle);

        radius = (float) (radius - DOTTED_LINE_PADDING * 1.5);
        innerCircle.setPathEffect(effects_line);
        innerCircle.setColor(themeColor);
        canvas.drawCircle(centerX, centerY, radius, innerCircle);

        radius = radius - PR_STROKE_WIDTH / 2 - DOTTED_LINE_PADDING / 2;

        if (powInterRadius == 0) {
            powInterRadius = Math.pow(radius, 2);
        }
        //进度条绘制
        dotDrawRect.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        prPaint.setColor(Color.GRAY);
        canvas.drawArc(dotDrawRect, 120, 300, false, prPaint);

        prPaint.setColor(Color.WHITE);
        canvas.drawArc(dotDrawRect, 120, progress * 3, false, prPaint);

    }

4,如果需要和用户交互,还需要处理触摸、点击这些事件(以后再仔细分析)

源码:http://git.oschina.net/hanbingsheshou/SimpleDraw

技术分享


从Android绘制View小例子中深入理解自定义View

标签:cap   listview   ted   需要   gray   ott   onlayout   alt   drawrect   

原文地址:http://blog.csdn.net/zhangbuzhangbu/article/details/53543737

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!