Android中常見的自定義FlowLayout流式佈局的使用

在日常的app使用中，我們會在Android 的app中看見,比如淘寶購物頁面尺寸的選取，脈脈和慕課技術職位的選取等等熱門標籤自動換行的流式佈局，今天，我們就來看看如何自定義一個類似熱門標籤那樣的流式佈局吧，老規矩，直接上效果圖

概述

1.流式佈局原理：

在佈局內，隨意擺放任意個view,每行所擺放的view個數，根據實施計算出來的寬度，一旦當前要擺放的view寬度和之前擺放的所有view寬度加在一起，超過了佈局的寬度,那麼就把該view換行擺放

2.應用場景：

一般，像這種流式佈局會應用在一些熱門標籤，熱門推薦之類的應用上

3.測量模式：

談到FlowLayout流式佈局，不得不提及他的測量模式：

* MeasureSpec.EXACTLY：精確模式, eg:100dp,match_parent.（明確指出）

* MeasureSpec.AT_MOST： 至多模式, view最多可以獲得的寬高值,它需要計算所有包含的子view的寬高，最後計算出來的寬高總和值,eg:wrap_content.

* UNSPECIFIED:未指定模式,想設定多寬多高,就給你多寬多高,一般的控制元件不會指定這種模式,但也存在，這種模式用的不多。eg:scrollview的寬高測量，就是使用的此種模式

4.在我們的流式佈局內，應該怎麼設定佈局的寬高呢? onMeasure()

1:如果佈局指定的寬是match_parent或者精確的寬度值，那麼直接就可以從父控制元件傳入的測量規格中直接獲取佈局寬度，高度同理.

2:如果佈局指定的寬高不是EXACTLY,而是AT_MOST,那麼這時候，就需要計算每一個子view的寬高，來決定佈局的寬高了。

寬度:擺放的所有子view佔據寬度最多的一行,作為佈局寬度。

高度:擺放的所有子view總共佔據幾行的高度總和。

5.子View的佈局方式： onLayout()

使用onLayout():設定ViewGroup內包含的所有子view的位置;
獲取到每一行的每一個子view,計算出它的left,top,right,bottom,呼叫layout方法設定其在流式佈局當中的位置。

• 寬度=子view最多的那行的寬度=那一行每一個子view的寬度+leftMargin+rightMargin;

• 高度=所有行的高度 = 每一行的高度+topMargin+bottomMargin;

LayoutParams引數的設定

ViewGroup LayoutParams :每個 ViewGroup 對應一個 LayoutParams; 即 ViewGroup -> LayoutParams
getLayoutParams 不知道轉為哪個對應的LayoutParams ,其實很簡單，就是如下：
子View.getLayoutParams 得到的LayoutParams對應的就是 子View所在的父控制元件的LayoutParams;
例如，LinearLayout 裡面的子view.getLayoutParams ->LinearLayout.LayoutParams
所以 咱們的FlowLayout 也需要一個LayoutParams，由於上面的效果圖是子View的 margin，
所以應該使用MarginLayoutParams。即FlowLayout->MarginLayoutParams

自定義ViewGroup的實現流式佈局

根據上面的技術分析，自定義類繼承於ViewGroup，並重寫 onMeasure和onLayout等方法。具體實現程式碼如下：

package com.example.administrator.p2pinvest.ui;

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

