廢話少說 , 先展示一下文字瀑布流的效果 :

自定義瀑布流控制元件:

package com.lyx.flowlayoutdemo;

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

import java.util.ArrayList;

/**強大的流式佈局*/

public class FlowLayout extends ViewGroup{

    private int horizontalSpacing = 15
 
;//水平間距
    private int verticalSpacing = 15;//行與行之間的垂直間距

    //用來存放所有的Line物件
    private ArrayList<Line> lineList = new ArrayList<Line>();
    public FlowLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

    public FlowLayout(Context context) {
        super(context);
    }
    /**
     * 設定水平間距
     * @param horizontalSpacing
     */
    public void setHorizontalSpacing(int horizontalSpacing){
        this.horizontalSpacing = horizontalSpacing;
    }

    /**
     * 設定垂直間距
     * @param
 
 verticalSpacing
     */
    public void setVerticalSpacing(int verticalSpacing){
        this.verticalSpacing = verticalSpacing;
    }

    /**
     * 分行：遍歷所有的子View，判斷哪幾個子View在同一行(排座位表)
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        lineList.clear();

        //1.獲取FlowLayout的寬度
        int width = MeasureSpec.getSize(widthMeasureSpec);
        //2.獲取用於實際比較的寬度，就是除去2邊的padding的寬度
        int noPaddingWidth = width-getPaddingLeft()-getPaddingRight();

        //3.遍歷所有的子View，拿子View的寬和noPaddingWidth進行比較
        Line line = new Line();//準備Line物件
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            childView.measure(0, 0);//保證能夠獲取到寬高

            //4.如果當前line中木有子View，則不用比較直接放入line中，因為要保證每行至少有一個子View;
            if(line.getViewList().size()==0){
                line.addLineView(childView);//直接存入
            }else if(line.getLineWidth()+horizontalSpacing+childView.getMeasuredWidth()>noPaddingWidth){
                //5.如果當前line的寬+水平間距+子View的寬大於noPaddingWidth,則child需要換行
                //需要先存放好之前的line物件，否則會造成丟失
                lineList.add(line);

                line = new Line();//建立新的Line，
                line.addLineView(childView);//將當前child放入新的行中
            }else {
                //6.說明當前child應該放入當前Line中
                line.addLineView(childView);
            }

            //7.如果當前child是最後的子View，那麼需要儲存最後的line物件
            if(i==(getChildCount()-1)){
                lineList.add(line);//儲存最後的Line
            }
        }

        //for迴圈結束了，lineList存放了所有的Line，而每個Line又記錄了自己行所有的VIew;
        //計算FLowLayout需要的高度
        int height = getPaddingTop()+getPaddingTop();//先計算上下的padding值
        for (int i = 0; i < lineList.size(); i++) {
            height += lineList.get(i).getLineHeight();//再加上所有行的高度
        }
        height += (lineList.size()-1)*verticalSpacing;//最後加上所有的行間距

        //設定當前控制元件的寬高，或者向父VIew申請寬高
        setMeasuredDimension(width, height);
    }
    /**
     * 去擺放所有的子View，讓每個人真正的坐到自己的位置上
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        for (int i = 0; i < lineList.size(); i++) {
            Line line = lineList.get(i);//獲取Line物件

            //從第二行開始，每行的top總是比上一行的top多一個行高和垂直間距
            if(i>0){
                paddingTop += verticalSpacing+lineList.get(i-1).getLineHeight();
            }

            ArrayList<View> viewList = line.getViewList();//獲取line的view的集合

            //1.獲取每行的留白的寬度
            int remainSpacing = getLineRemainSpacing(line);
            //2.計算每個view平均得到的值
            float perSpacing = remainSpacing/viewList.size();

            for (int j = 0; j < viewList.size(); j++) {
                View childView = viewList.get(j);
                //3.將得到的perSpacing增加到view的寬度上面
                int widthSpec = MeasureSpec.makeMeasureSpec((int) (childView.getMeasuredWidth()+perSpacing),MeasureSpec.EXACTLY);
                childView.measure(widthSpec,0);

                if(j==0){
                    //如果是每行的第一行，name直接靠左邊擺放
                    childView.layout(paddingLeft,paddingTop,paddingLeft+childView.getMeasuredWidth(),
                            paddingTop+childView.getMeasuredHeight());
                }else {
                    //如果不是第一個，需要參考前一個view的right
                    View preView = viewList.get(j-1);
                    //當前view的left是前一個view的right+水平間距
                    int left = preView.getRight()+horizontalSpacing;
                    childView.layout(left, preView.getTop(),left+childView.getMeasuredWidth(),preView.getBottom());
                }
            }
        }
    }
    /**
     * 獲取指定line的留白
     * @param line
     * @return
     */
    private int getLineRemainSpacing(Line line){
        return getMeasuredWidth()-getPaddingLeft()-getPaddingRight()-line.getLineWidth();
    }

