Android自定義ViewGroup之實現(xiàn)FlowLayout流式布局

更新時間：2020年09月23日 07:39:55 作者：可樂淘

這篇文章主要為大家詳細介紹了Android自定義ViewGroup之實現(xiàn)FlowLayout流式布局的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

整理總結自鴻洋的博客，希望可以幫到大家。

一、FlowLayout介紹

所謂FlowLayout，就是控件根據(jù)ViewGroup的寬，自動的往右添加，如果當前行剩余空間不足，則自動添加到下一行。有點像所有的控件都往左飄的感覺，第一行滿了，往第二行飄~所以也叫流式布局。Android并沒有提供流式布局，但是某些場合中，流式布局還是非常適合使用的，比如關鍵字標簽，搜索熱詞列表等，比如下圖：

github上已有現(xiàn)成的FlowLayout，本文是從無到有去制作。

二、制作分析

1、對于FlowLayout，需要指定的LayoutParams，我們目前只需要能夠識別margin即可，即使用MarginLayoutParams.
2、onMeasure中計算所有childView的寬和高，然后根據(jù)childView的寬和高，計算自己的寬和高。（當然，如果不是wrap_content，直接使用父ViewGroup傳入的計算值即可）
3、onLayout中對所有的childView進行布局。

三、代碼

1、MainActivity.java

 public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
// setContentView(R.layout.activity_main2);
// setContentView(R.layout.activity_main3);
 }
}

2、CustomViewGroup.java

public class CustomViewGroup extends ViewGroup {

 private final String TAG = getClass().getSimpleName();

 public CustomViewGroup(Context context) {
 super(context);
 }

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

 public CustomViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 /**
 * 一、重寫generateLayoutParams，確定該ViewGroup的LayoutParams
 * 返回MarginLayoutParams的實例，這樣就為我們的ViewGroup指定了其LayoutParams為MarginLayoutParams
 */
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
 return new MarginLayoutParams(getContext(), attrs);
 }

 /**
 * 二、計算所有ChildView的寬度和高度 然后根據(jù)ChildView的計算結果，設置自己的寬和高
 */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 //1、獲得此ViewGroup上級容器為其推薦的寬和高，以及計算模式
 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 int heightMode = MeasureSpec.getMode(heightMeasureSpec);
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);

 // 2、如果ViewGroup布局是wrap_content時，根據(jù)childView的尺寸，計算容器的寬和高
 int width = 0;//ViewGroup的寬度
 int height = 0;//ViewGroup的高度
 int lineWidth = 0;//childView所占據(jù)的當前行總寬度
 int lineHeight = 0;//childView所占據(jù)的各行總高度
 int cCount = getChildCount();////childView的數(shù)量
 for(int i=0; i<cCount; i++){//遍歷每個childView
  View childView = getChildAt(i);
  measureChild(childView, widthMeasureSpec, heightMeasureSpec);// 測量當前child的寬和高
  MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
  int cWidth = childView.getMeasuredWidth() + mlp.leftMargin + mlp.rightMargin;
  int cHeight = childView.getMeasuredHeight() + mlp.topMargin + mlp.bottomMargin;
  if(lineWidth + cWidth > sizeWidth){//如果加入當前childView后超出最大寬度，width取最大高度，累加lineHeight，然后開啟新行
  width = Math.max(lineWidth, cWidth);
  height += lineHeight;
  lineWidth = cWidth;
  }else{//如果加入當前childView后小于最大寬度，則累加lineWidthheight lineHeight取最大高度
  lineWidth += cWidth;
  height = Math.max(lineHeight, cHeight);
  }
  if(i == cCount-1){// 如果是最后一個childView，則將當前記錄的最大寬度和當前l(fā)ineWidth做比較
  width = Math.max(lineWidth, cWidth);
  height += lineHeight;
  }
 }

 //3、如果是wrap_content設置為我們計算的值;否則直接設置為父容器計算的值
 setMeasuredDimension(
  (widthMode == MeasureSpec.EXACTLY) ? sizeWidth : width,
  (heightMode == MeasureSpec.EXACTLY) ? sizeHeight : height
 );
 }

 /**
 * 三、重寫onLayout，對其所有childView進行定位（設置childView的繪制區(qū)域）
 */
 private List<List<View>> allChildViews = new ArrayList<List<View>>();//存儲所有的childView，按行記錄
 private List<Integer> maxLineHeight = new ArrayList<Integer>();//存儲每行的最大高度值
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 allChildViews.clear();
 maxLineHeight.clear();

 int width = getWidth();//每行的最大寬度
 int lineWidth = 0;//每行的即時寬度
 int lineHeight = 0;//每行的即時高度

 List<View> lineChildViews = new ArrayList<View>();//存儲每行所有的childView

 int cCount = getChildCount();
 for(int i=0; i<cCount; i++){//遍歷所有childView
  View childView = getChildAt(i);
  MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
  int cWidth = childView.getMeasuredWidth();
  int cHeight = childView.getMeasuredHeight();
  if(lineWidth + cWidth + mlp.leftMargin + mlp.rightMargin > width){//如果需要換行
  maxLineHeight.add(lineHeight);// 存儲這一行最大高度
  allChildViews.add(lineChildViews);// 將當前行的childView保存，然后開啟新的ArrayList保存下一行的childView
  lineChildViews = new ArrayList<View>();
  lineWidth = 0;// 重置行寬
  }else{//如果不需要換行
  lineWidth += cWidth + mlp.leftMargin + mlp.rightMargin;//即時寬度累加
  lineHeight = Math.max(lineHeight,cHeight + mlp.topMargin + mlp.bottomMargin );//即時高度取最大值
  lineChildViews.add(childView);//把當前childView存入這一行的集合
  }
 }
 // 記錄最后一行
 maxLineHeight.add(lineHeight);
 allChildViews.add(lineChildViews);

 int left = 0;//左坐標
 int top = 0;//上坐標
 int lineNums = allChildViews.size();// 得到總行數(shù)
 for (int i = 0; i < lineNums; i++) {
  lineChildViews = allChildViews.get(i);// 取得每一行的所有的views
  lineHeight = maxLineHeight.get(i);// 取得當前行的最大高度

  Log.e(TAG, "第" + i + "行 ：" + lineChildViews.size() + " , " + lineChildViews);
  Log.e(TAG, "第" + i + "行， ：" + lineHeight);

  // 遍歷當前行所有的View 
  for (int j = 0; j < lineChildViews.size(); j++) {
  View childView = lineChildViews.get(j);//取得childView
  if (childView.getVisibility() == View.GONE) {
   continue;
  }
  MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
  //計算childView的left,top,right,bottom
  int lc = left + mlp.leftMargin;
  int tc = top + mlp.topMargin;
  int rc = lc + childView.getMeasuredWidth();
  int bc = tc + childView.getMeasuredHeight();

  Log.e(TAG, childView + " , l = " + lc + " , t = " + t + " , r =" + rc + " , b = " + bc);

  childView.layout(lc, tc, rc, bc);//設置這個childView的位置
  left += childView.getMeasuredWidth() + mlp.rightMargin + mlp.leftMargin;//左坐標累加
  }
  left = 0;//開始新的一行，左坐標重置
  top += lineHeight;//開始新的一行，上坐標累加
 }
 }
}

