Android 实现FlowLayout流式布局(热门标签)

先上效果图:

Android 实现FlowLayout流式布局(热门标签)

接着看代码实现:

public class FlowLayout extends ViewGroup {

    protected DataSetObserver mDataSetObserver;
    private FlowBaseAdapter mAdapter;
    /**
     * 所有的子view按行存储
     */
    private final List<List<View>> mAllChildViews;
    /**
     * 所有行高
     */
    private final List<Integer> mLineHeights;

    public FlowLayout(Context context) {
        this(context, null);
    }

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

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mAllChildViews = new ArrayList<>();
        mLineHeights = new ArrayList<>();
        mDataSetObserver = new DataSetObserver() {
            @Override
            public void onChanged() {
                resetLayout();
            }
        };
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 获取XML设置的大小和测量模式
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        if (modeWidth == MeasureSpec.AT_MOST) {
            throw new RuntimeException("FlowLayout: layout_width  must not  be set to wrap_content !!!");
        }

        int height = getPaddingTop() + getPaddingBottom();
        // 行宽
        int lineWidth = 0;
        // 行高
        int lineHeight = 0;
        int childCount = getChildCount();

        mAllChildViews.clear();
        mLineHeights.clear();
        List<View> lineViews = new ArrayList<>();

        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);

            MarginLayoutParams lp = (MarginLayoutParams) childView
                    .getLayoutParams();
            int childLineWidth = childView.getMeasuredWidth() + lp.leftMargin
                    + lp.rightMargin;
            int childLineHeight = childView.getMeasuredHeight() + lp.topMargin
                    + lp.bottomMargin;

            // 考虑padding
            if (childLineWidth + lineWidth > (widthSize - getPaddingRight() - getPaddingLeft())) {
                // 换行
                height += lineHeight;
                lineWidth = childLineWidth;

                // 添加子View到集合
                mAllChildViews.add(lineViews);
                mLineHeights.add(lineHeight);

                lineViews = new ArrayList<View>();
                lineViews.add(childView);
            } else {
                // 不换行
                lineHeight = Math.max(childLineHeight, lineHeight);
                lineWidth += childLineWidth;

                lineViews.add(childView);
            }

            //添加最后一行
            if (i == childCount - 1) {
                height += lineHeight;

                mLineHeights.add(lineHeight);
                mAllChildViews.add(lineViews);
            }
        }

        setMeasuredDimension(widthSize,
                modeHeight == MeasureSpec.AT_MOST ? height : heightSize);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 设置子View的位置
        int left = getPaddingLeft();
        int top = getPaddingTop();
        // 行数
        int lineNumber = mAllChildViews.size();

        for (int i = 0; i < lineNumber; i++) {
            List<View> lineViews = mAllChildViews.get(i);
            int lineHeight = mLineHeights.get(i);
            for (int j = 0; j < lineViews.size(); j++) {
                View child = lineViews.get(j);
                if (child.getVisibility() == View.GONE) {
                    continue;
                }
                MarginLayoutParams lp = (MarginLayoutParams) child
                        .getLayoutParams();
                int lc = left + lp.leftMargin;
                int tc = top + lp.topMargin;
                int rc = lc + child.getMeasuredWidth();
                int bc = tc + child.getMeasuredHeight();
                child.layout(lc, tc, rc, bc);

                left += child.getMeasuredWidth() + lp.rightMargin
                        + lp.leftMargin;
            }
            left = getPaddingLeft();
            top += lineHeight;
        }
    }

    /**
     * 重写generateLayoutParams()
     *
     * @param attrs attrs
     * @return MarginLayoutParams
     */
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    public void setAdapter(FlowBaseAdapter adapter) {
        if (mAdapter != null && mDataSetObserver != null) {
            mAdapter.unregisterDataSetObserver(mDataSetObserver);
            mAdapter = null;
        }

        if (adapter == null) {
            throw new NullPointerException("adapter is null");
        }

        this.mAdapter = adapter;

        mAdapter.registerDataSetObserver(mDataSetObserver);

        resetLayout();
    }

    /**
     * 重新Layout子View
     */
    protected final void resetLayout() {
        this.removeAllViews();
        int counts = mAdapter.getCounts();
        mAdapter.addViewToList(this);

        ArrayList<View> views = mAdapter.getViewList();

        for (int i = 0; i < counts; i++) {
            this.addView(views.get(i));
        }
    }
}

