android 热搜词 布局,Android FlowLayout流式布局打造热门标签(高仿抖音热搜)
需要先学习下面2个内容
1.已经基本给大家介绍了如何自定义ViewGroup,如果你还不了解
2.宽高的计算
一、XML布局
从布局图中可以看到,FlowLayout中包含了很多TextView.难度不大,布局代码如下:
先定义一个style,这是为FlowLayout中的TextView定义的:
wrap_content
wrap_content
4dp
@drawable/flag_01
#ffffff
---------------------
二、提取margin与onMeasure()重写
1、提取margin
上篇我们讲过要提取margin,就一定要重写generateLayoutParams
@Override
protected LayoutParams generateLayoutParams(LayoutParams p)
{
return new MarginLayoutParams(p);
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs)
{
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected LayoutParams generateDefaultLayoutParams()
{
return new MarginLayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
}
具体为什么我们就不再讲了,上篇已经讲的非常熟悉了,下面就看看如何在onMeasure()中计算当前container所占的位置大小
---------------------
2、重写onMeasure()——计算当前FlowLayout所占的宽高
这里就要重写onMeasure()函数,在其中计算所有当前container所占的大小。
首先得到其父容器传入的测量模式和宽高的计算值,然后遍历所有的childView,使用measureChild方法对所有的childView进行测量。然后根据所有childView的测量得出的宽和高得到该ViewGroup如果设置为wrap_content时的宽和高。最后根据模式,如果是MeasureSpec.EXACTLY则直接使用父ViewGroup传入的宽和高,否则设置为自己计算的宽和高
---------------------
要做FlowLayout,首先涉及下面几个问题:
(1)何时换行(计算所有控件的宽度和屏幕宽度比较,还有margin值)
从效果图中可以看到,FlowLayout的布局是一行行的,如果当前行已经放不下下一个控件,那就把这个控件移到下一行显示。所以我们要有个变量来计算当前行已经占据的宽度,以判断剩下的空间是否还能容得下下一个控件。
int childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin;
(2)、如何得到FlowLayout的宽度(最大值)
FlowLayout的宽度是所有行宽度的最大值,所以我们要记录下每一行的所占据的宽度值,进而找到所有值中的最大值。
(3)、如何得到FlowLayout的高度(总和)
很显然,FlowLayout的高度是每一行高度的总和,而每一行的高度则是取该行中所有控件高度的最大值。
原理到这里就讲完了,下面看看代码:
(1)首先,刚进来的时候是利用MeasureSpec获取系统建议的数值的模式
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
………………
}
(2)然后,是计算FlowLayout所占用的空间大小
先申请几个变量:
int lineWidth = 0;//记录每一行的宽度
int lineHeight = 0;//记录每一行的高度
int height = 0;//记录整个FlowLayout所占高度
int width = 0;//记录整个FlowLayout所占宽度
然后开始计算:(先贴出代码,再细讲
---------------------
在整个For循环遍历每个控件时,先计算每个子控件的宽和高,代码如下:
View child = getChildAt(i);
measureChild(child,widthMeasureSpec,heightMeasureSpec);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin;
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
注意我们在计算控件高度和宽度时,要加上上、下、左、右的margin值。
这里一定要注意的是:在调用child.getMeasuredWidth()、child.getMeasuredHeight()之前,一定要调用measureChild(child,widthMeasureSpec,heightMeasureSpec);!!!!在上篇中我们讲过,在onMeasure()之后才能调用getMeasuredWidth()获得值;同样,只有调用onLayout()后,getWidth()才能获取值。
---------------------
注意我们在计算控件高度和宽度时,要加上上、下、左、右的margin值。
这里一定要注意的是:在调用child.getMeasuredWidth()、child.getMeasuredHeight()之前,一定要调用measureChild(child,widthMeasureSpec,heightMeasureSpec);!!!!在上篇中我们讲过,在onMeasure()之后才能调用getMeasuredWidth()获得值;同样,只有调用onLayout()后,getWidth()才能获取值。
下面就是判断当前控件是否换行及计算出最大高度和宽度了:
if (lineWidth + childWidth > measureWidth){
//需要换行
width = Math.max(lineWidth,width);
height += lineHeight;
//因为由于盛不下当前控件,而将此控件调到下一行,所以将此控件的高度和宽度初始化给lineHeight、lineWidth
lineHeight = childHeight;
lineWidth = childWidth;
}else{
// 否则累加值lineWidth,lineHeight取最大高度
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
由于lineWidth是用来累加当前行的总宽度的,所以当lineWidth + childWidth > measureWidth时就表示已经容不下当前这个控件了,这个控件就需要转到下一行;我们先看else部分,即不换行时怎么办?
在不换行时,计算出当前行的最大高度,同时将当前子控件的宽度累加到lineWidth上:
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
当需要换行时,首先将当前行宽lineWidth与目前的最大行宽width比较计算出最新的最大行宽width,作为当前FlowLayout所占的宽度,还要将行高lineHeight累加到height变量上,以便计算出FlowLayout所占的总高度。
width = Math.max(lineWidth,width);
height += lineHeight;
下面就是重新初始化lineWidth和lineHeight了,由于换行,那当前控件就是下一行控件的第一个控件,那么当前行的行高就是这个控件的高,当前行的行宽就是这个控件的宽度值了:
lineHeight = childHeight;
lineWidth = childWidth;
非常需要注意的是,当计算最后一行时,由于肯定是不会超过行宽的,而我们在for循环中,当不超过行宽中只做了下面处理:
//上面if语句的else部分
}else{
// 否则累加值lineWidth,lineHeight取最大高度
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
在这里,我们只计算了行宽和行高,但并没有将其width和height做计算,所以,当是最后一行的最后一个控件时,我们要单独运算width、height:
//最后一行是不会超出width范围的,所以要单独处理
if (i == count -1){
height += lineHeight;
width = Math.max(width,lineWidth);
}
(3)最后,通过setMeasuredDimension()设置到系统中:
setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth
: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight
: height)
---------------------
3、重写onLayout()——布局所有子控件
在onLayout()中就是一个个布局子控件了,由于控件要后移和换行,所以我们要标记当前控件的left坐标和top坐标,所以我们要先申请下面几个变量:
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
int lineWidth = 0;//累加当前行的行宽
int lineHeight = 0;//当前行的行高
int top=0,left=0;//当前坐标的top坐标和left坐标
………………
}
参考博客:
https://blog.csdn.net/lmj623565791/article/details/38352503(张鸿翔)
https://blog.csdn.net/harvic880925/article/details/470354559(启舰)
android 热搜词 布局,Android FlowLayout流式布局打造热门标签(高仿抖音热搜)相关推荐
- 4.布局:FlowLayout流式布局(Java swing 入门)
FlowLayout(流式布局管理器)是 JPanel 和 JApplet 的默认布局管理器.FlowLayout 会将组件按照从上到下.从左到右的放置规律逐行进行定位.与其他布局管理器不同的是,Fl ...
- Android FlowLayout 流式布局
FlowLayout 流式布局 Android 流式布局控件,实现自动换行,操出范围可以滑动功能,未使用控件复用功能,所以不应该有太多的子控件. 主要包含功能: 流式布局,自动换行 使用Adapter ...
- 自定义 FlowLayout流式布局搜索框 加 GreenDao存取搜索记录,使用RecyclerView展示
输入框布局的shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android ...
- Swing布局管理器--流式布局管理器
流式布局管理器 FlowLayout流式布局管理器,是JPanel和JApplet的默认布局管理 FlowLayout会将组件从上到下,从左到右的放置规律逐渐进行定位,直到占据这一行所在的空间,才会向 ...
- CSS的三大布局方式(流式布局,浮动布局和层布局)
文章目录 前言 一.标准文档流 二.三种布局方式 1.流式布局 2.浮动布局 (1)字围效果 (2)圣杯布局 3.层布局 定位的分类: (1) 相对定位 position:relative (2) 绝 ...
- Android FlowLayout流式布局
最近使用APP的时候经常看到有 这种流式布局 ,今天我就跟大家一起来动手撸一个这种自定义控件. 首先说一下自定义控件的流程: 自定义控件一般要么继承View要么继承ViewGroup View的自定义 ...
- android 搜索历史流布局,FlowLayout流式布局实现搜索清空历史记录
本文实例为大家分享了FlowLayout实现搜索清空历史记录的具体代码,供大家参考,具体内容如下 效果图:点击搜索框将搜索的历史在流式布局中展示出来,清空历史记录就会将历史清空,每次搜索后都存入sp中 ...
- Flowlayout流式布局使用(轻量级)
Flowlayout属于自定义流式布局,意思就是说从左上角开始添加原件,依次往后排,第一行挤满了就换一行接着排. 本文所使用的FlowLayout来自于鸿洋大神的框架. 只取了一个自定义控件,没有鸿洋 ...
- FlowLayout流式布局实现搜索清空历史记录
效果图:点击搜索框将搜索的历史在流式布局中展示出来,清空历史记录就会将历史清空,每次搜索后都存入sp中,每次进入页面都先判断sp里是否有值并展示 首先需要导入一个module,下载地址:https:/ ...
最新文章
- 基于单例模式的日志输出(C++)
- 2019学习Python的10个原因
- 《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 二 NSMutableString
- 架构师课程之-haproxy专业级负载均衡软件权威讲解
- c语言交换两个变量的值
- Translating Embedding for Modeling Multi-relational Data
- 刚刚,国家新型互联网交换中心(以及新公司)正式成立!不止于降低网间结算费用...
- 牛客练习赛74 D CCA的图
- Hibernate 4.3 ORM工具
- Kali linux安装漏洞扫描工具Nessus指南
- 2013年5月7日---JS中的正则
- 解决设置了display:none的元素,会先展示再隐藏
- mysql 连接其他数据库_普通用户从其他主机连接MySQL数据库
- LIRe 源代码分析 7:算法类[以颜色布局为例]
- 罗格斯大学计算机科学排名,罗格斯大学计算机工程硕士专业排名读完这篇立即秒懂...
- 触动精灵手游脚本开发框架FreeGame源码
- 基于FPGA的光纤数据传输
- vlan端口隔离配置
- 进字节跳动了,年薪30w+
- 怎样在网上赚钱啊,小编告诉你6种赚钱方式!
热门文章
- 离线地图开发--BigeMap(离线地图服务器构建,支持百度、谷歌、高德等地图)
- oppor15版本android,【OPPO R15|R15梦镜版 AI智能拍照,让美更自然】报价_配置参数_图片-OPPO智能手机官网...
- Python windows脚本操作
- 【最新】原神:数据异常,完全卸载游戏并从官方渠道下载安装,错误码:31-4302
- wps流程图的箭头线的方向_如何恢复wps怎么制作流程图【操作方向】
- 独立站“弃购率”太高,做好这几点帮你提高30%转化率
- GNU C 对标准C语言的扩展(转载 懵懵懂懂)
- 在Windows下通过ssh挂载远程文件系统(网络驱动器)
- 《读大学究竟读什么》经典语句
- 看看自己是否具有创业者的潜质?