FlowLayout:Android自定义ViewGroup实现

需求

我们需要实现一个自定义的Layout,该Layout可以容纳若干个宽高不等的子元素,元素按照从左到右的顺序排列,当元素超出屏幕显示范围时,换一行继续显示,like this

View和ViewGroup

Android的界面都是由ViewViewGroup及其派生类组合而成,其中,View是ViewGroup及其他UI组件的基类。ViewGroup是放置View的容器,在编写xml布局文件的时候,View所有以layout开头的属性都是提供给ViewGroup的,ViewGroup根据这些属性来给childView计算出测量模式和建议的宽高,并将childView绘制在屏幕上的适当位置

UI是怎样被绘制出来的

UI组件渲染过程可分为三个阶段:测量、布局、绘制.

Measure过程

Measure过程的任务是根据ViewGroup给的参数计算出视图自身的大小,在View中与Measure过程相关的方法有measure()onMeasure()setMeasureDimension(),其中onMeasure()是我们需要在自定义视图的时候重写的方法,在measure()方法中,onMeasure()被调用,在onMeasure()计算完毕后,调用setMeasureDimension()设置自身大小。
自身大小的计算结果取决于视图本身所占区域的大小及ViewGroup传递过来的MeasureMode值,其中MeasureMode可能取值为UNSPECIFIEDEXACTLYAT_MOST

UNSPECIFIED

表示childView可将自身大小设置为自身想要的任意大值,一般出现于AdapterView的item的高度属性中

EXACTLY

表示childView应该将自身大小设置为ViewGroup指定的大小,当View指定了自身宽或高为精确的值或match_parent时,ViewGroup会传入该Mode

AT_MOST

表示childView可以在一个限定的最大值范围内设置自己的大小,当View指定自身宽或高为wrap_content时,ViewGroup会传入该Mode
Measure过程结束后,视图大小即被确定。

Layout过程

Layout过程的任务是决定视图的位置,framework调用View的layout()方法来计算位置,在layout()方法中,onLayout()方法会被调用,这个方法是需要View的派生类重写的,在此实现布局逻辑。
Layout是一个自顶向下递归的过程,先布局容器,再布局子视图,因此,ViewGroup的位置一定程度上决定了它的childView的位置。
Layout过程结束后,视图在屏幕上的位置即被确定。

Draw过程

Draw过程的任务是根据视图的尺寸和位置,在相应的区域内绘制自身样式。同样的,framework会调用onDraw()方法,我们需要重写onDraw()方法实现绘制逻辑,在View中,可以通过调用invalidate()方法触发视图重绘。

让View支持Padding和Margin

如上文所说,所有以layout开头的属性都是交由容器处理的,layout_margin就是这样一个属性,在自定义View中可通过getLayoutParams()返回的LayoutParams对象来获取到视图各个方向的margin值,容器只需在layout过程中将margin值作为偏移量加入即可实现将视图放置在正确位置。
Padding是视图的自有属性,描述其各个方向边界到内部内容的距离,在代码中可通过getPaddingTop(/Left/Right/Bottom)()来获取各个方向的padding值,在Measure过程中,需要注意View尺寸包含内容区域加上padding区域,padding区域内的内容将不会被绘制。

Step by Step实现需求

