關(guān)于FlowLayout的一點(diǎn)完善

FlowLayout，自適應(yīng)內(nèi)容的Layout，當(dāng)內(nèi)容到達(dá)右端時(shí)會(huì)自動(dòng)換行，先看效果。


1608741472944[1].gif
使用：

1.給FlowLayout動(dòng)態(tài)加入View

 for (int i = 0; i < 9; i++) {
            ViewGroup.MarginLayoutParams marginLayoutParams = new ViewGroup.MarginLayoutParams(190, ViewGroup.LayoutParams.WRAP_CONTENT);
            if (i == 2) {
                marginLayoutParams.height = 200;
            } else {
                marginLayoutParams.height =  ViewGroup.LayoutParams.WRAP_CONTENT;
            }
            Button button = new Button(getContext());
            button.setBackgroundResource(R.drawable.shape_button);
            button.setText("item: " + i);
            mBinding.flowLayout.addView(button, marginLayoutParams);
        }

2.也可以直接在xml文件中寫死

 <com.snowice.xui_lib.widget.flowlayout.FlowLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:horizontalGravity="left">

            <Button
                android:id="@+id/btn_setting_gravity_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="5dp"
                android:text="left" />

        ...
        </com.snowice.xui_lib.widget.flowlayout.FlowLayout>
實(shí)現(xiàn)過(guò)程：

1.自定義屬性，只有兩個(gè)，水平和豎直方向的Gravity

    <declare-styleable name="FlowLayout">
        <attr name="horizontalGravity" format="enum">
            <enum name="left" value="1" />
            <enum name="right" value="2" />
            <enum name="center" value="3" />
            <enum name="both" value="4" /><!--左右兩端對(duì)齊，中間間隔相同 [0 0 0 0]-->
            <enum name="gap" value="5" /><!--間隔相同 [ 0 0 0 0 ]-->
            <enum name="margin" value="6" /><!--view平分空間，[ 0  0  0  0 ]-->
        </attr>

        <attr name="verticalGravity" format="enum">
            <enum name="top" value="1" />
            <enum name="center" value="2" />
            <enum name="bottom" value="3" />
        </attr>
    </declare-styleable>

2.代碼

package com.snowice.xui_lib.widget.flowlayout;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

import com.snowice.xui_lib.R;

import java.util.ArrayList;

public class FlowLayout extends ViewGroup {
    //水平方向的Gravity
    public static final int GRAVITY_H_LEFT = 1;
    public static final int GRAVITY_H_RIGHT = 2;
    public static final int GRAVITY_H_CENTER = 3;
    public static final int GRAVITY_H_BOTH = 4;
    public static final int GRAVITY_H_GAP = 5;
    public static final int GRAVITY_H_MARGIN = 6;
    //豎直方向的Gravity
    public static final int GRAVITY_V_TOP = 1;
    public static final int GRAVITY_V_CENTER = 2;
    public static final int GRAVITY_V_BOTTOM = 3;


    private int mHorGravity;
    private int mVerGravity;

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

