快捷導(dǎo)航

Android簡(jiǎn)單實(shí)現(xiàn)自定義流式布局的方法

更新時(shí)間：2016年07月27日 17:10:47 作者：FeeLang

這篇文章主要介紹了Android簡(jiǎn)單實(shí)現(xiàn)自定義流式布局的方法,結(jié)合實(shí)例形式分析了Android流式布局的原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了Android簡(jiǎn)單實(shí)現(xiàn)自定義流式布局的方法。分享給大家供大家參考，具體如下：

首先來看一下手淘HD - 商品詳情 - 選擇商品屬性頁(yè)面的UI

商品有很多尺碼，而且展現(xiàn)每個(gè)尺碼所需要的View的大小也不同（主要是寬度），所以在從服務(wù)器端拉到數(shù)據(jù)之前，展現(xiàn)所有尺碼所需要的行數(shù)和每一行的個(gè)數(shù)都無法確定，因此不能直接使用GridView或ListView。

如果使用LinearLayout呢？

一個(gè)LinearLayout只能顯示一行，如果要展示多行，則每一行都要new一個(gè)LinearLayout出來，而且還必須要計(jì)算出每一個(gè)LinearLayout能容納多少個(gè)尺碼對(duì)應(yīng)的View，實(shí)現(xiàn)起來也會(huì)比較復(fù)雜。

其實(shí)要實(shí)現(xiàn)這個(gè)功能，只需要借鑒一下CSS3的flex-box 就可以了。

要實(shí)現(xiàn)一個(gè)Android版本的flexbox，原理非常簡(jiǎn)單，為了與Android的命名規(guī)范保持一致，我們稱之為FlowLayout。

1. 首先新建一個(gè)FlowLayout類，繼承自ViewGroup
2. 在onMeasure中根據(jù) child views 計(jì)算出FlowLayout高度
3. 在onLayout中對(duì)child views 的進(jìn)行布局（layout）

下面只列出了最核心的代碼片段，完整代碼已經(jīng)放到Github上－AndroidFlowLayout，歡迎fork。

在onMeasure中計(jì)算FlowLayout的高度

// 遍歷所有的子View
for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
  View childView = getChildAt(i);
  // measure子View，并獲取它的寬度和高度
  LayoutParams childLayoutParams = childView.getLayoutParams();
  childView.measure(
      getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, childLayoutParams.width),
      getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, childLayoutParams.height));
  int childWidth = childView.getMeasuredWidth();
  int childHeight = childView.getMeasuredHeight();
  // 計(jì)算當(dāng)前行的高度（當(dāng)前行所有子View中最高的那個(gè)）
  lineHeight = Math.max(childHeight, lineHeight);
  // 把當(dāng)前child view放到上一個(gè)child view的右邊，如果放不下，則換行
  if (childLeft + childWidth + paddingRight > myWidth) {
    childLeft = paddingLeft;
    childTop += mVerticalSpacing + lineHeight;
    lineHeight = childHeight;
  } else {
    childLeft += childWidth + mHorizontalSpacing;
  }
}
int wantedHeight = childTop + lineHeight + paddingBottom;
// 計(jì)算FlowLayout所需要高度
setMeasuredDimension(myWidth, resolveSize(wantedHeight, heightMeasureSpec));

在onLayout中對(duì)child views進(jìn)行布局

代碼與onMeasure非常類似，只需要根據(jù)child view的寬度和高度放到指定位置即可。

for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
  View childView = getChildAt(i);
  if (childView.getVisibility() == View.GONE) {
    continue;
  }
  int childWidth = childView.getMeasuredWidth();
  int childHeight = childView.getMeasuredHeight();
  lineHeight = Math.max(childHeight, lineHeight);
  if (childLeft + childWidth + paddingRight > myWidth) {
    childLeft = paddingLeft;
    childTop += mVerticalSpacing + lineHeight;
    lineHeight = childHeight;
  }
  // 關(guān)鍵代碼
  childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
  childLeft += childWidth + mHorizontalSpacing;
}

完整版代碼已經(jīng)放到Github－FlowLayout，打出來的aar包已經(jīng)上傳到了bintray，使用方式非常簡(jiǎn)單，只需要在項(xiàng)目（project）對(duì)應(yīng)的build.gradle中添加一條dependency即可。

compile 'com.liangfeizc:flowlayout:1.0.0@aar'

把a(bǔ)ar包上傳到 jCenter

具體做法可參考 publishing gradle android library to jcenter
打包腳本可參考 flowlayout/build.gradle