经过上篇的铺垫,这篇就开始正式开始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>
下面看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>
二、提取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);
- }
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);
- ………………
- }
先申请几个变量:
- 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);
- }
- }
- 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;
这里一定要注意的是:在调用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上:
- lineHeight = Math.max(lineHeight,childHeight);
- lineWidth += childWidth;
- width = Math.max(lineWidth,width);
- height += lineHeight;
- lineHeight = childHeight;
- lineWidth = childWidth;
- //上面if语句的else部分
- }else{
- // 否则累加值lineWidth,lineHeight取最大高度
- lineHeight = Math.max(lineHeight,childHeight);
- lineWidth += childWidth;
- }
- //最后一行是不会超出width范围的,所以要单独处理
- if (i == count -1){
- height += lineHeight;
- width = Math.max(width,lineWidth);
- }
- 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坐标
- ………………
- }
- 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;
- }
- 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{
- // 否则累加值lineWidth,lineHeight取最大高度
- lineHeight = Math.max(lineHeight,childHeight);
- lineWidth += childWidth;
- }
需要非常注意的是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);
- //将left置为下一子控件的起始点
- left+=childWidth;
- 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;
- }
- }