    public FlowLayout(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.FlowLayoutStyle);
    }

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

    /**
     * @param context      上下文
     * @param attrs        xml定義的屬性集合，包含（key-value）
     * @param defStyleAttr 系統(tǒng)當(dāng)前Theme下默認(rèn)的屬性集合（包含key-value）
     * @param defStyleRes  備用的style（包含key-value）
     */
    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FlowLayout);
        mHorGravity = typedArray.getInt(R.styleable.FlowLayout_horizontalGravity, GRAVITY_H_LEFT);
        mVerGravity = typedArray.getInt(R.styleable.FlowLayout_verticalGravity, GRAVITY_V_TOP);
        typedArray.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 分別獲得寬高的測(cè)量模式和測(cè)量大小
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        Log.e("onMeasure", "sizeWidth: " + sizeWidth + ", sizeHeight: " + sizeHeight);

        //最終的寬高
        int finalWidth = 0;
        int finalHeight = 0;

        int lineWidth = 0;
        int lineHeight = 0;

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

            measureChild(child, widthMeasureSpec, heightMeasureSpec);

            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int childRealWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
            int childRealHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();

            if (childRealWidth + lineWidth <= sizeWidth - getPaddingLeft() - getPaddingRight()) {
                //不換行
                lineWidth += childRealWidth;
                lineHeight = Math.max(lineHeight, childRealHeight);
            } else {
                //換行時(shí)，會(huì)獲得上一行的寬高
                //寬度取最大值
                finalWidth = Math.max(finalWidth, lineWidth);
                //高度累加
                finalHeight += lineHeight;
                //重置行寬和行高
                lineWidth = childRealWidth;
                lineHeight = childRealHeight;
            }

            //如果只有一行或循環(huán)到了末尾一行，則該行高度得不到統(tǒng)計(jì)，需要另外計(jì)算
            if (i == getChildCount() - 1) {
                finalHeight += lineHeight;
            }
        }
        Log.e("onMeasure", "finalWidth: " + finalWidth + ", finalHeight: " + finalHeight);
        setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY ? sizeWidth : finalWidth + getPaddingLeft() + getPaddingRight()),
                (modeHeight == MeasureSpec.EXACTLY ? sizeHeight : finalHeight + getPaddingTop() + getPaddingBottom())
        );
    }

    //每一行的views，臨時(shí)存儲(chǔ)使用
    private ArrayList<View> lineViewsList;

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.e("onLayout", "width: " + (r - l));
        Log.e("onLayout", "height: " + (b - t));

        int width = r - l - getPaddingLeft() - getPaddingRight();