3、activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#E1E6F6"
 android:orientation="vertical">

 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">

 <TextView
  style="@style/text_flag_01"
  android:text="Welcome" />

 <TextView
  style="@style/text_flag_01"
  android:text="IT工程師" />

 <TextView
  style="@style/text_flag_01"
  android:text="學習ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="戀愛ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="掙錢ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="努力ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="I thick i can" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

</LinearLayout>

4、activity_main2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#E1E6F6"
 android:orientation="vertical">

 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">

 <TextView
  style="@style/text_flag_01"
  android:text="Welcome" />

 <TextView
  style="@style/text_flag_01"
  android:text="IT工程師" />

 <TextView
  style="@style/text_flag_01"
  android:text="學習ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="戀愛ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="掙錢ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="努力ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="I thick i can" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>


 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp">

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="Welcome"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="IT工程師"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="學習ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="戀愛ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="掙錢ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="努力ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="I thick i can"
  android:textColor="#888888" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp">

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="Welcome"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="IT工程師"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="學習ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="戀愛ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="掙錢ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="努力ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="I thick i can"
  android:textColor="#43BBE7" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

</LinearLayout>

5、activity_main3.xml

<com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="200dp"
 android:layout_height="wrap_content"
 android:background="#FFFFFF">

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="Welcome"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="IT工程師"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="學習ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="戀愛ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="掙錢ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="努力ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="I thick i can"
 android:textColor="#323232" />

</com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android WaveView實現(xiàn)水流波動效果
這篇文章主要介紹了 Android自定義控件 WaveView實現(xiàn)水流波動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-03-03
Android仿String的對象駐留示例分析
這篇文章主要介紹了Android仿String的對象駐留,較為詳細的分析說明了對象駐留的概念及Android實現(xiàn)仿String對象駐留的相關技巧,需要的朋友可以參考下
2015-12-12
Android手勢操作示例(上/下/左/右的判斷)
這篇文章主要介紹了Android手勢操作方法,包含了針對上、下、左、右等方向的判斷,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
Android Intent實現(xiàn)頁面跳轉(zhuǎn)的兩種方法
這篇文章主要介紹了Android Intent實現(xiàn)頁面跳轉(zhuǎn)的兩種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
Android中的顏色表示的詳解
這篇文章主要介紹了Android中的顏色表示的詳解的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-10-10
Android Studio實現(xiàn)自定義全局懸浮按鈕的示例代碼
在 Android 應用中實現(xiàn)全局懸浮按鈕是一個常見的需求,可以用于快速訪問重要功能或返回頂部等操作,下面我將詳細介紹如何實現(xiàn)一個自定義的全局懸浮按鈕,感興趣的小伙伴跟著小編一起來看看吧
2025-04-04
appium運行各種坑爹報錯問題及解決方法【推薦】
這篇文章主要介紹了 appium運行各種坑爹報錯問題及解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
在Android系統(tǒng)中使用gzip進行數(shù)據(jù)傳遞實例代碼
HTTP協(xié)議上的GZIP編碼是一種用來改進WEB應用程序性能的技術，4.4MB的文本數(shù)據(jù)經(jīng)過Gzip傳輸?shù)娇蛻舳酥笞優(yōu)?92KB，壓縮效率極高，下面與大家分享下具體的實現(xiàn)
2013-06-06
Android實現(xiàn)自動播放圖片功能
這篇文章主要為大家詳細介紹了Android實現(xiàn)自動播放圖片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-06-06
Android自定義評分控件的完整實例
在Android開發(fā)中,我們經(jīng)常會用到對商家或者商品的評價,運用星星進行打分,下面這篇文章主要給大家介紹了關于Android自定義評分控件的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2022-05-05