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

大致效果如下:
自定义ViewGroup学习——实现流式布局(FlowLayout)_第1张图片
实现的思路:

  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;igetMeasuredWidth()){
                //换行
                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;igetMeasuredWidth()){
                //换行
                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 data=initData();

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

    private class MyAdapter extends FlowLayout.Adapter{

        private LayoutInflater mInflater;
        private List mData;

        public MyAdapter(Context context,List 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;
        }
    }

你可能感兴趣的:(自定义ViewGroup学习——实现流式布局(FlowLayout))