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程序设计有所帮助。

时间: 2024-09-17 01:47:59

Android简单实现自定义流式布局的方法的相关文章

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

本文实例讲述了Android简单实现自定义流式布局的方法.分享给大家供大家参考,具体如下: 首先来看一下 手淘HD - 商品详情 - 选择商品属性 页面的UI 商品有很多尺码,而且展现每个尺码所需要的View的大小也不同(主要是宽度),所以在从服务器端拉到数据之前,展现所有尺码所需要的行数和每一行的个数都无法确定,因此不能直接使用GridView或ListView. 如果使用LinearLayout呢? 一个LinearLayout只能显示一行,如果要展示多行,则每一行都要new一个Linear

Android自定义ViewGroup之实现FlowLayout流式布局_Android

整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/  一.FlowLayout介绍  所谓FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行.有点像所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图:  gi

Android自定义ViewGroup之实现FlowLayout流式布局

整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/  一.FlowLayout介绍  所谓FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行.有点像所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: git

Android中常见的热门标签的流式布局的实现

一.概述: 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出) 类似的自定义布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点: 1.流式布局的特点以及应用场景     特点:当上面一行的空间不够容纳新的TextView时候,     才开辟下一行的空间 原理图:     场景:主要用于关键词搜索或者热门标签等场景 2.自定义ViewGroup,重点重写下面

Android实现热门标签的流式布局_Android

一.概述: 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出) 类似的自定义布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点:1.流式布局的特点以及应用场景    特点:当上面一行的空间不够容纳新的TextView时候,     才开辟下一行的空间 原理图:        场景:主要用于关键词搜索或者热门标签等场景2.自定义ViewGroup,重点重写下面

Android实现热门标签的流式布局

一.概述: 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出) 类似的自定义布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点: 1.流式布局的特点以及应用场景     特点:当上面一行的空间不够容纳新的TextView时候,     才开辟下一行的空间 原理图: 场景:主要用于关键词搜索或者热门标签等场景 2.自定义ViewGroup,重点重写下面两个方法

Android流式布局实现历史搜索记录功能

最近在开发项目的时候,有一个需求是展示历史搜索记录 ,展示的样式是流式布局(就是根据内容自动换行).在网上看到了一个不错的类库跟大家分享一下 首先在AndroidStudio简历一个工程项目导入module类库,我会把项目demo方法GitHub上 说一下demo中的实现方式 在 activity_main.xml中 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android

java awt 布局 下面panel 尺寸已经设定好了,为什么不按照流式布局添加 而是尺寸变了

问题描述 java awt 布局 下面panel 尺寸已经设定好了,为什么不按照流式布局添加 而是尺寸变了 package huatu; import java.awt.*; import java.awt.image.BufferedImage; import javax.swing.BoxLayout; public class num1 { private Frame f=new Frame("绘图"); private Panel p=new Panel(); private

iOS 流式布局 UI 框架 CocoaUI 开源

CocoaUI 是一个强大的 iOS UI 框架,使用 Web 开发者熟悉的 HTML+CSS 流式布局方式,轻松地开发 iOS 原生 App 的界面.CocoaUI 的特性主要包括: 高效的原生界面, 非低效的 WebView 控件方式 自适应(Adaptive)动态流式布局, 轻松适配多种屏幕尺寸 采用简洁高效的 HTML+CSS 语法定义布局(Layout)和展现(Appearance) CocoaUI 的界面控件布局方式是流式布局方式,这种界面布局算法已经在 Web 领域得到验证, 具有