Android自定义View ---- 画一条线

930 阅读3分钟

为了实现下图刻度进度条的效果,我们必须了解自定义View。 并从自定义View中画一条线开始,到 画多条线,组成“刻度进度条”。

圆形刻度进度条.jpg

1.新建一个类继承View,并实现onMeasure,onDraw

package com.leo.support.view.activity;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;


/**
 * 带刻度的进度条
 */
public class ScaleProgressBarView extends View {


    /**
     * 第一个构造方法
     */
    public ScaleProgressBarView(Context context) {
        super(context);
    }


    /**
     * 第二个构造方法
     */
    public ScaleProgressBarView(Context context,  AttributeSet attrs) {
        super(context, attrs);
    }


    /**
     * 第三个构造方法
     */
    public ScaleProgressBarView(Context context,  AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //大小
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("ScaleProgressBarView", "onDraw");
    }

}

三个构造方法

网上有很多关于三个构造函数使用时机的说法,但是说法正确的却没有几家,这里正式的给大家科普一下:

  • 在代码中直接new一个ScaleProgressBarView实例的时候,会调用第一个构造函数.这个没有任何争议.

  • 在xml布局文件中调用ScaleProgressBarView的时候,会调用第二个构造函数.这个也没有争议.

  • 在xml布局文件中调用ScaleProgressBarView,并且ScaleProgressBarView标签中还有自定义属性时,这里调用的还是第二个构造函数. 也就是说,系统默认只会调用ScaleProgressBarView的前两个构造函数,

至于第三个构造函数的调用,通常是我们自己在构造函数中主动调用的(例如,在第二个构造函数中调用第三个构造函数)

详细可以看这个博客:blog.csdn.net/wzy_1988/ar…

2.获取自定义View的宽和高(单位:px)

onMeasure方法是用来设置宽高的,当然也可以用来获取宽高,获取方法如下:

    private int viewWidth, viewHeight;

    //大小
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //宽
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        //高
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        Log.e("ScaleProgressBarView", "measureWidth = " + measureWidth + "    measureHeight = " + measureHeight);
        if (measureWidth != 0 && measureHeight != 0) {
            viewWidth = measureWidth;
            viewHeight = measureHeight;
        }
    }

新手记得打印一下measureWidth,measureHeight。你会发现有时候measureWidth,measureHeight的值为0,所以当我们遇到0的时候不要使用。至于为什么会有0,我们下次再写博客讲解。

3.绘制直线

  1. 现在我们知道了View的宽高,也就知道了坐标系了 如下图 MainActivity.class activity_main.xml
  2. 认知onDraw onDraw方法是绘制的意思,他的参数只有一个Canvas Canvas是画布的意思,你可以调用canvas.drawLine();方法实现绘制一条直线

3.绘制一条直线 image.png 这里需要传五个参数,分别是

  • 开始的x,y值
  • 结束的x,y值
  • 画笔 下面我试一试画一个从左上角到右下角的对角线,也就是(0,0) 到 (300,300)的线
    //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("ScaleProgressBarView", "onDraw");
        Paint paint = new Paint();
        //抗锯齿
        paint.setAntiAlias(true);
        //防抖动
        paint.setDither(true);
        //设置线条宽度(单位px)
        paint.setStrokeWidth(10);
        //设置颜色
        int color = getResources().getColor(R.color.bule);
        paint.setColor(color);
        //绘制直线
        canvas.drawLine(0, 0, viewWidth, viewHeight, paint);
    }

效果图如下 19314653-cf61fc933b2a3a95.jpg

结束 到目前为止已经可以画一条线了,下一期我们讲讲解如何画开头图片所示的圆形刻度进度条。 博客地址:xxxxxxxx