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

 更新时间:2016年07月27日 17:10:47   作者:FeeLang  
这篇文章主要介绍了Android简单实现自定义流式布局的方法,结合实例形式分析了Android流式布局的原理与实现技巧,需要的朋友可以参考下

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

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

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

如果使用LinearLayout呢?

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

其实要实现这个功能,只需要借鉴一下CSS3的flex-box 就可以了。

要实现一个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

具体做法可参考 publishing gradle android library to 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程序设计有所帮助。

相关文章

  • Android自定义view 你所需要知道的基本函数总结

    Android自定义view 你所需要知道的基本函数总结

    这篇文章主要介绍了Android自定义view 你所需要知道的基本函数的相关资料,需要的朋友可以参考下
    2017-02-02
  • Android ListView实现下拉顶部图片变大效果

    Android ListView实现下拉顶部图片变大效果

    这篇文章主要为大家详细介绍了Android ListView实现下拉顶部图片变大,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android基础知识之broadcast广播详解

    Android基础知识之broadcast广播详解

    这篇文章主要为大家详细介绍了Android基础知识之broadcast广播的相关资料,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • Android Studio引入FFmpeg的方法

    Android Studio引入FFmpeg的方法

    这篇文章主要介绍了Android Studio引入FFmpeg的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Android自定义scrollview实现回弹效果

    Android自定义scrollview实现回弹效果

    这篇文章主要为大家详细介绍了Android自定义scrollview实现回弹效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详谈Android从文件读取图像显示的效率问题

    详谈Android从文件读取图像显示的效率问题

    下面小编就为大家带来一篇详谈Android从文件读取图像显示的效率问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Android蓝牙通信聊天实现发送和接受功能

    Android蓝牙通信聊天实现发送和接受功能

    这篇文章主要为大家详细介绍了Android蓝牙通信聊天实现发送和接受功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Android自定义验证码输入框的方法实例

    Android自定义验证码输入框的方法实例

    这篇文章主要给大家介绍了关于Android自定义验证码输入框的相关资料,文中通过实例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • Android虚拟机Dalvik和ART科普

    Android虚拟机Dalvik和ART科普

    这篇文章主要为大家介绍了Android虚拟机Dalvik和ART科普详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 从源码剖析Android中的Intent组件

    从源码剖析Android中的Intent组件

    这篇文章主要介绍了Android中的Intent组件,作者从源码剖析了Intent如何实现组件间的切换,需要的朋友可以参考下
    2016-03-03

最新评论