自定义View View的绘制流程和自定义View的简单总结

程序员文章站 2022-05-30 20:26:04

...

View的绘制流程

总的三步：onMeasure,onLayout,onDraw

onMeasure(int widthMeasureSpec, int heightMeasureSpec)

MeasureSpec的值由specSize和specMode共同组成的，其中specSize记录的是大小，specMode记录的是规格。specMode一共有三种类型，如下所示：

1. EXACTLY

表示父视图希望子视图的大小应该是由specSize的值来决定的，系统默认会按照这个规则来设置子视图的大小，开发人员当然也可以按照自己的意愿设置成任意的大小。

2. AT_MOST

表示子视图最多只能是specSize中指定的大小，开发人员应该尽可能小得去设置这个视图，并且保证不会超过specSize。系统默认会按照这个规则来设置子视图的大小，开发人员当然也可以按照自己的意愿设置成任意的大小。

3. UNSPECIFIED

表示开发人员可以将视图按照自己的意愿设置成任意的大小，没有任何限制。这种情况比较少见，不太会用到。

由此可见，视图大小的控制是由父视图、布局文件、以及视图本身共同完成的，父视图会提供给子视图参考的大小，而开发人员可以在XML文件中指定视图的大小，然后视图本身会对最终的大小进行拍板。

onLayout(boolean changed, int l, int t, int r, int b);

方法是用于给视图进行布局的，也就是确定视图的位置

onDraw()

会调用draw(Canvas canvas)

ViewRoot中的代码会继续执行并创建出一个Canvas对象，然后调用View的draw()方法来执行具体的绘制工作。

第一步对背景进行绘制

第二步不知道...郭霖说很少用就没写了

第三步再次调用onDraw，交给子视图自己画，View中为空方法

第四步，对子视图进行绘制

第五步不知道...

第六步，绘制滚动条，有些控件只是隐藏了而已

所以，View是不会帮我们绘制东西的，都是交给子控件去Draw

View类实现了Callback接口，invalidate()方法强制进行视图重绘的时候

不会重新onMeasure和onLayout，只会重新onDraw，

当需要视图重新完整走一遍流程，应该使用requestLayout（）方法

自定义View

1.自定义控件所需要的属性

在attr中自定义属性时，declare-styleable关键字会生成索引，以便于在类中获取

2.在view中的构造函数得到这些属性

Attributeset是控件属性的集合set，以键值对的形式储存，

通过TypedArray的到属性的集合

构造函数需要写三个，为了实用性更加广泛，防止出错

3.重写onMeasure（部份需要）

因为Mode的不同，需要重写，否则wrapcontent会出问题

4.重写onDraw

最重要的一步，在其中按照自己的想法绘制出图案

自定义View的例子

1.自定义属性，在res/attr.xml中自定义

 <attr name="titleText" format="string" />
    <attr name="titleTextColor" format="color" />
    <attr name="titleTextSize" format="dimension" />
    <declare-styleable name="MyCustomTitleView01">
        <attr name="titleText" />
        <attr name="titleTextColor" />
        <attr name="titleTextSize" />
    </declare-styleable>

2.写自定义View的类，得到属性，并重写onMeasure和onDraw

public class MyCustomView01 extends View {
    private Paint mPaint;
    private String mTextString;
    private int mTextColor, mTextSize;
    private Rect mTextBound;


    public MyCustomView01(Context context) {
        this(context, null);
    }

    public MyCustomView01(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyCustomView01(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //获取自定义属性的数组
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTitleView, defStyleAttr, 0);
        //得到自定义属性的对象
        mTextString = a.getString(R.styleable.MyCustomTitleView01_titleText);
        //设置默认字体为黑
        mTextColor = a.getColor(R.styleable.MyCustomTitleView01_titleTextColor, Color.BLACK);
        //设置默认字体大小为16sp
        mTextSize = a.getDimensionPixelSize(R.styleable.MyCustomTitleView01_titleTextSize, (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
        //回收，否则会出错
        a.recycle();

        //初始化实例变量
        mPaint = new Paint();
        mTextBound = new Rect();
        mPaint.setTextSize(mTextSize);
        // 计算了描绘字体需要的范围
        mPaint.getTextBounds(mTextString, 0, mTextString.length(), mTextBound);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;
        /*
        view的宽
         */
        if (widthMode == MeasureSpec.EXACTLY) {
            //具体数值 直接设置
            width = widthSize;
        } else {
            //否则需要计算View的宽高
            mPaint.setTextSize(mTextSize);
            mPaint.getTextBounds(mTextString, 0, mTextString.length(), mTextBound);
            float textWidth = mTextBound.width();
            int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());
            width = desired;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            mPaint.setTextSize(mTextSize);
            mPaint.getTextBounds(mTextString, 0, mTextString.length(), mTextBound);
            float textHeight = mTextBound.height();
            int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
            height = desired;
        }
        //设置
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
         /**
         * 边框
         */
        mPaint.setStrokeWidth(4);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.CYAN);
        //根据onMeasure中宽高绘制边框
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

        mPaint.setColor(mTextColor);
        //y的其实位置为TextView的基线，所以为"+"
        canvas.drawText(mTextString, getWidth() / 2 - mTextBound.width() * 1.0f / 2, getHeight() / 2 + mTextBound.height() / 2, mPaint);
    }
}

3.在布局文件中使用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".View.HongyangView01">
    <com.example.zhang.androidtestdemo01.View.util.MyCustomView01
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:titleText="1111"
        android:padding="10dp"
        android:layout_centerInParent="true"
        custom:titleTextColor="#ff0000"
        custom:titleTextSize="40sp"/>
</RelativeLayout>

效果图

自定义View View的绘制流程和自定义View的简单总结