一、概述：
在日常的app使用中，我們會(huì)在android 的app中看見 熱門標(biāo)簽等自動(dòng)換行的流式布局，今天，我們就來看看如何

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括武義網(wǎng)站建設(shè)、武義網(wǎng)站制作、武義網(wǎng)頁制作以及武義網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，武義網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到武義省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

自定義一個(gè)類似熱門標(biāo)簽?zāi)菢拥牧魇讲季职桑ā痢痢猎谙旅孀詈蠼o出）

類似的自定義布局。下面我們就來詳細(xì)介紹流式布局的應(yīng)用特點(diǎn)以及用的的技術(shù)點(diǎn)：

1.流式布局的特點(diǎn)以及應(yīng)用場(chǎng)景
    特點(diǎn)：當(dāng)上面一行的空間不夠容納新的TextView時(shí)候，
    才開辟下一行的空間

　原理圖：

    場(chǎng)景：主要用于關(guān)鍵詞搜索或者熱門標(biāo)簽等場(chǎng)景
2.自定義ViewGroup,重點(diǎn)重寫下面兩個(gè)方法

    1、onMeasure:測(cè)量子view的寬高，設(shè)置自己的寬和高

    2、onLayout:設(shè)置子view的位置

    onMeasure:根據(jù)子view的布局文件中屬性，來為子view設(shè)置測(cè)量模式和測(cè)量值
    測(cè)量=測(cè)量模式+測(cè)量值；

    測(cè)量模式有3種：
    EXACTLY：表示設(shè)置了精確的值，一般當(dāng)childView設(shè)置其寬、高為精確值、match_parent時(shí)，ViewGroup會(huì)將其設(shè)置為EXACTLY；
    AT_MOST：表示子布局被限制在一個(gè)最大值內(nèi)，一般當(dāng)childView設(shè)置其寬、高為wrap_content時(shí)，ViewGroup會(huì)將其設(shè)置為AT_MOST；
    UNSPECIFIED：表示子布局想要多大就多大，一般出現(xiàn)在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此種模式比較少見。
3.LayoutParams
    ViewGroup LayoutParams :每個(gè) ViewGroup 對(duì)應(yīng)一個(gè) LayoutParams; 即 ViewGroup -> LayoutParams
    getLayoutParams 不知道轉(zhuǎn)為哪個(gè)對(duì)應(yīng)的LayoutParams ,其實(shí)很簡(jiǎn)單，就是如下：
    子View.getLayoutParams 得到的LayoutParams對(duì)應(yīng)的就是 子View所在的父控件的LayoutParams;
    例如，LinearLayout 里面的子view.getLayoutParams ->LinearLayout.LayoutParams
    所以 咱們的FlowLayout 也需要一個(gè)LayoutParams，由于上面的效果圖是子View的 margin，
    所以應(yīng)該使用MarginLayoutParams。即FlowLayout->MarginLayoutParams

4.最后來看看實(shí)現(xiàn)的最終效果圖：

二、熱門標(biāo)簽的流式布局的實(shí)現(xiàn)：

1. 自定義熱門標(biāo)簽的ViewGroup實(shí)現(xiàn)

　根據(jù)上面的技術(shù)分析，自定義類繼承于ViewGroup，并重寫 onMeasure和onLayout等方法。具體實(shí)現(xiàn)代碼如下：

package com.czm.flowlayout;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
/**
* 
* @author caizhiming
* @created on 2015-4-13
*/
public class XCFlowLayout extends ViewGroup{

   //存儲(chǔ)所有子View
   private List> mAllChildViews = new ArrayList<>();
   //每一行的高度
   private List mLineHeight = new ArrayList<>();
   
   public XCFlowLayout(Context context) {
       this(context, null);
       // TODO Auto-generated constructor stub
   }
   public XCFlowLayout(Context context, AttributeSet attrs) {
       this(context, attrs, 0);
       // TODO Auto-generated constructor stub
   }
   public XCFlowLayout(Context context, AttributeSet attrs, int defStyle) {
       super(context, attrs, defStyle);
       // TODO Auto-generated constructor stub
   }
   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       // TODO Auto-generated method stub
       
       //父控件傳進(jìn)來的寬度和高度以及對(duì)應(yīng)的測(cè)量模式
       int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
       int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
       int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
       int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
       
       //如果當(dāng)前ViewGroup的寬高為wrap_content的情況
       int width = 0;//自己測(cè)量的 寬度
       int height = 0;//自己測(cè)量的高度
       //記錄每一行的寬度和高度
       int lineWidth = 0;
       int lineHeight = 0;
       