    /**
     * 封裝每行的資料，包括所有的子View，行的寬高
     * @author Administrator
     *
     */
    class Line{
        private ArrayList<View> viewList;//用來存放當前行所有的子View
        private int width;//表示所有子View的寬+水平間距
        private int height;//行的高度

        public Line(){
            viewList = new ArrayList<View>();
        }

        /**
         * 記錄子VIew
         * @param child
         */
        public void addLineView(View child){
            if(!viewList.contains(child)){
                viewList.add(child);

                //1.更新Line的width
                if(viewList.size()==1){
                    //說明新增的是第一個子View，那麼line的寬就是子view的寬度
                    width = child.getMeasuredWidth();
                }else {
                    //如果新增的不是第一個子View，那麼應該加等於水平間距和子VIew的寬度
                    width += child.getMeasuredWidth()+horizontalSpacing;
                }
                //2.更新line的height
                height = Math.max(height,child.getMeasuredHeight());
            }
        }

        /**
         * 獲取當前行的寬度
         * @return
         */
        public int getLineWidth(){
            return width;
        }
        /**
         * 獲取當前行的高度
         * @return
         */
        public int getLineHeight(){
            return height;
        }
        /**
         * 獲取當前行的所有的子View
         * @return
         */
        public ArrayList<View> getViewList(){
            return viewList;
        }
    }

}

使用程式碼:

package com.lyx.flowlayoutdemo;

import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.graphics.drawable.StateListDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private FlowLayout flowLayout;
    ArrayList<String> datas = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flowLayout = (FlowLayout) findViewById(R.id.fly);

        initData();

        for (String data : datas) {
            final TextView textView = new TextView(MainActivity.this);
            textView.setText(data);

            //背景圖片
            GradientDrawable gradientDrawable = new GradientDrawable();
            gradientDrawable.setShape(GradientDrawable.RECTANGLE);
            int dp5 = Utils.getDimens(MainActivity.this, R.dimen.dp5);
            gradientDrawable.setCornerRadius(dp5);
            gradientDrawable.setColor(
                    Color.rgb(Utils.createRandomColor(), Utils.createRandomColor(), Utils.createRandomColor()));

            GradientDrawable gradientDrawable2 = new GradientDrawable();
            gradientDrawable2.setShape(GradientDrawable.RECTANGLE);

            gradientDrawable2.setCornerRadius(dp5);
            gradientDrawable2.setColor(
                    Color.rgb(Utils.createRandomColor(), Utils.createRandomColor(), Utils.createRandomColor()));

            textView.setTextColor(Color.WHITE);
            textView.setTextSize(16);
            textView.setPadding(10, 5, 10, 5);
            textView.setGravity(Gravity.CENTER);

            //設定點選效果
            StateListDrawable stateListDrawable = new StateListDrawable();
            stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, gradientDrawable);
            stateListDrawable.addState(new int[]{}, gradientDrawable2);
            textView.setBackgroundDrawable(stateListDrawable);


            textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Utils.showToast(MainActivity.this, textView.getText().toString());
                }
            });

            flowLayout.addView(textView);
        }
    }

    private void initData() {
        for (int i = 0; i < 20; i++) {
            datas.add("QQ");
            datas.add("暴風影音");
            datas.add("王者農藥");
            datas.add("名字非常的長,特別的長");
            datas.add("攜程");
            datas.add("微信");
        }
    }


}

佈局:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:scrollbars="none"
    tools:context="com.lyx.flowlayoutdemo.MainActivity">


    <com.lyx.flowlayoutdemo.FlowLayout
        android:id="@+id/fly"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


</ScrollView>

工具類:

package com.lyx.flowlayoutdemo;

import android.content.Context;
import android.util.DisplayMetrics;
import android.widget.Toast;

import java.util.Random;

/**
 * Created by liyongxiang on 2017/8/12.
 */

public class Utils {

    private static Toast toast;

    /**
     * 拿到一個隨機顏色
     */
    public static int createRandomColor() {
        Random random = new Random();
        return random.nextInt(180);

    }

    //在螢幕適配時候使用,讓程式碼中使用dip屬性
    public static int getDimens(Context context,int px) {
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        int dp = Math.round(px / (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
        return dp;
    }


    public static void showToast(Context context, String text) {
        if (toast == null) {
            toast = Toast.makeText(context, text, Toast.LENGTH_SHORT);
        } else {
            toast.setText(text);//如果不為空，則直接改變當前toast的文字
        }
        toast.show();
    }
}