双十一到了,作为一个程序员除了买(bai)买(jia)买(duo)买(shou)之外,也不要忘了学习,今天我们来看Android的流式布局。 所谓流式布局指的是ViewGroup中同一行的宽度不足以容纳下一个子view时,进行换行处理,而不需要考虑子view的大小,每一行的高度以其中最高者为准。Talk is cheap, Show you the code。
自定义ViewGroup的三种方式:
- 通过继承现有的ViewGroup(比如LinearLayout)重写
onMeasure()
来修改已有的 ViewGroup的尺寸,比如你需要一个正方形的LinearLayout,你就可以在onMeasure()中先调用super.onMeasure()测量出原始高度,然后通过getMesureHeight(),getMesuseWidth()获得原始宽高,将他们的宽高设为一样就好了,调用setMeasuredDimension()就可以了,这么样是不是很简(ma)单(fan); - 重写
onMeasure()
来全新定制自定义View
的尺寸,同样也是onMeasure()中,这时你就可以根据自己需要是否调用super.onMeasure(),然后根据自己的算法,得出宽高,调用setMeasuredDimension()就可以了; - 重写
onMeasure()
和onLayout()
来全新定制自定义ViewGroup
的内部布局,这种方式不单单需要测量本身自己的宽高,还要根据需要计算每个子view的位置,稍微复杂一些,本次的流式布局就是通过这种方式实现的。
实现过程:
下面这张图是扔物线大神视频截图,这里直接拿来用,别顶,要脸!!
简单讲解一下整个过程:
大体上分为测量尺寸过程以及布局过程
测量尺寸过程:ViewGroup 的mesure()方法被父View调用,进而调用到 onMeasure() ,在onMeasuse()中会调用所有子 View 的 measure() 让它们进行自我测量,并根据子 View 计算出的希望的尺寸来计算出它们的实际尺寸和位置(注意是希望的尺寸,不是最终尺寸,比如ViewGroup 的宽为100dp,有一个子View的宽度为200dp,显然子View最多也只能是100dp的宽度)然后保存。同时,它也会根据子 View 的尺寸和位置来计算出自己的尺寸然后保存,到这里我们就确定了ViewGroup自身的希望尺寸,以及它的子View的希望尺寸,那么,具体字View怎么摆放呢?这就到了下一个阶段,布局阶段。
布局过程:VIewGrouplayout() 方法被父 View 调用,在 layout() 中它会取得父 View 传进来的自己的位置和尺寸,并且调用 onLayout() 来进行实际的内部布局ViewGroup 在 onLayout() 中会调用自己的所有子 View 的 layout() 方法,把它们的尺寸和位置传给它们,让子View完成布局。
光说不练假把式,Talk is cheap, Show you the code。
package com.example.administrator.xflowlayout;
/**
* Created by SharksLee on 2016/07/19
*/
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import java.util.HashMap;
import java.util.Map;
/**
* @SharksLee lishaojie
*/
public class XFlowLayout extends ViewGroup {
private int childHorizontalSpace;
private int childVerticalSpace;
private Map<Object, Location> mLocationMap;
public XFlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.XLFlowLayout);
mLocationMap = new HashMap<>();
if (attrArray != null) {
childHorizontalSpace = attrArray.getDimensionPixelSize(R.styleable.XLFlowLayout_childHorizontalSpace, 0);
childVerticalSpace = attrArray.getDimensionPixelSize(R.styleable.XLFlowLayout_childVerticalSpace, 0);
attrArray.recycle();
}
}
@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 LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}
/**
* 负责设置子控件的测量模式和大小 根据所有子控件设置自己的宽和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mLocationMap != null && !mLocationMap.isEmpty()) {
mLocationMap.clear();
}
// 获得它的父容器为它设置的测量模式和大小
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
// 如果是warp_content情况下,记录宽和高
int width = 0;
int height = 0;
/**
* 记录每一行的宽度,width不断取最大宽度
*/
int lineWidth = 0;
/**
* 每一行的高度,累加至height
*/
int lineHeight = 0;
int count = getChildCount();
int left = getPaddingLeft();
int top = getPaddingTop();
// 遍历每个子元素
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
// 测量每一个child的宽和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
// 得到child的lp
LayoutParams lp = child.getLayoutParams();
// 当前子空间实际占据的宽度
int childWidth = child.getMeasuredWidth() + childHorizontalSpace;
// 当前子空间实际占据的高度
int childHeight = child.getMeasuredHeight() + childVerticalSpace;
if (lp != null && lp instanceof MarginLayoutParams) {
MarginLayoutParams params = (MarginLayoutParams) lp;
childWidth += params.leftMargin + params.rightMargin;
childHeight += params.topMargin + params.bottomMargin;
}
/**
* 如果加入当前child的宽度,超出了最大宽度,则的到目前最大宽度给width,累加height 然后开启新行
*/
if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
width = Math.max(lineWidth, childWidth);// 取最大的
lineWidth = childWidth; // 重新开启新行,开始记录
// 叠加当前高度,
height += lineHeight;
// 开启记录下一行的高度
lineHeight = childHeight;
mLocationMap.put(child, new Location(left, top + height, childWidth + left - childHorizontalSpace, height +
child.getMeasuredHeight() + top));
} else {// 否则累加值lineWidth,lineHeight取最大高度
mLocationMap.put(child, new Location(lineWidth + left, top + height, lineWidth + childWidth -
childHorizontalSpace + left, height + child.getMeasuredHeight() + top));
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
}
width = Math.max(width, lineWidth) + getPaddingLeft() + getPaddingRight();
height += lineHeight;
sizeHeight += getPaddingTop() + getPaddingBottom();
height += getPaddingTop() + getPaddingBottom();
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ?
sizeHeight : height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
Location location = mLocationMap.get(child);
child.layout(location.left, location.top, location.right, location.bottom);
}
}
/**
* 记录子控件的坐标
*/
public static class Location {
public int left;
public int top;
public int right;
public int bottom;
Location(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
}
}
复制代码
简单讲解一下思路:
在onMeasure()方法中,通过遍历测量没一个字View的宽高,如果加入当前child宽度,超出了最大宽度,测得到目前最大宽度给width,width的作用是用来保存各行中最大宽度的,累加height 然后开启新行。最后
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ?
复制代码
注意一下modeWidth == MeasureSpec.EXACTLY表示宽度是在ViewGroup测量之前就已经确定了的,比如布局中的layout_width="100dp"或者layout_width="match_parent",这种情况下直接
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec)就可以获取到ViewGroup的宽度,不需要遍历子View计算。注意这里有个小技巧,我用mLocationMap在测量子View尺寸的时候就把它们位置信息保存起来,所以onLayout()方法非常简单。
运行结果如图:
今天双十一,媳妇电商公司通宵才有时间码代码,吹牛逼,有媳妇的人过了一个纯粹的光棍节,/心塞!但至少我是有媳妇的人,/得意脸。
最后祝愿大家节日快乐,码农早日脱单,有钱也有机会清空败家娘们的购物车/坏笑。
喜欢的给个星吧!