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

自定义百分比布局

作者: 石器时代小古董 | 来源:发表于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();
        }
    }
}

相关文章

  • CSS真的很麻烦,把CSS语法学会了,提升你的编码能力还是绰绰有

    css3画热咖啡 css自适应布局方案 一、百分比布局宽度百分比,高度px布局 二、rem布局①自定义rem尺寸 ...

  • 前端布局种类

    1、流式布局(百分比布局) 2、flex布局(百分比布局) 3、rem布局(百分比布局)

  • 第一行代码读书笔记 3 -- UI 开发

    本篇文章主要介绍以下几个知识点:百分比布局;引入布局,自定义控件;RecyclerView 的用法;制作 Nine...

  • 响应式布局

    弹性布局 浮动+百分比布局 Flex布局 悬浮+百分比布局 浮动+百分比布局好处 网页内容宽度自适应 多设备都适用...

  • Android常用控件之ProgressBar,圆形进度条

    目录:android.widget.ProgressBar 前言:中间带百分比的圆形进度条xml布局 自定义view:

  • 流式布局

    流式布局(百分比布局) 流式布局就是百分比布局,也称为非固定像素布局 通过将盒子的宽度设置成百分比,从而根据屏幕的...

  • 移动端布局

    1.百分比布局 百分比布局, 也叫流式布局效果: 宽度自适应,高度固定。 2.Flex布局 Flex布局/弹性布局...

  • 响应式页面开发

    布局方式 固定布局 流式布局:流式布局是以百分比作为单位的,我们要牢记如下公式:百分比宽度 = 目标元素宽度 / ...

  • 移动Web开发中的常见布局方式及一些常见问题

    一、流式布局 1.1 什么是流式布局 流式布局就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩...

  • 布局小结

    布局方式 静态布局 浮动布局 定位布局 自适应布局 流式布局(百分比布局) 响应式布局 弹性布局 悬挂布局 圣杯布...

网友评论

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

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