快捷導(dǎo)航

Android自定義ViewGroup之FlowLayout（三）

更新時(shí)間：2016年09月05日 16:18:48 作者：huaxun66

這篇文章主要為大家詳細(xì)介紹了Android自定義ViewGroup之FlowLayout，常用于關(guān)鍵字標(biāo)簽，搜索熱詞列表等功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本篇繼續(xù)來(lái)講自定義ViewGroup，給大家?guī)?lái)一個(gè)實(shí)例：FlowLayout。何為FlowLayout，就是控件根據(jù)ViewGroup的寬，自動(dòng)的往右添加，如果當(dāng)前行剩余空間不足，則自動(dòng)添加到下一行，所以也叫流式布局。Android并沒(méi)有提供流式布局，但是某些場(chǎng)合中，流式布局還是非常適合使用的，比如關(guān)鍵字標(biāo)簽，搜索熱詞列表等，比如下圖：

定義FlowLayout

LayoutParams，onLayout的寫(xiě)法都和上一篇講WaterfallLayout一模一樣，在此不再贅述了，沒(méi)看過(guò)的可以參照上一篇Android自定義ViewGroup（二）之WaterfallLayout。
在這里主要說(shuō)的是onMeasure方法，注釋見(jiàn)下方：

 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
 super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 // 獲得它的父容器為它設(shè)置的測(cè)量模式和大小 
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); 
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); 
 int modeWidth = MeasureSpec.getMode(widthMeasureSpec); 
 int modeHeight = MeasureSpec.getMode(heightMeasureSpec); 

 int childCount = getChildCount();
 // 如果是wrap_content情況下，記錄寬和高 
 int wrapWidth = 0; 
 int wrapHeight = 0; 
 //記錄每一行的寬度，width不斷取最大寬度 
 int lineWidth = 0; 
 //每一行的高度，累加至height 
 int lineHeight = 0;

 // 遍歷每個(gè)子元素 
 for (int i = 0; i < childCount; i++) { 
 View child = getChildAt(i); 
 // 測(cè)量每一個(gè)child的寬和高 
 measureChild(child, widthMeasureSpec, heightMeasureSpec); 
 // 得到child的lParams 
 LayoutParams lParams = (LayoutParams) child.getLayoutParams(); 
 // 當(dāng)前子空間實(shí)際占據(jù)的寬度 
 int childWidth = child.getMeasuredWidth(); 
 // 當(dāng)前子空間實(shí)際占據(jù)的高度 
 int childHeight = child.getMeasuredHeight(); 
 // 如果加上當(dāng)前child，則超出最大寬度，然后開(kāi)啟新行 
 if (lineWidth + childWidth > sizeWidth) {
 //記錄新行頭一個(gè)標(biāo)簽坐標(biāo)，為onLayout做準(zhǔn)備
 lParams.left = 0;
 lParams.top = wrapHeight + lineHeight + vSpace;
 lParams.right = childWidth;
 lParams.bottom = lParams.top + childHeight;
 //取最大的，注意這里lineWidth是包括右側(cè)hSpace的，需要減掉 
 wrapWidth = Math.max(lineWidth - hSpace, childWidth); 
 // 重新開(kāi)啟新行，開(kāi)始記錄，可以看到行寬包括最右側(cè)hSpace 
 lineWidth = childWidth + hSpace;
 // 疊加當(dāng)前高度，同理，加上下側(cè)vSpace
 wrapHeight += lineHeight + vSpace;
 // 開(kāi)啟記錄下一行的高度 
 lineHeight = childHeight; 
 } else {
 //記錄每一個(gè)標(biāo)簽坐標(biāo)，為onLayout做準(zhǔn)備
 lParams.left = lineWidth;
 lParams.top = wrapHeight;
 lParams.right = lParams.left + childWidth;
 lParams.bottom = lParams.top + childHeight;
 //在本行追加標(biāo)簽，累加值到lineWidth,lineHeight取最大高度 
 lineWidth += childWidth + hSpace;
 lineHeight = Math.max(lineHeight, childHeight);
 } 
 // 如果是最后一個(gè)
 if (i == childCount - 1) {
 //將當(dāng)前記錄的最大寬度和當(dāng)前l(fā)ineWidth做比較,取較大值
 wrapWidth = Math.max(wrapWidth, lineWidth - hSpace);
 //布局高加上最后一行高
 wrapHeight += lineHeight; 
 } 
 } 
 setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : wrapWidth, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : wrapHeight); 
 }

使用FlowLayout

直接看xml吧，一看便知：

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

 <com.hx.flowlayout.FlowLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="10dp"
 attr:hSpace="20"
 attr:vSpace="10">

 <TextView
 style="@style/flow_text_style_1"
 android:text="標(biāo)簽" />

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

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

 <TextView
 style="@style/flow_text_style_1"
 android:text="程序猿" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="Android" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="Java" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="ViewGroup" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="FlowLayout" />
 </com.hx.flowlayout.FlowLayout>

 <com.hx.flowlayout.FlowLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="10dp"
 attr:hSpace="20"
 attr:vSpace="10">

 <TextView
 style="@style/flow_text_style_2"
 android:text="標(biāo)簽" />

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

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

 <TextView
 style="@style/flow_text_style_2"
 android:text="程序猿" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="Android" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="Java" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="ViewGroup" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="FlowLayout" />
 </com.hx.flowlayout.FlowLayout>
</LinearLayout>

這里寫(xiě)的比較啰嗦，所有TextView都是寫(xiě)在xml里面的，當(dāng)然我們也可以通過(guò)Java代碼來(lái)動(dòng)態(tài)添加。

再來(lái)看看style吧，這里我們定義了兩種不同的風(fēng)格，具體見(jiàn)下面：

 <style name="flow_text_style_1">
 <item name="android:layout_width">wrap_content</item>
 <item name="android:layout_height">wrap_content</item>
 <item name="android:background">@drawable/flow_text_bg_1</item>
 <item name="android:textColor">#ffffff</item>
 <item name="android:textSize">16sp</item>
 </style>

 <style name="flow_text_style_2">
 <item name="android:layout_width">wrap_content</item>
 <item name="android:layout_height">wrap_content</item>
 <item name="android:background">@drawable/flow_text_bg_2</item>
 <item name="android:textColor">#4B0082</item>
 <item name="android:textSize">20sp</item>
 </style>

找到background我們?cè)龠M(jìn)去看看，這里使用的是shapeDrawable，之后我會(huì)寫(xiě)一些關(guān)于shapeDrawable的文章：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 
 <solid android:color="#FFFFFF"/> 
 <corners android:radius="40dp"/> 
 <stroke android:color="#C9C9C9" android:width="2dp"/> 
 <padding 
 android:bottom="2dp" 
 android:left="10dp" 
 android:right="10dp" 
 android:top="2dp" /> 
</shape>

效果圖如下：