Android 流式布局

这里写图片描述

后附源码地址

思路:
1、自定义View;
2、由于这个View是要包含其他控件,所以继承ViewGroup;
3、设置这个自定义View的LayoutParams,重写generateLayoutParams,这里设置的是MarginLayoutParams;
4、重写OnMeasure,计算该容器的大小和子元素的大小
5、重写OnLayout,设置子控件的位置

这里需要注意:该空间的模式
**warp_content: MeasureSpec.AT_MOST 需要根据子布局的大小设置该控件的大小。
fill_parent和mach_parent:MeasureSpec.EXACTLY 直接使用获取大小即可**

int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);

FlowView.java

package com.ucloud.oxpecker.views;

import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class FlowView extends ViewGroup {

    public FlowView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        // warp_content
        int width = 0, height = 0, lineWidth = 0, lineHeight = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            MarginLayoutParams params = (MarginLayoutParams) child
                    .getLayoutParams();
            int childWidth = child.getMeasuredWidth() + params.leftMargin
                    + params.rightMargin;
            int childHeight = child.getMeasuredHeight() + params.topMargin
                    + params.bottomMargin;
            if (childWidth + lineWidth > sizeWidth - getPaddingLeft()
                    - getPaddingRight()) {
                // 对比得到最大宽度
                width = Math.max(lineWidth, width);
                // 重置lineWidth
                lineWidth = childWidth;
                // 记录行高
                height += lineHeight;
                lineHeight = childHeight;
            } else {
                lineWidth += childWidth;
                lineHeight = Math.max(lineHeight, childHeight);
            }
            if (i == getChildCount() - 1) {
                width = Math.max(lineWidth, width);
                height += lineHeight;
            }
        }
        setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth
                : width + getPaddingLeft() + getPaddingRight(),
                modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height
                        + getPaddingTop() + getPaddingBottom());
    }

    private List<List<View>> mAllViews = new ArrayList<List<View>>();
    // 每一行的高度
    private List<Integer> mLineHeight = new ArrayList<Integer>();
    // 每一行距离左边的距离
    private List<Integer> mLineMarginLeft = new ArrayList<Integer>();

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        mAllViews.clear();
        mLineHeight.clear();
        int width = getMeasuredWidth();
        int lineWidth = 0, lineHeight = 0;
        List<View> lineViews = new ArrayList<View>();
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            MarginLayoutParams params = (MarginLayoutParams) child
                    .getLayoutParams();
            int childWidth = child.getMeasuredWidth() + params.leftMargin
                    + params.rightMargin;
            int childHeight = child.getMeasuredHeight() + params.topMargin
                    + params.bottomMargin;
            if (childWidth + lineWidth > width - getPaddingLeft()
                    - getPaddingRight()) {
                // 计算每行距离左边距离
                int lineLeftMargin = (width - lineWidth) / 2;
                mLineMarginLeft.add(lineLeftMargin);
                // 行高
                mLineHeight.add(lineHeight);
                mAllViews.add(lineViews);
                lineWidth = 0;
                lineHeight = childHeight;
                lineViews = new ArrayList<View>();
            }
            lineWidth += childWidth;
            lineHeight = Math.max(lineHeight, childHeight);
            lineViews.add(child);
        }
        /** 处理最后一行 **/
        // 计算每行距离左边距离
        int lineLeftMargin = (width - lineWidth) / 2;
        mLineMarginLeft.add(lineLeftMargin);
        // 行高
        mLineHeight.add(lineHeight);
        mAllViews.add(lineViews);

        /** 设置子View的位置 **/
        int left = getPaddingLeft(), top = getPaddingTop();
        for (int i = 0; i < mAllViews.size(); i++) {
            lineViews = mAllViews.get(i);
            lineHeight = mLineHeight.get(i);
            // 居中显示的左边距
            left += mLineMarginLeft.get(i);
            for (int j = 0; j < lineViews.size(); j++) {
                View child = lineViews.get(j);
                if (child.getVisibility() == View.GONE)
                    continue;
                MarginLayoutParams params = (MarginLayoutParams) child
                        .getLayoutParams();
                int lc = left + params.leftMargin;
                int tc = top + params.topMargin;
                int rc = lc + child.getMeasuredWidth();
                int bc = tc + child.getMeasuredHeight();
                child.layout(lc, tc, rc, bc);
                left += child.getMeasuredWidth() + params.leftMargin
                        + params.rightMargin;
            }
            left = getPaddingLeft();
            top += lineHeight;
        }
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

}

调用方式

FlowView flowViewRecive = (FlowView) findViewById(R.id.flowView_recive);
flowView.removeAllViews();
AttrTextView tv = new AttrTextView(this);
MarginLayoutParams lp = new MarginLayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
tv.setText("测试");
lp.leftMargin = 10;
lp.rightMargin = 10;
lp.topMargin = 5;
lp.bottomMargin = 5;
tv.setBackgroundResource(R.drawable.shape_tv_email);
tv.setTextColor(getResources().getColor(R.color.black));
flowView.addView(tv, lp);

源码下载

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值