自定义FlowLayout

自定义ViewGroup具体要实现以下几个步骤。

onMeasure 在onMeasure里实现对子view的测量，并且根据子view的测量结果决定FlowLayout的大小。主要测量ViewGroup在AS_MOST模式下的大小。onLayout 在这里对子view进行布局，决定自view的位置。

对于本例，FlowLayout为流式布局。当前行剩余空间大于子View占用的大小时，子View往后排布；当前行剩余空间不能够容纳子View时，子View换行。依照该规则进行测量和布局。

FlowLayout

public class FlowLayout extends ViewGroup { public FlowLayout(Context context) { super(context); } public FlowLayout(Context context, AttributeSet attrs) { super(context, attrs); } public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = 0;//测量后FlowLayout的宽度 int height = 0;//测量后FlowLayout的高度 int lineWidth = 0;//行当前宽度 int lineHeight = 0; int widthMode = MeasureSpec.getMode(widthMeasureSpec);//宽度的mode int heightMode = MeasureSpec.getMode(heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec);//宽度的大小 int heightSize = MeasureSpec.getSize(heightMeasureSpec); int childCount = getChildCount(); for (int i = 0; i < childCount; i++) { //拿到childView View child = getChildAt(i); //测量childView measureChild(child, widthMeasureSpec, heightMeasureSpec); //拿到childView的LayoutParams，只支持Margin MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); //childView占用的宽度 int childWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth(); int childHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight(); //换行逻辑，不换行累加宽度，最大行宽为FlowLayout的宽度 //换行累加高度 if (childWidth + lineWidth <= widthSize) { lineWidth += childWidth; lineHeight = Math.max(childHeight, lineHeight); width = Math.max(lineWidth,width); } else { //满足换行条件，重置lineWidth为换行之后的这一个View的宽度，累加高度 height += lineHeight; lineHeight = childHeight; lineWidth = childWidth; width = Math.max(width, childWidth); } //处理最后一个view，累加高度 if (i == childCount - 1) { height += lineHeight; } } //设置FlowLayout的大小,主要考虑AS_MOST（wrap_content）模式的大小 setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : width, heightMode == MeasureSpec.EXACTLY ? heightSize : height); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int childCount = getChildCount(); int width = getWidth(); int lineWidth = 0; int lineHeight = 0; int height = 0; for (int i = 0;i<childCount;i++){ View child = getChildAt(i); MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); int childWitch = lp.leftMargin+lp.rightMargin+child.getMeasuredWidth(); int childHeght = lp.topMargin+lp.bottomMargin+child.getMeasuredHeight(); int mL = lp.leftMargin; int mT = lp.topMargin; int mR = lp.leftMargin+child.getMeasuredWidth(); int mB = lp.topMargin+child.getMeasuredHeight(); if (lineWidth+childWitch<=width){ //不换行，view往后边排布 child.layout(mL+lineWidth,mT+height,mR+lineWidth,mB+height); //累加lineWidth lineWidth+=childWitch; //lineHeight为该行view最大高度 lineHeight = Math.max(lineHeight,childHeght); }else { //换行，重置lineWidth，累加lineHeight lineWidth = 0; height+=lineHeight; //layout这个view child.layout(mL+lineWidth,mT+height,mR+lineWidth,mB+height); //换行，行宽为当前view占用的宽度 lineWidth=childWitch; } } } /** * 根据XML文件的设置的属性,返回一个支持Margin的LayoutParams * @param attrs * @return */ @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new MarginLayoutParams(getContext(), attrs); } }

然后给文字定义一个好看的背景 drawable/shape_drawable:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="10dp"/> <solid android:color="#ffffff"/> <stroke android:width="1dp" android:dashWidth="10dp" android:dashGap="4dp" android:color="#158441"/> </shape>

xml:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="1"> <com.ljk.FlowLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="Android"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="Switch"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="Java"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="Kotlin"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="C++"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="C#"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="软件工程师"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="App架构师"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@drawable/shape_drawable" android:padding="10dp" android:text="UI设计"/> </com.ljk.FlowLayout> </LinearLayout>

效果：