查看上述代码得知:在构造函数中初始化一些必要的对象,这个后面再讲。

然后在 onMeasure(int widthMeasureSpec, int heightMeasureSpec) 函数中利用 MeasureSpec 获取Xml中设置的数值模式,进行测量并根据 MeasureSpec 的数值模式决定使用测量数值还是计算数值。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 获取XML设置的大小和测量模式
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        //省略部分代码

        setMeasuredDimension(widthSize,
                modeHeight == MeasureSpec.AT_MOST ? height : heightSize);
    }

测量完成后重写 onLayout(boolean changed, int l, int t, int r, int b) 函数,布局子 View。

 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 设置子View的位置
        int left = getPaddingLeft();
        int top = getPaddingTop();
        // 行数
        int lineNumber = mAllChildViews.size();

        for (int i = 0; i < lineNumber; i++) {
            List<View> lineViews = mAllChildViews.get(i);
            int lineHeight = mLineHeights.get(i);
            for (int j = 0; j < lineViews.size(); j++) {
                View child = lineViews.get(j);
                if (child.getVisibility() == View.GONE) {
                    continue;
                }
                MarginLayoutParams lp = (MarginLayoutParams) child
                        .getLayoutParams();
                int lc = left + lp.leftMargin;
                int tc = top + lp.topMargin;
                int rc = lc + child.getMeasuredWidth();
                int bc = tc + child.getMeasuredHeight();
                child.layout(lc, tc, rc, bc);

                left += child.getMeasuredWidth() + lp.rightMargin
                        + lp.leftMargin;
            }
            left = getPaddingLeft();
            top += lineHeight;
        }
    }
那么 FlowLayout 中子View 的 MarginLayoutParams 是如何获取的呢?

重写 generateLayoutParams(AttributeSet attrs) 函数。

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

 关于 generateLayoutParams(AttributeSet attrs) 有不了解的请看我另一篇博客:generateLayoutParams() 方法的作用

前面说了,在构造函数中初始化一些必要的对象:

protected DataSetObserver mDataSetObserver;
private FlowBaseAdapter mAdapter;

这两个是用来通知 FlowLayout 控件数据更新相关的对象。

FlowLayout Adapter封装:

public abstract class CommonFlowAdapter<T> extends FlowBaseAdapter {
    private List<T> mDatas;
    private int mLayoutId;
    private Context mContext;

    public CommonFlowAdapter(Context context, List<T> datas, int layoutId) {
        this.mContext = context;
        this.mDatas = datas;
        this.mLayoutId = layoutId;
    }

    @Override
    public int getCounts() {
        return mDatas.size();
    }

    @Override
    public View getView(int position, ViewGroup parent) {
        FlowHolder holder = new FlowHolder(mContext, parent, mLayoutId);
        convert(holder, mDatas.get(position), position);
        return holder.getConvertView();
    }

    public abstract void convert(FlowHolder holder, T item, int position);

    public class FlowHolder {
        private SparseArray<View> mViews;
        private View mConvertView;

        public FlowHolder(Context context, ViewGroup parent, int layoutId) {
            this.mViews = new SparseArray<View>();
            mConvertView = LayoutInflater.from(context).inflate(layoutId,
                    parent, false);
        }

        public FlowHolder setText(int viewId, CharSequence text) {
            TextView tv = getView(viewId);
            tv.setText(text);
            return this;
        }
     
        public <T extends View> T getView(int viewId) {
            View view = mViews.get(viewId);
            if (view == null) {
                view = mConvertView.findViewById(viewId);
                mViews.put(viewId, view);
            }
            return (T) view;
        }

        /**
         * 设置点击事件
         *
         * @return
         */
        public FlowHolder setOnClickListener(int viewId,
                                             OnClickListener clickListener) {
            getView(viewId).setOnClickListener(clickListener);
            return this;
        }

        /**
         * 设置条目的点击事件
         *
         * @return
         */
        public FlowHolder setItemClick(OnClickListener clickListener) {
            mConvertView.setOnClickListener(clickListener);
            return this;
        }

        public View getConvertView() {
            return mConvertView;
        }
    }
}

FlowLayout 讲到这里就完结了,如果对你有帮助,那就帮我点个赞吧。

上一篇:swing-具有流布局的调整大小面板不会调用滚动条


下一篇:Poj2018 Best Cow Fences