Android自定义ViewGroup之FlowLayout（三）

本篇继续来讲自定义ViewGroup，给大家带来一个实例：FlowLayout。何为FlowLayout，就是控件根据ViewGroup的宽，自动的往右添加，如果当前行剩余空间不足，则自动添加到下一行，所以也叫流式布局。Android并没有提供流式布局，但是某些场合中，流式布局还是非常适合使用的，比如关键字标签，搜索热词列表等，比如下图：

定义FlowLayout
LayoutParams，onLayout的写法都和上一篇讲WaterfallLayout一模一样，在此不再赘述了，没看过的可以参照上一篇Android自定义ViewGroup（二）之WaterfallLayout。
在这里主要说的是onMeasure方法，注释见下方：

 @Overrideprotected void onMeasure（int widthMeasureSpec, int heightMeasureSpec） {super.onMeasure（widthMeasureSpec, heightMeasureSpec）;// 获得它的父容器为它设置的测量模式和大小int sizeWidth = MeasureSpec.getSize（widthMeasureSpec）;int sizeHeight = MeasureSpec.getSize（heightMeasureSpec）;int modeWidth = MeasureSpec.getMode（widthMeasureSpec）;int modeHeight = MeasureSpec.getMode（heightMeasureSpec）;int childCount = getChildCount（）; // 如果是wrap_content情况下，记录宽和高int wrapWidth = 0;int wrapHeight = 0;//记录每一行的宽度，width不断取最大宽度int lineWidth = 0;//每一行的高度，累加至heightint lineHeight = 0; // 遍历每个子元素for （int i = 0; i < childCount; i++） {View child = getChildAt（i）;// 测量每一个child的宽和高measureChild（child, widthMeasureSpec, heightMeasureSpec）;// 得到child的lParamsLayoutParams lParams = （LayoutParams） child.getLayoutParams（）;// 当前子空间实际占据的宽度int childWidth = child.getMeasuredWidth（）;// 当前子空间实际占据的高度int childHeight = child.getMeasuredHeight（）;// 如果加上当前child，则超出最大宽度，然后开启新行if （lineWidth + childWidth > sizeWidth） { //记录新行头一个标签坐标，为onLayout做准备 lParams.left = 0; lParams.top = wrapHeight + lineHeight + vSpace; lParams.right = childWidth; lParams.bottom = lParams.top + childHeight; //取最大的，注意这里lineWidth是包括右侧hSpace的，需要减掉wrapWidth = Math.max（lineWidth - hSpace, childWidth）;// 重新开启新行，开始记录，可以看到行宽包括最右侧hSpacelineWidth = childWidth + hSpace; // 叠加当前高度，同理，加上下侧vSpace wrapHeight += lineHeight + vSpace; // 开启记录下一行的高度lineHeight = childHeight;} else { //记录每一个标签坐标，为onLayout做准备 lParams.left = lineWidth; lParams.top = wrapHeight; lParams.right = lParams.left + childWidth; lParams.bottom = lParams.top + childHeight; //在本行追加标签，累加值到lineWidth,lineHeight取最大高度lineWidth += childWidth + hSpace; lineHeight = Math.max（lineHeight, childHeight）; }// 如果是最后一个 if （i == childCount - 1） { //将当前记录的最大宽度和当前lineWidth做比较,取较大值 wrapWidth = Math.max（wrapWidth, lineWidth - hSpace）; //布局高加上最后一行高 wrapHeight += lineHeight;}}setMeasuredDimension（（modeWidth == MeasureSpec.EXACTLY） ? sizeWidth : wrapWidth, （modeHeight == MeasureSpec.EXACTLY） ? sizeHeight : wrapHeight）;}

使用FlowLayout

直接看xml吧，一看便知：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:attr="http://schemas.android.com/apk/res/com.hx.flowlayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E1E6F6" android:orientation="vertical" > <com.hx.flowlayout.FlowLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" attr:hSpace="20" attr:vSpace="10"> <TextView style="@style/flow_text_style_1" android:text="标签" /> <TextView style="@style/flow_text_style_1" android:text="Welcome" /> <TextView style="@style/flow_text_style_1" android:text="IT工程师" /> <TextView style="@style/flow_text_style_1" android:text="程序猿" /> <TextView style="@style/flow_text_style_1" android:text="Android" /> <TextView style="@style/flow_text_style_1" android:text="Java" /> <TextView style="@style/flow_text_style_1" android:text="ViewGroup" /> <TextView style="@style/flow_text_style_1" android:text="FlowLayout" /> </com.hx.flowlayout.FlowLayout> <com.hx.flowlayout.FlowLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" attr:hSpace="20" attr:vSpace="10"> <TextView style="@style/flow_text_style_2" android:text="标签" /> <TextView style="@style/flow_text_style_2" android:text="Welcome" /> <TextView style="@style/flow_text_style_2" android:text="IT工程师" /> <TextView style="@style/flow_text_style_2" android:text="程序猿" /> <TextView style="@style/flow_text_style_2" android:text="Android" /> <TextView style="@style/flow_text_style_2" android:text="Java" /> <TextView style="@style/flow_text_style_2" android:text="ViewGroup" /> <TextView style="@style/flow_text_style_2" android:text="FlowLayout" /> </com.hx.flowlayout.FlowLayout></LinearLayout>

这里写的比较啰嗦，所有TextView都是写在xml里面的，当然我们也可以通过Java代码来动态添加。
再来看看style吧，这里我们定义了两种不同的风格，具体见下面：

 <style name="flow_text_style_1"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">@drawable/flow_text_bg_1</item> <item name="android:textColor">#ffffff</item> <item name="android:textSize">16sp</item> </style> <style name="flow_text_style_2"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">@drawable/flow_text_bg_2</item> <item name="android:textColor">#4B0082</item> <item name="android:textSize">20sp</item> </style>

找到background我们再进去看看，这里使用的是shapeDrawable，之后我会写一些关于shapeDrawable的文章：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" ><solid android:color="#FFFFFF"/><corners android:radius="40dp"/><stroke android:color="#C9C9C9" android:width="2dp"/><paddingandroid:bottom="2dp"android:left="10dp"android:right="10dp"android:top="2dp" /> </shape>

效果图如下：

源码下载：http://xiazai.jb51.net/201609/yuanma/Android-FlowLayout（jb51.net）.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。