import java.util.ArrayList;
import java.util.List;
//自定義ViewGroup實現
public class FlowLayout extends ViewGroup {
    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);
    }

    //佈局：給每一個子view佈局，childView.layout(l,t,r,b)
    private List<Integer> allHeights = new ArrayList<>();//集合中的元素：記錄每一行的高度
    private List<List<View>> allViews = new ArrayList<>();//外層集合中的元素：由每行元素構成的集合

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int width = this.getWidth();//得到父檢視的寬度

        int lineWidth = 0;
        int lineHeight = 0;

        // 一、給集合元素賦值
        int childCount = getChildCount();
        List<View> lineList = new ArrayList<>();//一行元素構成的集合
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            //子檢視的寬高
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            //獲取檢視的邊距
            MarginLayoutParams mp = (MarginLayoutParams) childView.getLayoutParams();
            if (lineWidth + childWidth + mp.leftMargin + mp.rightMargin < width) {//不換行
                lineList.add(childView);//新增子檢視到集合中
                lineWidth += childWidth + mp.leftMargin + mp.rightMargin;
                lineHeight = Math.max(lineHeight, childHeight + mp.topMargin + mp.bottomMargin);
            } else {//換行
                allViews.add(lineList);
                allHeights.add(lineHeight);

                //換行以後需要執行的情況
                lineList = new ArrayList<>();
                lineList.add(childView);
                lineWidth = childWidth + mp.leftMargin + mp.rightMargin;
                lineHeight = childHeight + mp.topMargin + mp.bottomMargin;
            }

            if (i == childCount - 1) {//如果最後一個元素
                allViews.add(lineList);
                allHeights.add(lineHeight);
            }
        }


        Log.e("TAG", "allViews.size()==" + allViews.size() + "allHeights.size()==" + allHeights.size());

        //二、遍歷集合元素，呼叫元素的layout()

        int x = 0;
        int y = 0;

        for (int i = 0; i < allViews.size(); i++) {
            List<View> lineViews = allViews.get(i);//獲取每一行的集合
            for (int j = 0; j < lineViews.size(); j++) {
                View childView = lineViews.get(j);//獲取一行的指定的j位置

                MarginLayoutParams mp = (MarginLayoutParams) childView.getLayoutParams();
                //計算的到left,top,right,bottom
                int left = x + mp.leftMargin;
                int top = y + mp.topMargin;
                int right = left + childView.getMeasuredWidth();
                int bottom = top + childView.getMeasuredHeight();

                childView.layout(left, top, right, bottom);

                //重新賦值x,y
                x += childView.getMeasuredWidth() + mp.leftMargin + mp.rightMargin;
            }

            //換行
            x = 0;
            y += allHeights.get(i);
        }
    }

    //測量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        //獲取寬度和高度的佈局的數值，以及各自的設計模式，精確模式，至多模式
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //聲明當前檢視的寬和高，如果是至多模式，需要計算出此兩個變數的值
        int width = 0;
        int height = 0;

        //宣告每行的寬度和高度
        int lineWidth = 0;
        int lineHeight = 0;

        int childCount = getChildCount();//獲取子檢視的個數
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);

            //為了保證能夠獲取子檢視的測量的寬高，需要調下面的方法
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
            //獲取子檢視測量的寬高
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();

            //獲取檢視的邊距
            MarginLayoutParams mp = (MarginLayoutParams) childView.getLayoutParams();

            if (lineWidth + childWidth + mp.leftMargin + mp.rightMargin <= widthSize) {//不換行
                lineWidth += childWidth + mp.leftMargin + mp.rightMargin;
                lineHeight = Math.max(lineHeight, childHeight + mp.topMargin + mp.bottomMargin);
            } else {//換行
                width = Math.max(width, lineWidth);
                height += lineHeight;

                //重新賦值
                lineWidth = childWidth + mp.leftMargin + mp.rightMargin;
                lineHeight = childHeight + mp.topMargin + mp.bottomMargin;

            }
            //單獨的考慮一下最後一個！因為最後一個元素並沒有計算進去
            if (i == childCount - 1) {
                width = Math.max(width, lineWidth);
                height += lineHeight;
            }
        }

        Log.e("TAG", "width ==" + width + ",height==" + height);
        Log.e("TAG", "widthSize ==" + widthSize + ",heightSize==" + heightSize);

        //呼叫此方法，設定當前佈局的寬高
        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : width,
                heightMode == MeasureSpec.EXACTLY ? heightSize : height);

    }
    //FlowLayout中有了如下的方法，在onMeasure()中可通過child就可以getLayoutParams()
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        MarginLayoutParams mp = new MarginLayoutParams(getContext(), attrs);
        return mp;

    }

}

