用kotlin写一下自定义ViewGroup，实现流式布局，标签效果。
class FlowLayout @JvmOverloads constructor(
context: Context?,
attributeSet: AttributeSet? = null,
defStyleAttr: Int = 0,
defStyleRes: Int = 0
) : ViewGroup(context, attributeSet, defStyleAttr, defStyleRes) {
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
measureChildren(widthMeasureSpec, heightMeasureSpec)
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
val widthSize = MeasureSpec.getSize(widthMeasureSpec)
val heightSize = MeasureSpec.getSize(heightMeasureSpec)
val height = realLayout(widthSize)
val realHeight = if (heightMode == MeasureSpec.EXACTLY) heightSize else height
setMeasuredDimension(widthSize, realHeight)
}
private fun realLayout(width: Int): Int {
var childWidth: Int
var childHeight: Int
var layoutWidth = 0
var layoutHeight = 0
var lineHeight = 0
var left: Int
var top: Int
var right: Int
var bottom: Int
for (i in 0 until childCount) {
val child = getChildAt(i)
val lp = child.layoutParams as MarginLayoutParams
childWidth = child.measuredWidth
childHeight = child.measuredHeight
if (layoutWidth < width && (width - layoutWidth) > childWidth) {//不换行
left = layoutWidth + lp.leftMargin
top = layoutHeight + lp.topMargin
right = left + childWidth
bottom = top + childHeight
} else {//换行
layoutHeight += lineHeight
layoutWidth = 0
lineHeight = 0
left = layoutWidth + lp.leftMargin
top = layoutHeight + lp.topMargin
right = left + childWidth
bottom = top + childHeight
}
layoutWidth += (childWidth + lp.leftMargin + lp.rightMargin)
val realLineHeight = childHeight + lp.topMargin + lp.bottomMargin
lineHeight = if (realLineHeight > lineHeight) realLineHeight else lineHeight
child.layout(left, top, right, bottom)
}
return layoutHeight + lineHeight
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
}
override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
return MarginLayoutParams(context, attrs)
}
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.chenxuan.widget.FlowLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bg_flow_text"
android:gravity="center"
android:paddingStart="5dp"
android:paddingTop="3dp"
android:paddingEnd="5dp"
android:paddingBottom="3dp"
android:text="flow layout" />
</com.chenxuan.widget.FlowLayout>
</RelativeLayout>
bg_flow_text.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/holo_orange_light" />
<corners android:radius="7dp" />
<stroke
android:width="1dp"
android:color="@android:color/holo_orange_light" />
</shape>
效果图
网友评论