自定义ViewGroup学习——实现流式布局(FlowLayout)

本文介绍了一种自适应高度的流式布局实现方法,通过FlowLayout类和适配器模式,使得布局能根据内容自动调整高度,适用于多行排列的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大致效果如下:
在这里插入图片描述
实现的思路:

  1. 每一行item的宽度之和>FlowLayout的宽度时自动换行,在下一行继续排列。
  2. 每一行的高度值取决于当前行高度值最大的那个item。
  3. FlowLayout的高度为所有行高度之和。
  4. 添加一个适配器类,将每一个item和数据的绑定交给适配器。

实现代码:

/**
 * 创建者: mao
 * 功能描述:根据内容自适应高度的流式布局
 */

public class FlowLayout extends ViewGroup{

    private Adapter mAdapter;

    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);
    }

    //设置适配器
    public void setAdapter(Adapter adapter){
        if (adapter==null){
            throw new NullPointerException("adapter is null");
        }
        mAdapter=adapter;
        removeAllViews();
        int childCount=mAdapter.getItemCount();
        for (int i=0;i<childCount;i++){
            View child=mAdapter.getView(i,this);
            addView(child);
        }
    }

    //根据每一行孩子的最大高度相加,计算出自己的高度
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize=MeasureSpec.getSize(widthMeasureSpec);
        int heightSize=0;
        int maxLineHeight=0;
        int currentLineWidth=0;
        int childCount=getChildCount();
        for (int i=0;i<childCount;i++){
            View child=getChildAt(i);
            MarginLayoutParams layoutParams= (MarginLayoutParams) child.getLayoutParams();
            //测量子View
            measureChild(child,widthMeasureSpec,heightMeasureSpec);
            //如果加上当前的item宽大于容器的宽就换行 否则不换行
            if (currentLineWidth+layoutParams.leftMargin+child.getMeasuredWidth()+layoutParams.rightMargin>getMeasuredWidth()){
                //换行
                heightSize+=maxLineHeight;
                currentLineWidth=layoutParams.leftMargin+child.getMeasuredWidth()+layoutParams.rightMargin;
                maxLineHeight=Math.max(child.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin,0);

            }else {
                //不换行
                currentLineWidth+=layoutParams.leftMargin+child.getMeasuredWidth()+layoutParams.rightMargin;
                maxLineHeight=Math.max(child.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin,maxLineHeight);
            }

            if (i==childCount-1){
                //最后一个孩子
                heightSize+=maxLineHeight;
            }
        }
        setMeasuredDimension(widthSize,heightSize);
    }

    //摆放每一个子View的位置
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int left=0;
        int top=0;
        int right;
        int bottom;

        int maxLineHeight=0;
        int currentLineWidth=0;

        int childCount=getChildCount();
        for (int i=0;i<childCount;i++){
            View child=getChildAt(i);
            MarginLayoutParams layoutParams= (MarginLayoutParams) child.getLayoutParams();

            if (currentLineWidth+layoutParams.leftMargin+child.getMeasuredWidth()+layoutParams.rightMargin>getMeasuredWidth()){
                //换行
                left=layoutParams.leftMargin;

                top+=maxLineHeight;
                right=left+child.getMeasuredWidth();
                bottom=top+layoutParams.topMargin+child.getMeasuredHeight();
                child.layout(left,top+layoutParams.topMargin,right,bottom);
                currentLineWidth=layoutParams.leftMargin+child.getMeasuredWidth()+layoutParams.rightMargin;
                left=right+layoutParams.rightMargin;
                maxLineHeight=Math.max(child.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin,0);
            }else {
                //不换行
                currentLineWidth+=layoutParams.leftMargin+child.getMeasuredWidth()+layoutParams.rightMargin;
                maxLineHeight=Math.max(child.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin,maxLineHeight);

                left+=layoutParams.leftMargin;
                right=left+child.getMeasuredWidth();
                bottom=top+layoutParams.topMargin+child.getMeasuredHeight();

                child.layout(left,top+layoutParams.topMargin,right,bottom);

                left=right+layoutParams.rightMargin;
            }
        }
    }

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

    /**
     * 抽象的适配器
     */
    public abstract static class Adapter{

        public abstract int getItemCount();

        public abstract View getView(int position,ViewGroup parent);

    }
}


使用:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flow_layout_demo);

        flowLayout = findViewById(R.id.flowLayout);

        final List<String> data=initData();

        flowLayout.setAdapter(new MyAdapter(this,data));
    }

    private class MyAdapter extends FlowLayout.Adapter{

        private LayoutInflater mInflater;
        private List<String> mData;

        public MyAdapter(Context context,List<String> data){
            mInflater=LayoutInflater.from(context);
            mData=data;
        }

        @Override
        public int getItemCount() {
            return mData.size();
        }

        @Override
        public View getView(final int position, ViewGroup parent) {
            TextView tv= (TextView) mInflater.inflate(R.layout.item_flow_layout,parent,false);
            tv.setText(mData.get(position));
            tv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(FlowLayoutDemoActivity.this,"点击了->"+mData.get(position),Toast.LENGTH_SHORT).show();
                }
            });
            return tv;
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值