//        int height = getHeight() - getPaddingTop() - getPaddingBottom();

        int childCount = getChildCount();
        int countLineHeight = getPaddingTop();//對(duì)高度累加
        int lineWidth = 0;
        int lineHeight = 0;
        if (lineViewsList == null) {
            lineViewsList = new ArrayList<>();
        } else {
            lineViewsList.clear();
        }
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);

            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int childRealWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
            int childRealHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();

            if (childRealWidth + lineWidth <= width) {
                // 不換行
                // 將同一行的View添加到容器中
                lineViewsList.add(child);
                // 行寬累加，行高取最大的值
                lineWidth += childRealWidth;
                lineHeight = Math.max(lineHeight, childRealHeight);
            } else {
                // 換行
                // 計(jì)算上一行所有View的位置
                layoutChildren(width, countLineHeight, getPaddingLeft(), lineWidth, lineHeight, lineViewsList);
                lineViewsList.clear();
                lineViewsList.add(child);
                //累加高度
                countLineHeight += lineHeight;
                child.layout(lp.leftMargin,
                        countLineHeight + lp.topMargin,
                        child.getMeasuredWidth() + lp.leftMargin,
                        countLineHeight + lp.topMargin + child.getMeasuredHeight());
                //重置行寬和行高
                lineWidth = childRealWidth;
                lineHeight = childRealHeight;
            }
            //如果只有一行或循環(huán)到了末尾一行，則該行高度得不到統(tǒng)計(jì)，需要另外計(jì)算
            if (i == childCount - 1) {
                layoutChildren(width, countLineHeight, getPaddingLeft(), lineWidth, lineHeight, lineViewsList);
                lineViewsList.clear();
            }
        }
    }

    /**
     * 為一行內(nèi)所有的View執(zhí)行l(wèi)ayout方法
     *
     * @param totalWidth 一行可用的總寬度，已經(jīng)減去了paddingLeft和paddingRight
     * @param top        這一行的最頂部位置
     * @param offset     偏移位置，即據(jù)左端的距離，為paddingLeft
     * @param lineWidth  所有View寬度相加（包含marginLeft和marginRight）
     * @param lineHeight 這一行所有View的高度最大值，該值作為該行的行高
     * @param viewsList  所有View的集合
     */
    private void layoutChildren(int totalWidth, int top, int offset, int lineWidth, int lineHeight, ArrayList<View> viewsList) {
        /*
        gravity的意思大致如下圖所示：
        left:   [0000 ]
        right:  [ 0000]
        center: [ 0000 ]
        both:   [0 0 0 0]
        gap:    [ 0 0 0 0 ]
        margin: [ 0  0  0  0 ]
         */
        //只要確定第一個(gè)View的位置，以及View之間的間隔，就能確定每一個(gè)View的位置
        //start：第一個(gè)View的起始位置
        //gap：View之間的間隔
        int start = 0;
        int gap = 0;
        if (mHorGravity == GRAVITY_H_LEFT) {
            start = 0;
            gap = 0;
        } else if (mHorGravity == GRAVITY_H_RIGHT) {
            start = totalWidth - lineWidth;
            gap = 0;
        } else if (mHorGravity == GRAVITY_H_CENTER) {
            start = (totalWidth - lineWidth) / 2;
            gap = 0;
        } else if (mHorGravity == GRAVITY_H_BOTH) {
            start = 0;
            if (viewsList.size() == 1) {
                //只有一個(gè)View時(shí)，和GRAVITY_LEFT一樣
                gap = 0;
            } else {
                gap = (totalWidth - lineWidth) / (viewsList.size() - 1);
            }
        } else if (mHorGravity == GRAVITY_H_GAP) {
            int i = (totalWidth - lineWidth) / (viewsList.size() + 1);
            start = i;
            gap = i;
        } else if (mHorGravity == GRAVITY_H_MARGIN) {
            int i = (totalWidth - lineWidth) / viewsList.size();
            start = i / 2;
            gap = i;
        }

        start += offset;

        //startX：這一行每一個(gè)View的水平方向的起始位置
        int startX = start;
        for (int i = 0; i < viewsList.size(); i++) {
            View child = viewsList.get(i);
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int realHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
            //豎直方向上不同Gravity對(duì)應(yīng)的起始位置不同
            int layoutTop = 0;
            if (mVerGravity == GRAVITY_V_TOP) {
                layoutTop = top + lp.topMargin;
            } else if (mVerGravity == GRAVITY_V_CENTER) {
                layoutTop = top + lp.topMargin + (lineHeight - realHeight) / 2;
            } else if (mVerGravity == GRAVITY_V_BOTTOM) {
                layoutTop = top + lp.topMargin + (lineHeight - realHeight);
            }
            child.layout(startX + lp.leftMargin,
                    layoutTop,
                    startX + lp.leftMargin + child.getMeasuredWidth(),
                    layoutTop + child.getMeasuredHeight());
            //計(jì)算下一個(gè)View的起始位置
            startX += lp.leftMargin + lp.rightMargin + child.getMeasuredWidth() + gap;
        }
    }

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

    public int getHorGravity() {
        return mHorGravity;
    }

    public void setHorGravity(int horGravity) {
        if (this.mHorGravity != horGravity) {
            this.mHorGravity = horGravity;
            requestLayout();
        }
    }

    public int getVerGravity() {
        return mVerGravity;
    }

    public void setVerGravity(int verGravity) {
        if (this.mVerGravity != verGravity) {
            this.mVerGravity = verGravity;
            requestLayout();
        }
    }
}

其中的注釋比較詳細(xì)，不難理解。
難點(diǎn)1：在于測(cè)量和布局時(shí)，需要循環(huán)遍歷所有子View，累加子View的寬度，再和控件的寬度做比較，當(dāng)控件寬度不足時(shí)，需要換行，換行時(shí)又需要將高度累加。
難點(diǎn)2：布局時(shí)，針對(duì)不同的Gravity，不論是水平方向還是豎直方向，都需要分別計(jì)算其開始位置，不通的布局策略影響布局時(shí)子View的位置。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容