onMeasure

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int contentWidth = MeasureSpec.getSize(widthMeasureSpec);
int contentHeight = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//Padding支持
int topOffset = getPaddingTop();
int leftOffset = getPaddingLeft();
int selfWidth = 0, selfHeight = 0;
int currentLineWidth = 0, currentLineHeight = 0;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
measureChild(child, widthMeasureSpec, heightMeasureSpec);
MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
int childWidth = Math.max(child.getMeasuredWidth(), getSuggestedMinimumWidth()) + layoutParams.leftMargin + layoutParams.rightMargin;
int childHeight = Math.max(child.getMeasuredHeight(), getSuggestedMinimumHeight()) + layoutParams.topMargin + layoutParams.bottomMargin;
if (currentLineWidth + childWidth > contentWidth  - getPaddingLeft() - getPaddingRight()) {
//需要另起一行
currentLineWidth = Math.max(currentLineWidth,childWidth);
selfWidth = Math.max(selfWidth, currentLineWidth);
currentLineWidth = childWidth;
selfHeight += currentLineHeight;
currentLineHeight = childHeight;
//Measure的时候顺便把位置计算出来
child.setTag(new Location(child, leftOffset, selfHeight + topOffset, childWidth + leftOffset, selfHeight + child.getMeasuredHeight() + topOffset));
} else {
//不需要换行
child.setTag(new Location(child, currentLineWidth + leftOffset, selfHeight + topOffset, currentLineWidth + child.getMeasuredWidth() + topOffset, selfHeight + child.getMeasuredHeight() + topOffset));
currentLineWidth += childWidth;
currentLineHeight = Math.max(currentLineHeight, childHeight);
}
if (i == childCount - 1) {
//到最后一个child的时候更新高度
sselfWidth = Math.max(currentLineWidth, selfWidth) + getPaddingRight() + getPaddingLeft();
selfHeight += currentLineHeight + getPaddingTop() + getPaddingBottom();
}
}
setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? contentWidth : selfWidth,
heightMode == MeasureSpec.EXACTLY ? contentHeight : selfHeight);
}

经过如上处理,ViewGroup的尺寸和childView的位置便被计算出来,并且ViewGroup可根据childView排列情况自动调整自身宽高。

onLayout

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
if (child.getVisibility() != GONE) {
Location location = (Location) child.getTag();
child.layout(location.left, location.top, location.right, location.bottom);
}
}
}

onMeasure()中我们已经顺手计算出了各个childView的位置信息,所以在Layout步骤中只需将其按照位置摆放到相应区域即可。

draw

draw方法是由framework调用,在ViewGroup的onDraw()方法中绘制的内容最后会被作为ViewGroup的背景,所以如果需要更改背景内容可重写该方法。draw()中会递归调用childView的onDraw()方法,调用完毕后ViewGroup本身和childView都绘制完毕,一次渲染过程到此结束。

附加特性

可通过对ViewGroup设置LayoutAnimation来为childView显示的过程附加动画,一个简单的例子:

public FlowLayout(Context context) {
super(context);
setLayoutAnimation(
new LayoutAnimationController(AnimationUtils.loadAnimation(
getContext(), R.anim.list_animation), 0.3f));
}

可以重写addView()方法为动态添加的View附加动画,重写removeView()方法实现移除View时的附加动画。

实现效果

Github

  1. Pingback: 钢格板

  2. Pingback: 压滤机

  3. Pingback: 玻璃纤维网格布

  4. Pingback: 工地盖土网

  5. Pingback: 格宾网

  6. Pingback: 果冻胶

  7. Pingback: 金刚网

  8. Pingback: 道路交通标线

  9. Pingback: 安平物流

  10. Pingback: 不锈钢网

  11. Pingback: 小区声屏障

  12. Pingback: 外墙保温网格布价格

  13. Pingback: 钢筋网

  14. Pingback: 止水带

  15. Pingback: 镀锌石笼网

  16. Pingback: 烧烤网

  17. Pingback: 钢板网

  18. Pingback: 伸缩缝

  19. Pingback: 格宾网箱

  20. Pingback: 更换支座

  21. Pingback: 玻璃钢格栅

  22. Pingback: 边坡防护网

  23. Pingback: 胶管

  24. Pingback: 勾花网

  25. Pingback: 护栏网

  26. Pingback: 衡水人才网

  27. Pingback: 勾花网

  28. Pingback: 雷诺护垫

  29. Pingback: 防风抑尘网

  30. Pingback: 锌钢护栏

  31. Pingback: 环氧地坪漆