效果展示
最近要业务中需要做一个瀑布流的效果，按理说正常的瀑布流网上已经有很多解决方案了。
但我还是想自己尝试写一下。
又因为这块要求有一点特殊，下面大概讲下需求：
首先子元素的对方肯定还是和其他瀑布流一样，按照子View的宽高动态摆放位置
然后这边子View都是Textview，其实就是各种标签
还有就是要求可以限制行数
比如子元素很多，只展示前两行
后面的用“…”表示（类似我们TextView里面文字过多时展示的效果一样）
具体效果如下：
可以看到最后的一个标签的内容是省略号
如果规定是三行，并且每超出规定行数，效果是这样的（红色背景色是我自己加的）：
那么开干
测量代码
这边先定义了两个变量：childMarginRight 和chilMarginBottom
主要是来控制子View之间的间距的
还有一个mMaxLines控制最大行数
这边思路是：动态测量子View，当超过两行时，把最后一个子View的内容改为省略号
先看测量方法：
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {val widthSize = MeasureSpec.getSize(widthMeasureSpec)val widthMode = MeasureSpec.getMode(widthMeasureSpec)val heightSize = MeasureSpec.getSize(heightMeasureSpec)val heightMode = MeasureSpec.getMode(heightMeasureSpec)val childCount = childCountvar lineWidth = 0var lineHeight = 0 //单行最大的高度var width = 0var height = 0 //总高度var lineCount = 1 // 当前行数for (i in 0 until childCount) {val child = getChildAt(i)measureChild(child, widthMeasureSpec, heightMeasureSpec)val childWidth = child.measuredWidth + childMarginRightval childHeight = child.measuredHeightif (lineWidth + childWidth > widthSize) { // 换行lineWidth = 0lineHeight = childHeightlineCount++ // 行数加1if (lineCount > mMaxLines) { // 超过最大行数，剩余的子控件不再计算在内lineCount = mMaxLinesbreak}height += lineHeight} else {//求出这行最大的高lineHeight = lineHeight.coerceAtLeast(childHeight)}lineWidth += childWidth}width = if (widthMode == MeasureSpec.EXACTLY) widthSize else lineWidthheight =if (heightMode == MeasureSpec.EXACTLY) heightSize else height + lineHeight + chilMarginBottom * (lineCount - 1)setMeasuredDimension(width, height)}
可以看到，每次换行时都判断下是否超出行了
最后去动态设置每行的高度
换行问题
其实这里还有一个问题：
如果要超出规定行数时
是否可以不把最后一行的最后一个元素的文字内容改为…，
而是直接又添加一个内容为…的TextView
只不过如果这样实现，就要判断新添加的元素会不会导致换行
所以这边没那么麻烦，当判断出要换行后，直接把最后一行的最后一个元素的文字内容改为…，
这块逻辑在onlayout中实现，如下：
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {val width = widthval childCount = childCountvar lineHeight = 0 //当前行最高子View的高度var left = 0 //当前画到的left位置var top = 0 //当前画到的top位置var lineCount = 1 // 当前行数//这里是算出在行数固定的情况下，最多能塞进多少子ViewmaxChildCount = if (maxChildCount == -1) childCount else maxChildCountfor (i in 0 until maxChildCount) {val child = getChildAt(i)val childWidth = child.measuredWidthval childHeight = child.measuredHeightif (left + childWidth + childMarginRight > width) { // 换行left = 0top += lineHeight + chilMarginBottomlineHeight = childHeightlineCount++ // 行数加1if (lineCount > mMaxLines) { // 超过最大行数，剩余的子控件不再布局maxChildCount = iif (lastChildView != null && lastChildView is TextView) {//最后一个元素设为...，如果不是textview，也可以自己额外加逻辑post {(lastChildView as TextView).apply {text = "..."requestLayout()}}}break}}lastChildView = childif (left != 0 && left + childWidth + childMarginRight <= width) {//说明不是这行的第一个子View 并且 加上右边间距后不会超出这一行left += childMarginRight}child.layout(left, top, left + childWidth, top + childHeight)left += childWidth//记录这一行最高的高度lineHeight = lineHeight.coerceAtLeast(childHeight)}}
可以看到，超出规定行数的元素就不会再摆放进去了
同时要计算好间距各种
完整代码
最后贴下完整代码吧
这个控件比较简单，大家可以作为自定义控件的一个示例来学习
class XiongFlowLayout : ViewGroup {private var mMaxLines = 2 // 最大行数private var lastChildView: View? = null //布局里最后一个View，如果是超过两行并且这个View是Textview时修改文字为...private var maxChildCount = -1 //当前行数最大允许添加进布局的子View数量/*** 主要用来设置子View之间的间距的*/private var childMarginRight = 10private var chilMarginBottom = 10constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {// 构造方法}/*** 设置View之间的间距*/fun setChildMargin(childMarginRight: Int, chilMarginBottom: Int) {this.childMarginRight = childMarginRightthis.chilMarginBottom = chilMarginBottomrequestLayout()}// 设置最大行数fun setMaxLines(maxLines: Int) {if (maxLines >= 1) {mMaxLines = maxLinesrequestLayout()}}override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {val widthSize = MeasureSpec.getSize(widthMeasureSpec)val widthMode = MeasureSpec.getMode(widthMeasureSpec)val heightSize = MeasureSpec.getSize(heightMeasureSpec)val heightMode = MeasureSpec.getMode(heightMeasureSpec)val childCount = childCountvar lineWidth = 0var lineHeight = 0 //单行最大的高度var width = 0var height = 0 //总高度var lineCount = 1 // 当前行数for (i in 0 until childCount) {val child = getChildAt(i)measureChild(child, widthMeasureSpec, heightMeasureSpec)val childWidth = child.measuredWidth + childMarginRightval childHeight = child.measuredHeightif (lineWidth + childWidth > widthSize) { // 换行lineWidth = 0lineHeight = childHeightlineCount++ // 行数加1if (lineCount > mMaxLines) { // 超过最大行数，剩余的子控件不再计算在内lineCount = mMaxLinesbreak}height += lineHeight} else {//求出这行最大的高lineHeight = lineHeight.coerceAtLeast(childHeight)}lineWidth += childWidth}width = if (widthMode == MeasureSpec.EXACTLY) widthSize else lineWidthheight =if (heightMode == MeasureSpec.EXACTLY) heightSize else height + lineHeight + chilMarginBottom * (lineCount - 1)setMeasuredDimension(width, height)}override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {val width = widthval childCount = childCountvar lineHeight = 0 //当前行最高子View的高度var left = 0 //当前画到的left位置var top = 0 //当前画到的top位置var lineCount = 1 // 当前行数//这里是算出在行数固定的情况下，最多能塞进多少子ViewmaxChildCount = if (maxChildCount == -1) childCount else maxChildCountfor (i in 0 until maxChildCount) {val child = getChildAt(i)val childWidth = child.measuredWidthval childHeight = child.measuredHeightif (left + childWidth + childMarginRight > width) { // 换行left = 0top += lineHeight + chilMarginBottomlineHeight = childHeightlineCount++ // 行数加1if (lineCount > mMaxLines) { // 超过最大行数，剩余的子控件不再布局maxChildCount = iif (lastChildView != null && lastChildView is TextView) {//最后一个元素设为...，如果不是textview，也可以自己额外加逻辑post {(lastChildView as TextView).apply {text = "..."requestLayout()}}}break}}lastChildView = childif (left != 0 && left + childWidth + childMarginRight <= width) {//说明不是这行的第一个子View 并且 加上右边间距后不会超出这一行left += childMarginRight}child.layout(left, top, left + childWidth, top + childHeight)left += childWidth//记录这一行最高的高度lineHeight = lineHeight.coerceAtLeast(childHeight)}}
}