       //獲取子view的個(gè)數(shù)
       int childCount = getChildCount();
       for(int i = 0;i < childCount; i ++){
           View child = getChildAt(i);
           //測(cè)量子View的寬和高
           measureChild(child, widthMeasureSpec, heightMeasureSpec);
           //得到LayoutParams
           MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
           //子View占據(jù)的寬度
           int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
           //子View占據(jù)的高度
           int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
           //換行時(shí)候
           if(lineWidth + childWidth > sizeWidth){
               //對(duì)比得到最大的寬度
               width = Math.max(width, lineWidth);
               //重置lineWidth
               lineWidth = childWidth;
               //記錄行高
               height += lineHeight;
               lineHeight = childHeight;
           }else{//不換行情況
               //疊加行寬
               lineWidth += childWidth;
               //得到最大行高
               lineHeight = Math.max(lineHeight, childHeight);
           }
           //處理最后一個(gè)子View的情況
           if(i == childCount -1){
               width = Math.max(width, lineWidth);
               height += lineHeight;
           }
       }
       //wrap_content
       setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth : width,
               modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height);
       super.onMeasure(widthMeasureSpec, heightMeasureSpec);
   }
   
   @Override
   protected void onLayout(boolean changed, int l, int t, int r, int b) {
       // TODO Auto-generated method stub
       mAllChildViews.clear();
       mLineHeight.clear();
       //獲取當(dāng)前ViewGroup的寬度
       int width = getWidth();
       
       int lineWidth = 0;
       int lineHeight = 0;
       //記錄當(dāng)前行的view
       List lineViews = new ArrayList();
       int childCount = getChildCount();
       for(int i = 0;i < childCount; i ++){
           View child = getChildAt(i);
           MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
           int childWidth = child.getMeasuredWidth();
           int childHeight = child.getMeasuredHeight();
           
           //如果需要換行
           if(childWidth + lineWidth + lp.leftMargin + lp.rightMargin > width){
               //記錄LineHeight
               mLineHeight.add(lineHeight);
               //記錄當(dāng)前行的Views
               mAllChildViews.add(lineViews);
               //重置行的寬高
               lineWidth = 0;
               lineHeight = childHeight + lp.topMargin + lp.bottomMargin;
               //重置view的集合
               lineViews = new ArrayList();
           }
           lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
           lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);
           lineViews.add(child);
       }
       //處理最后一行
       mLineHeight.add(lineHeight);
       mAllChildViews.add(lineViews);
       
       //設(shè)置子View的位置
       int left = 0;
       int top = 0;
       //獲取行數(shù)
       int lineCount = mAllChildViews.size();
       for(int i = 0; i < lineCount; i ++){
           //當(dāng)前行的views和高度
           lineViews = mAllChildViews.get(i);
           lineHeight = mLineHeight.get(i);
           for(int j = 0; j < lineViews.size(); j ++){
               View child = lineViews.get(j);
               //判斷是否顯示
               if(child.getVisibility() == View.GONE){
                   continue;
               }
               MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
               int cLeft = left + lp.leftMargin;
               int cTop = top + lp.topMargin;
               int cRight = cLeft + child.getMeasuredWidth();
               int cBottom = cTop + child.getMeasuredHeight();
               //進(jìn)行子View進(jìn)行布局
               child.layout(cLeft, cTop, cRight, cBottom);
               left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
           }
           left = 0;
           top += lineHeight;
       }
       
   }
   /**
    * 與當(dāng)前ViewGroup對(duì)應(yīng)的LayoutParams
    */
   @Override
   public LayoutParams generateLayoutParams(AttributeSet attrs) {
       // TODO Auto-generated method stub
       
       return new MarginLayoutParams(getContext(), attrs);
   }
}

2.相關(guān)的布局文件：

引用自定義控件：

   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

          android:id="@+id/flowlayout"
       android:layout_width="match_parent"
       android:layout_height="match_parent" >

   

TextView的樣式文件：

   
   
          android:left="5dp"
       android:right="5dp"
       android:top="5dp"
       android:bottom="5dp" 
       />

三、使用該自定義布局控件類

最后，如何使用該自定義的熱門標(biāo)簽控件類呢？很簡(jiǎn)單，請(qǐng)看下面實(shí)例代碼：

package com.czm.flowlayout;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;
import android.view.ViewGroup.MarginLayoutParams;
import android.widget.TextView;
/**
* 
* @author caizhiming
* @created on 2015-4-13
*/
public class MainActivity extends Activity {

   private String mNames[] = {
           "welcome","android","TextView",
           "apple","jamy","kobe bryant",
           "jordan","layout","viewgroup",
           "margin","padding","text",
           "name","type","search","logcat"
   };
   private XCFlowLayout mFlowLayout;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       
       initChildViews();
       
   }
   private void initChildViews() {
       // TODO Auto-generated method stub
       mFlowLayout = (XCFlowLayout) findViewById(R.id.flowlayout);
       MarginLayoutParams lp = new MarginLayoutParams(
               LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
       lp.leftMargin = 5;
       lp.rightMargin = 5;
       lp.topMargin = 5;
       lp.bottomMargin = 5;
       for(int i = 0; i < mNames.length; i ++){
           TextView view = new TextView(this);
           view.setText(mNames[i]);
           view.setTextColor(Color.WHITE);
           view.setBackgroundDrawable(getResources().getDrawable(R.drawable.textview_bg));
           mFlowLayout.addView(view,lp);
       }
   }

}

四、×××

最后給出源碼的下載：http://download.csdn.net/detail/jczmdeveloper/8590113

此×××完之后，往往有個(gè)要點(diǎn)我們?nèi)菀缀雎?，那就是源碼的安全性問題，此處可點(diǎn)擊移動(dòng)應(yīng)用安全智能服務(wù)提供商愛加密的Android加密，源碼保護(hù)！