在佈局檔案中加入自定義的flowLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.administrator.p2pinvest.ui.FlowLayout
        android:id="@+id/flow_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.example.administrator.p2pinvest.ui.FlowLayout>
</LinearLayout>

初始化佈局使用的是butterknife

 @Bind(R.id.flow_layout)
 FlowLayout flowLayout;

提供頁面要顯示的資料，這個資料也可以放在伺服器中進行聯網獲取

    private String[] datas = new String[]{"新手計劃", "樂享活系列90天計劃", "錢包", "30天理財計劃(加息2%)",
            "林業局投資商業經營與大撈一筆", "中學老師購買車輛", "屌絲下海經商計劃", "新西遊影視拍",
            "Java培訓老師自己週轉", "HelloWorld", "C++-C-ObjectC-java", "Android vs ios", "演算法與資料結構", "JNI與NDK", "team working"};
    //初始化隨機
    private Random random;

在其他類中直接進行呼叫即可

    @Override
    public void initData(String content) {

        random = new Random();
        for(int i = 0; i < datas.length; i++) {
            final TextView textView = new TextView(getActivity());
            textView.setText(datas[i]);
            //提供邊距的物件，並設定到textView中
            ViewGroup.MarginLayoutParams mp = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
            mp.leftMargin = UIUtils.dp2px(8);
            mp.rightMargin = UIUtils.dp2px(8);
            mp.topMargin = UIUtils.dp2px(8);
            mp.bottomMargin = UIUtils.dp2px(8);
            textView.setLayoutParams(mp);

            //設定背景
            //設定textView的背景
            int red = random.nextInt(211);
            int green = random.nextInt(211);
            int blue = random.nextInt(211);
            //方式一：
//            textView.setBackground(DrawUtils.getDrawable(Color.rgb(red, green, blue),UIUtils.dp2px(5)));

            //方式二：
            //儲存按下能顯示selector的效果，需要設定一個如下的屬性
            textView.setBackground(DrawUtils.getSelector(DrawUtils.getDrawable(Color.rgb(red, green, blue),UIUtils.dp2px(5)),DrawUtils.getDrawable(Color.WHITE,UIUtils.dp2px(5))));
            //方式一：
//            textView.setClickable(true);

            //新增點選事件，也是實現顯示selector的效果的一種方式
            textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(ProductHotFragment.this.getActivity(), textView.getText(), Toast.LENGTH_SHORT).show();
                }
            });

            //設定邊距
            //設定內邊距
            int padding = UIUtils.dp2px(10);
            textView.setPadding(padding, padding, padding, padding);


            // 2.新增到FlowLayout佈局中
            flowLayout.addView(textView);
        }
    }

用到的工具類

    public class DrawUtils {
    //提供一個指定顏色和圓角半徑的Drawable物件
    public static GradientDrawable getDrawable(int rgb,float radius){
        GradientDrawable gradientDrawable = new GradientDrawable();
        gradientDrawable.setColor(rgb);//設定顏色
        gradientDrawable.setGradientType(GradientDrawable.RECTANGLE);//設定顯示的樣式
        gradientDrawable.setCornerRadius(radius);//設定圓角的半徑
        gradientDrawable.setStroke(UIUtils.dp2px(1),rgb);//描邊
        return gradientDrawable;
    }

    public static StateListDrawable getSelector(Drawable normalDrawable,Drawable pressDrawable) {
        StateListDrawable stateListDrawable = new StateListDrawable();
        //給當前的顏色選擇器新增選中圖片指向狀態，未選中圖片指向狀態
        stateListDrawable.addState(new int[]{android.R.attr.state_enabled, android.R.attr.state_pressed}, pressDrawable);
        stateListDrawable.addState(new int[]{android.R.attr.state_enabled}, normalDrawable);
        //設定預設狀態
        stateListDrawable.addState(new int[]{}, normalDrawable);
        return stateListDrawable;
    }
}