美文网首页
自定义百分比布局

自定义百分比布局

作者: 石器时代小古董 | 来源:发表于2019-05-30 00:43 被阅读0次

    一、百分比布局

    百分比布局是以父容器的尺寸为参考,在 View 加载的过程中算出子 View 的宽高,在作用于子View上。百分比布局只要知道这个 View 大概占据整个布局多少就可以。

    二、布局文件的解析

    布局 xml 在通过setContentView交给 Activity 后,Activity 传递给了PhoneWinodw。PhoneWindow又会调用 LayoutInflate 的 inflate 方法解析 xml 。在这里可以看到一个控件的 Params 是由父容器来创建的.父容器通过generateLayoutParams来生成子控件的Params。

    在使用inflate方法时每次都要传递一个root参数,root就代表父容器。子 View 依赖父容器的LayoutParams这点不难理解。因为子 View 是依托于父容器这个环境的,只知道父容器的种类,才好知道自己可以设置什么种类的参数。如何知道父容器的种类就是通过父容器传递一个Params,子View修改这个Params.这样就好像是父容器告诉你,你可以在我的规则内如何玩,不能超出这个规则(不能设置我的Params不具备的属性)

    image.png

    三、手动实现一个百分比布局

    1.实现自定义百分比属性

    2.实现静态的 Params ,继承自被扩展View,这样保证原始的 Params 都可以继续使用

    3.父容器拿到子View设置好的百分比属性后,修改子View的宽高即可

    4.重写generateLayoutParams,生成自己的Params

    package com.netease.screenadapter.percentlayout;
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.util.AttributeSet;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.RelativeLayout;
    
    public class PercentLayout extends RelativeLayout {
    
        public PercentLayout(Context context) {
            super(context);
        }
    
        public PercentLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public PercentLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            //获取父容器的尺寸
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightSize = MeasureSpec.getSize(heightMeasureSpec);
            int count = getChildCount();
            for (int i = 0; i < count; i++) {
                View child = getChildAt(i);
                ViewGroup.LayoutParams params = child.getLayoutParams();
                //如果说是百分比布局属性
                if (checkLayoutParams(params)){
                    LayoutParams lp = (LayoutParams)params;
                     float widthPercent = lp.widthPercent;
                     float heightPercent = lp.heightPercent;
                     float marginLeftPercent = lp.marginLeftPercent;
                     float marginRightPercent= lp.marginRightPercent;
                     float marginTopPercent= lp.marginTopPercent;
                     float marginBottomPercent = lp.marginBottomPercent;
    
                     if (widthPercent > 0){
                         params.width = (int) (widthSize * widthPercent);
                     }
    
                    if (heightPercent > 0){
                        params.height = (int) (heightSize * heightPercent);
                    }
    
                    if (marginLeftPercent > 0){
                        ((LayoutParams) params).leftMargin = (int) (widthSize * marginLeftPercent);
                    }
    
                    if (marginRightPercent > 0){
                        ((LayoutParams) params).rightMargin = (int) (widthSize * marginRightPercent);
                    }
    
                    if (marginTopPercent > 0){
                        ((LayoutParams) params).topMargin = (int) (heightSize * marginTopPercent);
                    }
    
                    if (marginBottomPercent > 0){
                        ((LayoutParams) params).bottomMargin = (int) (heightSize * marginBottomPercent);
                    }
    
                }
            }
    
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    
        @Override
        protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
            return p instanceof LayoutParams;
        }
       // 重写这个方法,让子View拿到自己的LayoutParams
        public LayoutParams generateLayoutParams(AttributeSet attrs){
            return new LayoutParams(getContext(), attrs);
        }
        
        // 定义自己的LayoutParams
        public static class LayoutParams extends RelativeLayout.LayoutParams{
    
            private float widthPercent;
            private float heightPercent;
            private float marginLeftPercent;
            private float marginRightPercent;
            private float marginTopPercent;
            private float marginBottomPercent;
    
            public LayoutParams(Context c, AttributeSet attrs) {
                super(c, attrs);
                //解析自定义属性
                TypedArray a = c.obtainStyledAttributes(attrs,R.styleable.PercentLayout);
                widthPercent = a.getFloat(R.styleable.PercentLayout_widthPercent, 0);
                heightPercent = a.getFloat(R.styleable.PercentLayout_heightPercent, 0);
                marginLeftPercent = a.getFloat(R.styleable.PercentLayout_marginLeftPercent, 0);
                marginRightPercent = a.getFloat(R.styleable.PercentLayout_marginRightPercent, 0);
                marginTopPercent = a.getFloat(R.styleable.PercentLayout_marginTopPercent, 0);
                marginBottomPercent = a.getFloat(R.styleable.PercentLayout_marginBottomPercent, 0);
                a.recycle();
            }
        }
    }
    
    

    相关文章

      网友评论

          本文标题:自定义百分比布局

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