热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

Android自定义ViewGroup之FlowLayout(三)

这篇文章主要为大家详细介绍了Android自定义ViewGroup之FlowLayout,常用于关键字标签,搜索热词列表等功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本篇继续来讲自定义ViewGroup,给大家带来一个实例:FlowLayout。何为FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行,所以也叫流式布局。Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图:


定义FlowLayout

LayoutParams,onLayout的写法都和上一篇讲WaterfallLayout一模一样,在此不再赘述了,没看过的可以参照上一篇Android自定义ViewGroup(二)之WaterfallLayout。
在这里主要说的是onMeasure方法,注释见下方:

 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
 super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 // 获得它的父容器为它设置的测量模式和大小 
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); 
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); 
 int modeWidth = MeasureSpec.getMode(widthMeasureSpec); 
 int modeHeight = MeasureSpec.getMode(heightMeasureSpec); 

 int childCount = getChildCount();
 // 如果是wrap_content情况下,记录宽和高 
 int wrapWidth = 0; 
 int wrapHeight = 0; 
 //记录每一行的宽度,width不断取最大宽度 
 int lineWidth = 0; 
 //每一行的高度,累加至height 
 int lineHeight = 0;

 // 遍历每个子元素 
 for (int i = 0; i  sizeWidth) {
 //记录新行头一个标签坐标,为onLayout做准备
 lParams.left = 0;
 lParams.top = wrapHeight + lineHeight + vSpace;
 lParams.right = childWidth;
 lParams.bottom = lParams.top + childHeight;
 //取最大的,注意这里lineWidth是包括右侧hSpace的,需要减掉 
 wrapWidth = Math.max(lineWidth - hSpace, childWidth); 
 // 重新开启新行,开始记录,可以看到行宽包括最右侧hSpace 
 lineWidth = childWidth + hSpace;
 // 叠加当前高度,同理,加上下侧vSpace
 wrapHeight += lineHeight + vSpace;
 // 开启记录下一行的高度 
 lineHeight = childHeight; 
 } else {
 //记录每一个标签坐标,为onLayout做准备
 lParams.left = lineWidth;
 lParams.top = wrapHeight;
 lParams.right = lParams.left + childWidth;
 lParams.bottom = lParams.top + childHeight;
 //在本行追加标签,累加值到lineWidth,lineHeight取最大高度 
 lineWidth += childWidth + hSpace;
 lineHeight = Math.max(lineHeight, childHeight);
 } 
 // 如果是最后一个
 if (i == childCount - 1) {
 //将当前记录的最大宽度和当前lineWidth做比较,取较大值
 wrapWidth = Math.max(wrapWidth, lineWidth - hSpace);
 //布局高加上最后一行高
 wrapHeight += lineHeight; 
 } 
 } 
 setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : wrapWidth, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : wrapHeight); 
 }

使用FlowLayout

直接看xml吧,一看便知:



 

 

 

 

 

 

 

 

 
 

 

 

 

 

 

 

 

 

 
 

这里写的比较啰嗦,所有TextView都是写在xml里面的,当然我们也可以通过Java代码来动态添加。

再来看看style吧,这里我们定义了两种不同的风格,具体见下面:

 

 

找到background我们再进去看看,这里使用的是shapeDrawable,之后我会写一些关于shapeDrawable的文章:

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
  
  
  
  
 

 效果图如下:

源码下载:http://xiazai.jb51.net/201609/yuanma/Android-FlowLayout(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
author-avatar
fly-fox
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有