自定义控件三部曲视图篇(二)——FlowLayout自适应容器实现
来源:互联网 发布:数据的预处理包括 编辑:程序博客网 时间:2024/06/18 17:45
前言:我最大的梦想,就是有一天,等老了坐在摇椅上回望一生,有故事给孩子们讲……。
相关文章:
《Android自定义控件三部曲文章索引》:http://blog.csdn.net/harvic880925/article/details/50995268
经过上篇的铺垫,这篇就开始正式开始FlowLayout的开发啦,还是先给大家上上效果:
从效果图中可以看到,底部container的布局方式应该是layout_width="match_parent",layout_height="wrap_content";
好了,废话不多说了,下面开始进入正规。
一、XML布局
从布局图中可以看到,FlowLayout中包含了很多TextView.难度不大,布局代码如下:先定义一个style,这是为FlowLayout中的TextView定义的:
<style name="text_flag_01"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_margin">4dp</item> <item name="android:background">@drawable/flag_01</item> <item name="android:textColor">#ffffff</item></style>注意,注意!!!我们这里定义了margin,还记得上篇中怎么样提取Margin值吗?重写generateLayoutParams()函数。
下面看activity_main.xml的布局代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.example.harvic.myapplication.FlowLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ff00ff"> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="Welcome" android:textColor="#43BBE7" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="IT工程师" android:textColor="#43BBE7" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="我真是可以的" android:textColor="#43BBE7" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="你觉得呢" android:textColor="#43BBE7" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="不要只知道挣钱" android:textColor="#43BBE7" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="努力ing" android:textColor="#43BBE7" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="I thick i can" android:textColor="#43BBE7" /> </com.example.harvic.myapplication.FlowLayout></LinearLayout>这里注意两点,FlowLayout的android:layout_width设置为"match_parent",android:layout_height设置为""wrap_content";同时,我们为FlowLayout添加背景来明显看出我们计算出来的所占区域大小。
二、提取margin与onMeasure()重写
1、提取margin
上篇我们讲过要提取margin,就一定要重写generateLayoutParams
@Overrideprotected LayoutParams generateLayoutParams(LayoutParams p){ return new MarginLayoutParams(p);}@Overridepublic LayoutParams generateLayoutParams(AttributeSet attrs){ return new MarginLayoutParams(getContext(), attrs);}@Overrideprotected LayoutParams generateDefaultLayoutParams(){ return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);}具体为什么我们就不再讲了,上篇已经讲的非常熟悉了,下面就看看如何在onMeasure()中计算当前container所占的位置大小。
2、重写onMeasure()——计算当前FlowLayout所占的宽高
这里就要重写onMeasure()函数,在其中计算所有当前container所占的大小。要做FlowLayout,首先涉及下面几个问题:
(1)何时换行
从效果图中可以看到,FlowLayout的布局是一行行的,如果当前行已经放不下下一个控件,那就把这个控件移到下一行显示。所以我们要有个变量来计算当前行已经占据的宽度,以判断剩下的空间是否还能容得下下一个控件。
(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所占宽度然后开始计算:(先贴出代码,再细讲)
int count = getChildCount();for (int i=0;i<count;i++){ 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; if (lineWidth + childWidth > measureWidth){ //需要换行 width = Math.max(lineWidth,childWidth); height += lineHeight; //因为由于盛不下当前控件,而将此控件调到下一行,所以将此控件的高度和宽度初始化给lineHeight、lineWidth lineHeight = childHeight; lineWidth = childWidth; }else{ // 否则累加值lineWidth,lineHeight取最大高度 lineHeight = Math.max(lineHeight,childHeight); lineWidth += childWidth; } //最后一行是不会超出width范围的,所以要单独处理 if (i == count -1){ height += lineHeight; width = Math.max(width,lineWidth); }}在整个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()才能获取值。
下面就是判断当前控件是否换行及计算出最大高度和宽度了:
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);完整的代码如下:
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); int lineWidth = 0; int lineHeight = 0; int height = 0; int width = 0; int count = getChildCount(); for (int i=0;i<count;i++){ 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; 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; } //最后一行是不会超出width范围的,所以要单独处理 if (i == count -1){ height += lineHeight; width = Math.max(width,lineWidth); } } //当属性是MeasureSpec.EXACTLY时,那么它的高度就是确定的, // 只有当是wrap_content时,根据内部控件的大小来确定它的大小时,大小是不确定的,属性是AT_MOST,此时,就需要我们自己计算它的应当的大小,并设置进去 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坐标 ………………}然后就是计算每个控件的top坐标和left坐标,然后调用layout(int left,int top,int right,int bottom)来布局每个子控件,代码如下:(先列出来全部代码,然后再细讲)
for (int i=0; i<count;i++){ View child = getChildAt(i); MarginLayoutParams lp = (MarginLayoutParams) child .getLayoutParams(); int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin; int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin; if (childWidth + lineWidth >getMeasuredWidth()){ //如果换行 top += lineHeight; left = 0; lineHeight = childHeight; lineWidth = childWidth; }else{ lineHeight = Math.max(lineHeight,childHeight); lineWidth += childWidth; } //计算childView的left,top,right,bottom int lc = left + lp.leftMargin; int tc = top + lp.topMargin; int rc =lc + child.getMeasuredWidth(); int bc = tc + child.getMeasuredHeight(); child.layout(lc, tc, rc, bc); //将left置为下一子控件的起始点 left+=childWidth;}(1)首先,与onMeasure()一样,先计算出当前孩子的宽和高:
View child = getChildAt(i);MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;(2)然后根据是否要换行来计算当行控件的top坐标和left坐标:
if (childWidth + lineWidth >getMeasuredWidth()){ //如果换行,当前控件将跑到下一行,从最左边开始,所以left就是0,而top则需要加上上一行的行高,才是这个控件的top点; top += lineHeight; left = 0; //同样,重新初始化lineHeight和lineWidth lineHeight = childHeight; lineWidth = childWidth;}else{ // 否则累加值lineWidth,lineHeight取最大高度 lineHeight = Math.max(lineHeight,childHeight); lineWidth += childWidth;}在计算好left,top之后,然后分别计算出控件应该布局的上、下、左、右四个点坐标:
需要非常注意的是margin不是padding,margin的距离是不绘制的控件内部的,而是控件间的间隔!
int lc = left + lp.leftMargin;//左坐标+左边距是控件的开始位置int tc = top + lp.topMargin;//同样,顶坐标加顶边距int rc =lc + child.getMeasuredWidth();int bc = tc + child.getMeasuredHeight();child.layout(lc, tc, rc, bc);最后,计算下一坐标的位置:由于在换行时才会变更top坐标,所以在一个控件绘制结束时,只需要变更left坐标即可:
//将left置为下一子控件的起始点left+=childWidth;到这里就结束了,onLayout的完整代码如下:
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; for (int i=0; i<count;i++){ View child = getChildAt(i); MarginLayoutParams lp = (MarginLayoutParams) child .getLayoutParams(); int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin; int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin; if (childWidth + lineWidth >getMeasuredWidth()){ //如果换行,当前控件将跑到下一行,从最左边开始,所以left就是0,而top则需要加上上一行的行高,才是这个控件的top点; top += lineHeight; left = 0; //同样,重新初始化lineHeight和lineWidth lineHeight = childHeight; lineWidth = childWidth; }else{ lineHeight = Math.max(lineHeight,childHeight); lineWidth += childWidth; } //计算childView的left,top,right,bottom int lc = left + lp.leftMargin; int tc = top + lp.topMargin; int rc =lc + child.getMeasuredWidth(); int bc = tc + child.getMeasuredHeight(); child.layout(lc, tc, rc, bc); //将left置为下一子控件的起始点 left+=childWidth; }}好啦,有关FlowLayout的系列文章到这里就结束了,这里主要涉及到ViewGroup的绘制流程的相关知识。希望大家能掌握。这篇文章感觉有点乱,难度倒是不大,凡是跟代码有关的东东总是很难驾驭,可能还是语文不行啊,大家见量,多看看源码吧,理解了上一篇之后,这篇难度不大。
1、《Android学习笔记]View的measure过程学习》
2、《Android中measure过程、WRAP_CONTENT详解以及xml布局文件解析流程浅析(下)》
3、《【Android】ViewGroup全面分析》
4、《安卓冷知识:LayoutParams》
5、《MeasureSpec介绍及使用详解》
6、《Android 自定义ViewGroup 实战篇 -> 实现FlowLayout》
7、《Android中View绘制流程以及invalidate()等相关方法分析》
8、《android中onMeasure初看,深入理解布局之一!》
9、《MeasureSpec中的测量模式和match_parent、wrap_content是什么对应关系?》
10、《Android视图绘制流程完全解析,带你一步步深入了解View(二)》
11、《通过重写ViewGroup学习onMeasure()和onLayout()方法》
12、《Android开发实践:自定义ViewGroup的onLayout()分析》
如果本文有帮到你,记得加关注哦
源码下载地址:http://download.csdn.net/detail/harvic880925/8928371
请大家尊重原创者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/47035455 ,谢谢
- 自定义控件三部曲视图篇(二)——FlowLayout自适应容器实现
- 自定义控件之视图篇(二)—— FlowLayout自适应容器实现
- 自定义控件之视图篇:FlowLayout自适应容器实现
- 自定义控件三部曲视图篇(三)——瀑布流容器WaterFallLayout实现
- 自定义控件三部曲视图篇(一)——测量与布局
- FlowLayout详解(二)——FlowLayout实现
- FlowLayout详解(二)——FlowLayout实现
- 自定义控件三部曲之绘图篇(十四)——Canvas与图层(二)
- (4.1.23.4)自定义控件三部曲之动画篇(二)——Interpolator插值器
- 自定义控件三部曲之绘图篇(十四)——Canvas与图层(二)
- 自定义控件三部曲之动画篇(二)——Interpolator插值器
- 自定义控件三部曲之动画篇(六)——ValueAnimator高级进阶(二)
- 自定义控件三部曲之绘图篇(十一)——Paint之setXfermode(二)
- 自定义控件三部曲之动画篇(二)——Interpolator插值器
- 自定义控件三部曲之动画篇(六)——ValueAnimator高级进阶(二)
- 自定义控件三部曲之绘图篇(十一)——Paint之setXfermode(二)
- 自定义控件三部曲之动画篇(二)——Interpolator插值器
- 自定义控件三部曲之动画篇(二)——Interpolator插值器
- 净空法师:年轻时候好,是你前生所修的
- C++ map 的基本操作和使用
- Subversion+Apache+svnmanager安装与配置
- JasperReport报表开发之转置交叉表
- 深入理解Memcached原理
- 自定义控件三部曲视图篇(二)——FlowLayout自适应容器实现
- sql Server 2008 express 版登录名
- HTML禁用Flash文件右键
- 顺序表的各种操作以及合并
- QT中的.pro文件
- MySQL数据库引擎介绍、区别、创建和性能测试的深入分析
- 跨域资源共享(CORS)
- hdu 5303 Delicious Apples(2015 Multi-University Training Contest 2)
- 使用sublime text的一些问题