美文网首页
View的测量和绘制

View的测量和绘制

作者: FourStars | 来源:发表于2018-10-18 19:13 被阅读0次

    我们日常与Activity打交道是最多的,一般每个Activity都会调用setContentView()设置layout。
    每个layout就是一个View或者ViewGroup(包含许多子View),Android中界面的架构图大致如下:

    image.png

    每个Activity包含一个Window对象,而Window中的内容由DecorViewf负责呈现
    我们在屏幕中一般能看到TitleView-->即标题栏,ContentView-->一个ID为content的FrameLayout(我们的布局文件就设置在这里)

    View的测量

    每个View是通过onMeasure()方法进行测量自身大小,测量完毕后,系统就知道要画多大的空间

    测量模式

    Android系统有三种测量模式
    EXACTLY

    调用时机:xml文件中设置width,height为具体数值时,或match-parent时

    AT_MOST

    调用时机:xml布局文件中指定View宽高为wrap-content时

    UNSPECIFIED

    调用时机:在ScrollView或者不限制大小的View中调用

    Tips:MeasureSpec类中的getMode(),getSize()能告知我们测量模式和测量的大小

    MeasureSpec从何而来
    根据guolin大大的文章,MeasureSpec是由父View测量后生成该类,然后传递至子View
    而父View的MeasureSpec是通过RootViewImpl(View和Window沟通的协议类)这个类中的performTraversals()进行获取的(这个方法很长啊...)

        if (baseSize != 0 && desiredWindowWidth > baseSize) {
                    //其他代码
                    childWidthMeasureSpec = getRootMeasureSpec(baseSize, lp.width);
                    childHeightMeasureSpec = getRootMeasureSpec(desiredWindowHeight, lp.height);
                    performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);
                    //其他代码
        }
    

    最终来到了getRootMeasureSpec方法,然后根据宽高(一般都是match_parent)的具体数值再用makeMeasureSpec来配置MeasureSpec
    至此,Spec成功配置,随后作为onMeasure的参数传递下去

    private static int getRootMeasureSpec(int windowSize, int rootDimension) {
            int measureSpec;
            switch (rootDimension) {
    
            case ViewGroup.LayoutParams.MATCH_PARENT:
                // Window can't resize. Force root view to be windowSize.
                measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.EXACTLY);
                break;
            case ViewGroup.LayoutParams.WRAP_CONTENT:
                // Window can resize. Set max size for root view.
                measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.AT_MOST);
                break;
            default:
                // Window wants to be an exact size. Force root view to be that size.
                measureSpec = MeasureSpec.makeMeasureSpec(rootDimension, MeasureSpec.EXACTLY);
                break;
            }
            return measureSpec;
        }
    

    View如何测量

        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
                    getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
        }
    

    View在onMeasure中调用setMeasuredDimension()设置宽高
    而宽高又是通过getDefaultSize()获取的

      public static int getDefaultSize(int size, int measureSpec) {
            int result = size;
            int specMode = MeasureSpec.getMode(measureSpec);
            int specSize = MeasureSpec.getSize(measureSpec);
    
            switch (specMode) {
            case MeasureSpec.UNSPECIFIED:
                result = size;
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.EXACTLY:
                result = specSize;
                break;
            }
            return result;
        }
    

    getDefalutSize中有两个参数,前者是通过getSuggestedMinimumWidth()或Height()获得的推荐大小
    可以看到,它返回的result在AT_MOST和EXACTLY模式下是一致的,都是从MeasureSpec获取的
    这样导致了自定义View未重写该方法就直接使用wrap_content模式,其效果跟match-parent一致

    为什么效果是这样呢?
    上述代码中getDefaultSize的第一个参数size是通过getSuggestedMinimumHeight()获取的

      protected int getSuggestedMinimumHeight() {
            return (mBackground == null) ? mMinHeight : max(mMinHeight, mBackground.getMinimumHeight());
    
        }
    

    这里以高为例,可以看出它是根据有无背景来设置大小的,其中mMinHeight是在xml文件中进行指定的,没有则默认为0

        //未设置背景
        <org.fourstars.firstcode.lesson9.CustomView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        //设置背景为图标
        <!--android:background="@mipmap/ic_launcher"-->
    

    这里我们在CustomView中进行打印宽高

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            Log.d(TAG, "suggest width:" + getSuggestedMinimumWidth() + "\t suggest height:" + getSuggestedMinimumHeight());
            Log.d(TAG, "spec width:" + MeasureSpec.getSize(widthMeasureSpec) + "\t spec height:" + MeasureSpec.getSize(heightMeasureSpec));
    //        setMeasuredDimension(getViewSize(widthMeasureSpec,getSuggestedMinimumWidth()),getViewSize(heightMeasureSpec,getSuggestedMinimumHeight()));
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    
        }
    

    未设置背景


    image.png

    设置背景后


    image.png
    image.png

    可以看到背景的有无是直接影响到getSuggestedMinimumWidth()的返回值的
    而没有重写onMeasure的测量方式的话,不管你有无背景,wrap_content下默认是全屏的

    private int getViewSize(int spec, int suggestSize) {
            int result = 0;
            int specMode = MeasureSpec.getMode(spec);
            int specSize = MeasureSpec.getSize(spec);
    
            switch (specMode) {
                case MeasureSpec.EXACTLY:
                    result = specSize;
                    break;
                case MeasureSpec.AT_MOST:
                    result = Math.max(suggestSize, 200);
                    break;
                case MeasureSpec.UNSPECIFIED:
                    result = suggestSize;
                    break;
                default:
                    break;
            }
            Log.d(TAG, "getViewSize: " + result);
    
            return result;
        }
    

    对此我们重写自己的测量方式,在AT_MOST模式下View的宽高取getSuggestedMinimumWidth()和200(预设的最小值)中取最大值,就不会出现View充满父View的空间的情况了

    Tips:一个界面往往不止一个View,这些View组成了ViewGroup
    ViewGroup测量的时候,会根据View的状态(可见测量,隐藏则不量)让子Vie测出自己的宽高,最后才得出ViewGroup自己的宽高

    View的layout

    查看源码发现,View中的onLayout()是空的

        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        }
    

    由于layout过程是决定了View在视图中的位置的,单个View无需考虑,而是应该由ViewGroup来进行布局,而ViewGroup中的onLayout竟然也是空的,不同的是他是抽象的

    @Override
        protected abstract void onLayout(boolean changed,
                int l, int t, int r, int b);
    
    image.png

    View的onDraw

    对于ViewGroup来说,它是不需要进行Draw的,只要其子View绘制好了,ViewGroup就可以坐享其成
    ViewGroup通过dispatchDraw()来告知子View进行绘制
    然而,View中的onDraw也是空的

    这里我们以TextView中的onDraw为例,来进行绘制

    image.png
        @Override
        protected void onDraw(Canvas canvas) {
            //在父类方法调用前实现逻辑
            super.onDraw(canvas);//这里TextView进行绘制文本等内容 
        }
    

    对于自定义View而言,要想在xml文件中使用该控件,就必须实现两个参数的构造函数

        public SimpleTextView(Context context) {
            super(context);
        }
    
        public SimpleTextView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    

    Cavas中的 save和 restore操作

        @Override
        protected void onDraw(Canvas canvas) {
            int width = getMeasuredWidth();
            int height = getMeasuredHeight();
            //画一个绿色实心矩形背景,mPaint在构造函数中初始化
            canvas.drawRect(0,0,width,height,mPaint);
            //保存坐标轴状态
            canvas.save();
    
            mPaint.setColor(Color.BLUE);
            mPaint.setStrokeWidth(8);
            //画一条起点为(0,20),终点为(width,20)的线
            canvas.drawLine(0,20,width,20,mPaint);
            //坐标轴以(width/2,height/2)为轴心进行顺时针旋转90°
            canvas.rotate(90,width/2,height/2);
            //恢复坐标轴状态,即逆时针旋转回来
            canvas.restore();
            //再次画线
            canvas.drawLine(0,40,height-40,40,mPaint);
    
            super.onDraw(canvas);
        }
    
    image.png

    可以看到两条线是跟我们写的逻辑一样,是平行的
    原因是调用了canvas.restore()恢复了坐标轴的状态

    当我们不调用restore()时,效果如图

    image.png

    可以看出第二条线时旋转90°后进行绘制的,此时是按照下面的坐标轴进行绘制第二条线的


    image.png

    Tips:save和restore是配对使用的,restore不能多于save的次数,不然会报错

    相关文章

      网友评论

          本文标题:View的测量和绘制

          本文链接:https://www.haomeiwen.com/subject/wapdzftx.html