Android自定義ViewGroup之實現(xiàn)FlowLayout流式布局
更新時間：2020年09月23日 07:39:55 作者：可樂淘
這篇文章主要為大家詳細(xì)介紹了Android自定義ViewGroup之實現(xiàn)FlowLayout流式布局的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
整理總結(jié)自鴻洋的博客，希望可以幫到大家。
一、FlowLayout介紹
所謂FlowLayout，就是控件根據(jù)ViewGroup的寬，自動的往右添加，如果當(dāng)前行剩余空間不足，則自動添加到下一行。有點像所有的控件都往左飄的感覺，第一行滿了，往第二行飄~所以也叫流式布局。Android并沒有提供流式布局，但是某些場合中，流式布局還是非常適合使用的，比如關(guān)鍵字標(biāo)簽，搜索熱詞列表等，比如下圖：
github上已有現(xiàn)成的FlowLayout，本文是從無到有去制作。
二、制作分析
1、對于FlowLayout，需要指定的LayoutParams，我們目前只需要能夠識別margin即可，即使用MarginLayoutParams.
2、onMeasure中計算所有childView的寬和高，然后根據(jù)childView的寬和高，計算自己的寬和高。（當(dāng)然，如果不是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的計算結(jié)果，設(shè)置自己的寬和高
*/
@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ù)的當(dāng)前行總寬度
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);// 測量當(dāng)前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){//如果加入當(dāng)前childView后超出最大寬度，width取最大高度，累加lineHeight，然后開啟新行
width = Math.max(lineWidth, cWidth);
height += lineHeight;
lineWidth = cWidth;
}else{//如果加入當(dāng)前childView后小于最大寬度，則累加lineWidthheight lineHeight取最大高度
lineWidth += cWidth;
height = Math.max(lineHeight, cHeight);
}
if(i == cCount-1){// 如果是最后一個childView，則將當(dāng)前記錄的最大寬度和當(dāng)前l(fā)ineWidth做比較
width = Math.max(lineWidth, cWidth);
height += lineHeight;
}
}
//3、如果是wrap_content設(shè)置為我們計算的值;否則直接設(shè)置為父容器計算的值
setMeasuredDimension(
(widthMode == MeasureSpec.EXACTLY) ? sizeWidth : width,
(heightMode == MeasureSpec.EXACTLY) ? sizeHeight : height
);
}
/**
* 三、重寫onLayout，對其所有childView進行定位（設(shè)置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);// 將當(dāng)前行的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);//把當(dāng)前childView存入這一行的集合
}
}
// 記錄最后一行
maxLineHeight.add(lineHeight);
allChildViews.add(lineChildViews);
int left = 0;//左坐標(biāo)
int top = 0;//上坐標(biāo)
int lineNums = allChildViews.size();// 得到總行數(shù)
for (int i = 0; i < lineNums; i++) {
lineChildViews = allChildViews.get(i);// 取得每一行的所有的views
lineHeight = maxLineHeight.get(i);// 取得當(dāng)前行的最大高度
Log.e(TAG, "第" + i + "行 ：" + lineChildViews.size() + " , " + lineChildViews);
Log.e(TAG, "第" + i + "行， ：" + lineHeight);
// 遍歷當(dāng)前行所有的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);//設(shè)置這個childView的位置
left += childView.getMeasuredWidth() + mlp.rightMargin + mlp.leftMargin;//左坐標(biāo)累加
}
left = 0;//開始新的一行，左坐標(biāo)重置
top += lineHeight;//開始新的一行，上坐標(biāo)累加
}
}
}
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="學(xué)習(xí)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="學(xué)習(xí)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="學(xué)習(xí)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="學(xué)習(xí)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="學(xué)習(xí)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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Android WaveView實現(xiàn)水流波動效果
這篇文章主要介紹了 Android自定義控件 WaveView實現(xiàn)水流波動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了Android仿String的對象駐留,較為詳細(xì)的分析說明了對象駐留的概念及Android實現(xiàn)仿String對象駐留的相關(guān)技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了Android手勢操作方法,包含了針對上、下、左、右等方向的判斷,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
Android Intent實現(xiàn)頁面跳轉(zhuǎn)的兩種方法
這篇文章主要介紹了Android Intent實現(xiàn)頁面跳轉(zhuǎn)的兩種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了Android中的顏色表示的詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
Android Studio實現(xiàn)自定義全局懸浮按鈕的示例代碼
在 Android 應(yīng)用中實現(xiàn)全局懸浮按鈕是一個常見的需求,可以用于快速訪問重要功能或返回頂部等操作,下面我將詳細(xì)介紹如何實現(xiàn)一個自定義的全局懸浮按鈕,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
這篇文章主要介紹了 appium運行各種坑爹報錯問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
在Android系統(tǒng)中使用gzip進行數(shù)據(jù)傳遞實例代碼
HTTP協(xié)議上的GZIP編碼是一種用來改進WEB應(yīng)用程序性能的技術(shù)，4.4MB的文本數(shù)據(jù)經(jīng)過Gzip傳輸?shù)娇蛻舳酥笞優(yōu)?92KB，壓縮效率極高，下面與大家分享下具體的實現(xiàn)2013-06-06
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)自動播放圖片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
在Android開發(fā)中,我們經(jīng)常會用到對商家或者商品的評價,運用星星進行打分,下面這篇文章主要給大家介紹了關(guān)于Android自定義評分控件的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05