Android中FlowLayout的使用方法,监控布局大小并设置页面高度

博客来源:
工作中需要动态的为页面插入提示语,并根据提示语的不同进行换行操作。提示语数量不同,长度不同,那么就需要页面具有流动性


话不多说,上代码


这是一个工具类,复制进行小修改即可【下方有我调用参考】

修改在于setViewHeight: 设置流式布局高度的时候对于不同的页面进行设置高度

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

import com.txznet.plugin.comm.view.LParams;

import java.util.HashMap;
import java.util.Map;

public class FlowLayout extends ViewGroup {

    public FlowLayout(Context context) {
        super(context);
    }

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

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * 重写ViewGroup的OnMeasure方法,可根据子元素宽度动态测量宽高
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //遍历去调用所有子元素的measure方法(child.getMeasuredHeight()才能获取到值,否则为0)
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        int measuredWidth = 0, measuredHeight = 0;

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widtMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //由于计算子view所占宽度,这里传值需要自身减去PaddingRight宽度,PaddingLeft会在接下来计算子元素位置时加上
        Map<String, Integer> compute = compute(widthSize - getPaddingRight());

        //EXACTLY模式:对应于给定大小或者match_parent情况
        if (widtMode == MeasureSpec.EXACTLY) {
            measuredWidth = widthSize;
            //AT_MOS模式:对应wrap-content(需要手动计算大小,否则相当于match_parent)
        } else if (widtMode == MeasureSpec.AT_MOST) {
            measuredWidth = compute.get("allChildWidth");
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            measuredHeight = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            measuredHeight = compute.get("allChildHeight");
        }
        //设置flow的宽高
        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            Rect rect = (Rect) getChildAt(i).getTag();
            child.layout(rect.left, rect.top, rect.right, rect.bottom);
        }

    }

    /**
     * 测量过程
     *
     * @param flowWidth 该view的宽度
     * @return 返回子元素总所占宽度和高度(用于计算Flowlayout的AT_MOST模式设置宽高)
     */
    private Map<String, Integer> compute(int flowWidth) {
        //是否是单行
        boolean aRow = true;
        MarginLayoutParams marginParams;//子元素margin
        int rowsWidth = getPaddingLeft();//当前行已占宽度(注意需要加上paddingLeft)
        int columnHeight = getPaddingTop();//当前行顶部已占高度(注意需要加上paddingTop)
        int rowsMaxHeight = 0;//当前行所有子元素的最大高度(用于换行累加高度)

        for (int i = 0; i < getChildCount(); i++) {

            View child = getChildAt(i);
            //获取元素测量宽度和高度
            int measuredWidth = child.getMeasuredWidth();
            int measuredHeight = child.getMeasuredHeight();
            //获取元素的margin
            marginParams = (MarginLayoutParams) child.getLayoutParams();
            //子元素所占宽度 = MarginLeft+ child.getMeasuredWidth+MarginRight  注意此时不能child.getWidth,因为界面没有绘制完成,此时wdith为0
            int childWidth = marginParams.leftMargin + marginParams.rightMargin + measuredWidth;
            int childHeight = marginParams.topMargin + marginParams.bottomMargin + measuredHeight;
            //判断是否换行: 该行已占大小+该元素大小>父容器宽度  则换行

            rowsMaxHeight = Math.max(rowsMaxHeight, childHeight);
            //换行
            if (rowsWidth + childWidth > flowWidth) {
                //重置行宽度
                rowsWidth = getPaddingLeft() + getPaddingRight();
                //累加上该行子元素最大高度
                columnHeight += rowsMaxHeight;
                //重置该行最大高度
                rowsMaxHeight = childHeight;
                aRow = false;
            }
            //累加上该行子元素宽度
            rowsWidth += childWidth;
            //判断时占的宽段时加上margin计算,设置顶点位置时不包括margin位置,不然margin会不起作用,这是给View设置tag,在onlayout给子元素设置位置再遍历取出
            child.setTag(new Rect(rowsWidth - childWidth + marginParams.leftMargin, columnHeight + marginParams.topMargin, rowsWidth - marginParams.rightMargin, columnHeight + childHeight - marginParams.bottomMargin));
        }

        //返回子元素总所占宽度和高度(用于计算Flowlayout的AT_MOST模式设置宽高)
        Map<String, Integer> flowMap = new HashMap<>();
        //单行
        if (aRow) {
            flowMap.put("allChildWidth", rowsWidth);
        } else {
            //多行
            flowMap.put("allChildWidth", flowWidth);
        }
        //FlowLayout测量高度 = 当前行顶部已占高度 +当前行内子元素最大高度+FlowLayout的PaddingBottom
        flowMap.put("allChildHeight", columnHeight + rowsMaxHeight + getPaddingBottom());
        setViewHeight(columnHeight + rowsMaxHeight + getPaddingBottom());
        return flowMap;
    }

	//页面布局,用来设置页面高度使用,请更换成你用来适配的页面
    private LParams.Linear lParams;
    //计算出页面高度之后,若想留空白,就对计算出的页面进行留白(也可以传负数)
    private int addHeight;
    //比例,高度在不同分辨率下是否需要改变,这里传入比了后就可以按比率修改高度
    private double scale;

    /**
     * 设置view视图的高度,
     * @param lParams 设置高度的属性
     * @param addHeight 增加的高度
     * @param scale 高度在不同分辨率下的比例
     * 
     * 【注意:】 这里的参数是自己定义的,主要目的是让你把布局传入,然后根据计算出的高度动态的更改你布局的高度
     * 【注意:】 这里的参数是自己定义的,主要目的是让你把布局传入,然后根据计算出的高度动态的更改你布局的高度
     * 【注意:】 这里的参数是自己定义的,主要目的是让你把布局传入,然后根据计算出的高度动态的更改你布局的高度
     * 【注意:】 这里的参数是自己定义的,主要目的是让你把布局传入,然后根据计算出的高度动态的更改你布局的高度
     */
    public void setViewHeight(LParams.Linear lParams,int addHeight,double scale){
        this.lParams = lParams;
        this.addHeight = addHeight;
        this.scale = scale*1000;
    }
    /**
     * 设置布局的高度,调用在计算页面高度之后进行调用的
     */
    private void setViewHeight(int height){
        lParams.height((int) ((height+addHeight)/scale*1000));
    }
}


上面工具类的调用
FlowLayout flowLayout = new FlowLayout(getContext());
flowLayout.setViewHeight(lParams,0,1);//调用FlowLayout中设置页面布局高度方法

 //往容器内添加TextView数据
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(5, 5, 5, 5);
TextView textView = new TextView(getContext());
textView.setPadding(14,8,14,8);
textView.setText(text);
textView.setOnClickListener(v -> {});
textView.setMaxEms(10);//设置中文中最长字节
textView.setSingleLine();//是否是显示单行
textView.setLayoutParams(layoutParams);//设置参数

flowLayout.addView(textView, layoutParams);//将组件加入流式布局
流式布局的使用基本就到这里了,效果图如下

效果图
具体图片涉及公司,故进行打码展示,大致布局能理解就好

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值