Android简单实现自定义流式布局的方法

本文实例讲述了android简单实现自定义流式布局的方法。分享给大家供大家参考，具体如下：

首先来看一下 手淘hd - 商品详情 - 选择商品属性 页面的ui

商品有很多尺码，而且展现每个尺码所需要的view的大小也不同（主要是宽度），所以在从服务器端拉到数据之前，展现所有尺码所需要的行数和每一行的个数都无法确定，因此不能直接使用gridview或listview。

如果使用linearlayout呢？

一个linearlayout只能显示一行，如果要展示多行，则每一行都要new一个linearlayout出来，而且还必须要计算出每一个linearlayout能容纳多少个尺码对应的view，实现起来也会比较复杂。

其实要实现这个功能，只需要借鉴一下css3的 就可以了。

要实现一个android版本的flexbox，原理非常简单，为了与android的命名规范保持一致，我们称之为flowlayout。

1. 首先新建一个flowlayout类，继承自viewgroup
2. 在onmeasure中根据 child views 计算出flowlayout高度
3. 在onlayout中对child views 的进行布局（layout）

下面只列出了最核心的代码片段，完整代码已经放到github上－androidflowlayout，欢迎fork。

在onmeasure中计算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();
  // 计算当前行的高度（当前行所有子view中最高的那个）
  lineheight = math.max(childheight, lineheight);
  // 把当前child view放到上一个child view的右边，如果放不下，则换行
  if (childleft + childwidth + paddingright > mywidth) {
    childleft = paddingleft;
    childtop += mverticalspacing + lineheight;
    lineheight = childheight;
  } else {
    childleft += childwidth + mhorizontalspacing;
  }
}
int wantedheight = childtop + lineheight + paddingbottom;
// 计算flowlayout所需要高度
setmeasureddimension(mywidth, resolvesize(wantedheight, heightmeasurespec));

在onlayout中对child views进行布局

代码与onmeasure非常类似，只需要根据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;
  }
  // 关键代码
  childview.layout(childleft, childtop, childleft + childwidth, childtop + childheight);
  childleft += childwidth + mhorizontalspacing;
}

完整版代码已经放到github－flowlayout，打出来的aar包已经上传到了bintray，使用方式非常简单，只需要在项目（project）对应的build.gradle中添加一条dependency即可。

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

把aar包上传到 jcenter

具体做法可参考
打包脚本可参考 flowlayout/build.gradle

更多关于android相关内容感兴趣的读者可查看本站专题：《android布局layout技巧总结》、《android视图view技巧总结》、《android操作xml数据技巧总结》、《android编程之activity操作技巧总结》、《android资源操作技巧汇总》、《android文件操作技巧汇总》、《android操作sqlite数据库技巧总结》、《android操作json格式数据技巧总结》、《android数据库操作技巧总结》、《android编程开发之sd卡操作方法汇总》、《android开发入门与进阶教程》及《android控件用法总结》

希望本文所述对大家android程序设计有所帮助。