最終效果圖

效果圖.png

• FlowLayout自定義控件

自定義view繼承ViewGroup,重寫onMeasure（），onLayout（）方法。可根據子元素寬度動態測量寬高

public class FlowLayout extends ViewGroup {

    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);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     //   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //遍歷去調用所有子元素的measure方法（child.getMeasuredHeight()才能獲取到值，否則為0）
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        int measuredWidth = 0, measuredHeight = 0;

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widtMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //由于計算子view所占寬度，這里傳值需要自身減去PaddingRight寬度，PaddingLeft會在接下來計算子元素位置時加上
        Map<String, Integer> compute = compute(widthSize-getPaddingRight());

        //EXACTLY模式：對應于給定大小或者match_parent情況
        if (widtMode == MeasureSpec.EXACTLY) {
            measuredWidth = widthSize;
        //AT_MOS模式：對應wrap-content（需要手動計算大小，否則相當于match_parent）
        } else if (widtMode == MeasureSpec.AT_MOST) {
            measuredWidth = compute.get("allChildWidth");
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            measuredHeight = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            measuredHeight = compute.get("allChildHeight");
        }
         //設置flow的寬高
        setMeasuredDimension(measuredWidth,measuredHeight);
    }


    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            Rect rect = (Rect) getChildAt(i).getTag();
            child.layout(rect.left,rect.top,rect.right,rect.bottom);
        }

    }

    /**
     * 測量過程
     * @param flowWidth 該view的寬度
     * @return  返回子元素總所占寬度和高度（用于計算Flowlayout的AT_MOST模式設置寬高）
     */
    private Map<String, Integer> compute(int flowWidth) {
        //是否是單行
        boolean aRow = true;
        MarginLayoutParams marginParams;//子元素margin
        int rowsWidth = getPaddingLeft();//當前行已占寬度(注意需要加上paddingLeft)
        int columnHeight =getPaddingTop();//當前行頂部已占高度(注意需要加上paddingTop)
        int rowsMaxHeight = 0;//當前行所有子元素的最大高度（用于換行累加高度）

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

            View child = getChildAt(i);
            //獲取元素測量寬度和高度
            int measuredWidth = child.getMeasuredWidth();
            int measuredHeight = child.getMeasuredHeight();
            //獲取元素的margin
            marginParams = (MarginLayoutParams) child.getLayoutParams();
            //子元素所占寬度 = MarginLeft+ child.getMeasuredWidth+MarginRight  注意此時不能child.getWidth,因為界面沒有繪制完成，此時wdith為0
            int childWidth = marginParams.leftMargin + marginParams.rightMargin + measuredWidth;
            int childHeight = marginParams.topMargin + marginParams.bottomMargin + measuredHeight;
            //判斷是否換行： 該行已占大小+該元素大小>父容器寬度  則換行

            rowsMaxHeight = Math.max(rowsMaxHeight, childHeight);
            //換行
            if (rowsWidth + childWidth > flowWidth) {
                //重置行寬度
                rowsWidth = getPaddingLeft()+getPaddingRight();
                //累加上該行子元素最大高度
                columnHeight += rowsMaxHeight;
                //重置該行最大高度
                rowsMaxHeight = childHeight;
                aRow = false;
            }
            //累加上該行子元素寬度
            rowsWidth += childWidth;
            //判斷時占的寬段時加上margin計算，設置頂點位置時不包括margin位置，不然margin會不起作用，這是給View設置tag,在onlayout給子元素設置位置再遍歷取出
            child.setTag(new Rect(rowsWidth - childWidth + marginParams.leftMargin, columnHeight + marginParams.topMargin, rowsWidth - marginParams.rightMargin, columnHeight + childHeight - marginParams.bottomMargin));
        }

        //返回子元素總所占寬度和高度（用于計算Flowlayout的AT_MOST模式設置寬高）
        Map<String, Integer> flowMap = new HashMap<>();
        //單行
        if (aRow) {
            flowMap.put("allChildWidth", rowsWidth);
        } else {
            //多行
            flowMap.put("allChildWidth", flowWidth);
        }
        //FlowLayout測量高度 = 當前行頂部已占高度 +當前行內子元素最大高度+FlowLayout的PaddingBottom
        flowMap.put("allChildHeight", columnHeight+rowsMaxHeight+getPaddingBottom());
           return  flowMap;
    }

• xml

  <com.ys.view.widget.FlowLayout
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background="#e8e8e8"
          android:padding="5dp"
          android:id="@+id/flow"/>

• Activity調用

public class MainActivity extends AppCompatActivity {
 private FlowLayout flowLayout;

 private List<String> list=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flowLayout = findViewById(R.id.flow);
        for (int i = 0; i <10; i++) {
            list.add("Android");
            list.add("Java");
            list.add("IOS");
            list.add("python");
        }


//往容器內添加TextView數據
 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.setMargins(10, 5, 10, 5);
        if (flowLayout != null) {
            flowLayout.removeAllViews();
        }
        for (int i = 0; i < list.size(); i++) {
            TextView tv = new TextView(this);
            tv.setPadding(28, 10, 28, 10);
            tv.setText(loveList.get(i));
            tv.setMaxEms(10);
            tv.setSingleLine();
            tv.setBackgroundResource(R.drawable.selector_playsearch);
            tv.setLayoutParams(layoutParams);
            flowLayout.addView(tv, layoutParams);
        }

    }
}