转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/38352503 。本文出自【张鸿洋的博客】

1、概述

上一篇已经基本给大家介绍了怎样自己定义ViewGroup。假设你还不了解，请查看：Android 手把手教您自定ViewGroup ，本篇将使用上篇介绍的方法，给大家带来一个实例：实现FlowLayout，何为FlowLayout，假设对Java的Swing比較熟悉的话一定不会陌生。就是控件依据ViewGroup的宽，自己主动的往右加入。假设当前行剩余空间不足，则自己主动加入到下一行。有点全部的控件都往左飘的感觉。第一行满了。往第二行飘~所以也叫流式布局。Android并没有提供流式布局，可是某些场合中，流式布局还是很适合使用的。比方keyword标签。搜索热词列表等，比方下图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbG1qNjIzNTY1Nzkx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

这些都特别适合使用FlowLayout，本篇博客会带领大家自己实现FlowLayout，然后使用我们自己定义的FlowLayout实现上面的标签效果。

对了，github已经有了这样FlowLayout，可是我认为丝毫不影响我们对其的学习，学会使用一个控件和学会写一个控件，我相信大家都明确，授人以鱼不如授人以渔。

2、简单的分析

1、对于FlowLayout，须要指定的LayoutParams，我们眼下仅仅须要可以识别margin就可以，即使用MarginLayoutParams.

2、onMeasure中计算全部childView的宽和高，然后依据childView的宽和高，计算自己的宽和高。

（当然，假设不是wrap_content，直接使用父ViewGroup传入的计算值就可以）

3、onLayout中对全部的childView进行布局。

3、generateLayoutParams

由于我们仅仅须要支持margin，所以直接使用系统的MarginLayoutParams

	@Override

	public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs)

	{

		return new MarginLayoutParams(getContext(), attrs);

	}

4、onMeasure

/**

	 * 负责设置子控件的測量模式和大小 依据全部子控件设置自己的宽和高

	 */

	@Override

	protected 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);

		Log.e(TAG, sizeWidth + "," + sizeHeight);

		// 假设是warp_content情况下，记录宽和高

		int width = 0;

		int height = 0;

		/**

		 * 记录每一行的宽度，width不断取最大宽度

		 */

		int lineWidth = 0;

		/**

		 * 每一行的高度，累加至height

		 */

		int lineHeight = 0;

		int cCount = getChildCount();

		// 遍历每一个子元素

		for (int i = 0; i < cCount; i++)

		{

			View child = getChildAt(i);

			// 測量每一个child的宽和高

			measureChild(child, widthMeasureSpec, heightMeasureSpec);

			// 得到child的lp

			MarginLayoutParams lp = (MarginLayoutParams) child

					.getLayoutParams();

			// 当前子空间实际占领的宽度

			int childWidth = child.getMeasuredWidth() + lp.leftMargin

					+ lp.rightMargin;

			// 当前子空间实际占领的高度

			int childHeight = child.getMeasuredHeight() + lp.topMargin

					+ lp.bottomMargin;

			/**

			 * 假设加入当前child，则超出最大宽度，则的到眼下最大宽度给width，类加height 然后开启新行

			 */

			if (lineWidth + childWidth > sizeWidth)

			{

				width = Math.max(lineWidth, childWidth);// 取最大的

				lineWidth = childWidth; // 又一次开启新行。開始记录

				// 叠加当前高度，

				height += lineHeight;

				// 开启记录下一行的高度

				lineHeight = childHeight;

			} else

			// 否则累加值lineWidth,lineHeight取最大高度

			{

				lineWidth += childWidth;

				lineHeight = Math.max(lineHeight, childHeight);

			}

			// 假设是最后一个。则将当前记录的最大宽度和当前lineWidth做比較

			if (i == cCount - 1)

			{

				width = Math.max(width, lineWidth);

				height += lineHeight;

			}

		}

		setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ?

sizeWidth

				: width, (modeHeight == MeasureSpec.EXACTLY) ?

sizeHeight

				: height);

	}

首先得到其父容器传入的測量模式和宽高的计算值，然后遍历全部的childView。使用measureChild方法对全部的childView进行測量。

然后依据全部childView的測量得出的宽和高得到该ViewGroup假设设置为wrap_content时的宽和高。最后依据模式，假设是MeasureSpec.EXACTLY则直接使用父ViewGroup传入的宽和高，否则设置为自己计算的宽和高。

5、onLayout

onLayout中完毕对全部childView的位置以及大小的指定

/**

	 * 存储全部的View，按行记录

	 */

	private List<List<View>> mAllViews = new ArrayList<List<View>>();

	/**

	 * 记录每一行的最大高度

	 */

	private List<Integer> mLineHeight = new ArrayList<Integer>();

	@Override

	protected void onLayout(boolean changed, int l, int t, int r, int b)

	{

		mAllViews.clear();

		mLineHeight.clear();

		int width = getWidth();

		int lineWidth = 0;

		int lineHeight = 0;

		// 存储每一行全部的childView

		List<View> lineViews = new ArrayList<View>();

		int cCount = getChildCount();

		// 遍历全部的孩子

		for (int i = 0; i < cCount; i++)

		{

			View child = getChildAt(i);

			MarginLayoutParams lp = (MarginLayoutParams) child

					.getLayoutParams();

			int childWidth = child.getMeasuredWidth();

			int childHeight = child.getMeasuredHeight();

			// 假设已经须要换行

			if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width)

			{

				// 记录这一行全部的View以及最大高度

				mLineHeight.add(lineHeight);

				// 将当前行的childView保存。然后开启新的ArrayList保存下一行的childView

				mAllViews.add(lineViews);

				lineWidth = 0;// 重置行宽

				lineViews = new ArrayList<View>();

			}

			/**

			 * 假设不须要换行，则累加

			 */

			lineWidth += childWidth + lp.leftMargin + lp.rightMargin;

			lineHeight = Math.max(lineHeight, childHeight + lp.topMargin

					+ lp.bottomMargin);

			lineViews.add(child);

		}

		// 记录最后一行

		mLineHeight.add(lineHeight);

		mAllViews.add(lineViews);

		int left = 0;

		int top = 0;

		// 得到总行数

		int lineNums = mAllViews.size();

		for (int i = 0; i < lineNums; i++)

		{

			// 每一行的全部的views

			lineViews = mAllViews.get(i);

			// 当前行的最大高度

			lineHeight = mLineHeight.get(i);

			Log.e(TAG, "第" + i + "行 ：" + lineViews.size() + " , " + lineViews);

			Log.e(TAG, "第" + i + "行， ：" + lineHeight);

			// 遍历当前行全部的View

			for (int j = 0; j < lineViews.size(); j++)

			{

				View child = lineViews.get(j);

				if (child.getVisibility() == View.GONE)

				{

					continue;

				}

				MarginLayoutParams lp = (MarginLayoutParams) child

						.getLayoutParams();

				//计算childView的left,top,right,bottom

				int lc = left + lp.leftMargin;

				int tc = top + lp.topMargin;

				int rc =lc + child.getMeasuredWidth();

				int bc = tc + child.getMeasuredHeight();

				Log.e(TAG, child + " , l = " + lc + " , t = " + t + " , r ="

						+ rc + " , b = " + bc);

				child.layout(lc, tc, rc, bc);

				left += child.getMeasuredWidth() + lp.rightMargin

						+ lp.leftMargin;

			}

			left = 0;

			top += lineHeight;

		}

	}

allViews的每一个Item为每行全部View的List集合。

mLineHeight记录的为每行的最大高度。

23-48行，遍历全部的childView，用于设置allViews的值。以及mLineHeight的值。

57行。依据allViews的长度，遍历全部的行数

67-91行，遍历每一行的中全部的childView。对childView的left , top , right , bottom 进行计算，和定位。

92-93行，重置left和top，准备计算下一行的childView的位置。

好了，到此完毕了全部的childView的绘制区域的确定，到此。我们的FlowLayout的代码也结束了~~静下心来看一看是不是也不难~

6、測试

我准备使用TextView作为我们的标签，所以为其简单写了一点样式：

res/values/styles.xml中：

 <style name="text_flag_01">

        <item name="android:layout_width">wrap_content</item>

        <item name="android:layout_height">wrap_content</item>

        <item name="android:layout_margin">4dp</item>

        <item name="android:background">@drawable/flag_01</item>

        <item name="android:textColor">#ffffff</item>

    </style>

flag_01.xml 

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#7690A5" >

    </solid>

    <corners android:radius="5dp"/>

    <padding

        android:bottom="2dp"

        android:left="10dp"

        android:right="10dp"

        android:top="2dp" />

</shape>

布局文件： 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#E1E6F6"

    android:orientation="vertical" >

    <com.zhy.zhy_flowlayout02.FlowLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

        <TextView

            style="@style/text_flag_01"

            android:text="Welcome" />

        <TextView

            style="@style/text_flag_01"

            android:text="ITproject师" />

        <TextView

            style="@style/text_flag_01"

            android:text="学习ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="恋爱ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="挣钱ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="努力ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="I thick i can" />

    </com.zhy.zhy_flowlayout02.FlowLayout>

    </LinearLayout>

效果图：

是不是还不错，以下继续简单自己定义几个背景：

res/drawble/flog_02.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FFFFFF" >

    </solid>

    <corners android:radius="40dp"/>

    <stroke android:color="#C9C9C9" android:width="2dp"/>

    <padding

        android:bottom="2dp"

        android:left="10dp"

        android:right="10dp"

        android:top="2dp" />

</shape>

flag_03.xml 

<?

xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FFFFFF" >

    </solid>

    <corners android:radius="40dp"/>

    <padding

        android:bottom="2dp"

        android:left="10dp"

        android:right="10dp"

        android:top="2dp" />

</shape>

布局文件： 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#E1E6F6"

    android:orientation="vertical" >

    <com.zhy.zhy_flowlayout02.FlowLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

        <TextView

            style="@style/text_flag_01"

            android:text="Welcome" />

        <TextView

            style="@style/text_flag_01"

            android:text="ITproject师" />

        <TextView

            style="@style/text_flag_01"

            android:text="学习ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="恋爱ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="挣钱ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="努力ing" />

        <TextView

            style="@style/text_flag_01"

            android:text="I thick i can" />

    </com.zhy.zhy_flowlayout02.FlowLayout>

    <com.zhy.zhy_flowlayout02.FlowLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="20dp" >

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_02"

            android:text="Welcome"

            android:textColor="#888888" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_02"

            android:text="ITproject师"

            android:textColor="#888888" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_02"

            android:text="学习ing"

            android:textColor="#888888" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_02"

            android:text="恋爱ing"

            android:textColor="#888888" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_02"

            android:text="挣钱ing"

            android:textColor="#888888" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_02"

            android:text="努力ing"

            android:textColor="#888888" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_02"

            android:text="I thick i can"

            android:textColor="#888888" />

    </com.zhy.zhy_flowlayout02.FlowLayout>

    <com.zhy.zhy_flowlayout02.FlowLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="20dp" >

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="Welcome"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="ITproject师"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="学习ing"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="恋爱ing"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="挣钱ing"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="努力ing"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="I thick i can"

            android:textColor="#43BBE7" />

    </com.zhy.zhy_flowlayout02.FlowLayout>

</LinearLayout>

效果图：

暂不赞~~上面都是match_parent~~以下固定下宽度，实现文章最開始的移动开发热门标签：

flag_04.xml

<?

xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#E7E7E7" >

    </solid>

    <corners

        android:radius="30dp"

         />

    <padding

        android:bottom="2dp"

        android:left="10dp"

        android:right="10dp"

        android:top="2dp" />

</shape>

布局文件： 

<com.zhy.zhy_flowlayout02.FlowLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="200dp"

    android:layout_height="wrap_content"

    android:background="#FFFFFF" >

    <TextView

        style="@style/text_flag_01"

        android:background="@drawable/flag_04"

        android:text="Welcome"

        android:textColor="#323232" />

    <TextView

        style="@style/text_flag_01"

        android:background="@drawable/flag_04"

        android:text="ITproject师"

        android:textColor="#323232" />

    <TextView

        style="@style/text_flag_01"

        android:background="@drawable/flag_04"

        android:text="学习ing"

        android:textColor="#323232" />

    <TextView

        style="@style/text_flag_01"

        android:background="@drawable/flag_04"

        android:text="恋爱ing"

        android:textColor="#323232" />

    <TextView

        style="@style/text_flag_01"

        android:background="@drawable/flag_04"

        android:text="挣钱ing"

        android:textColor="#323232" />

    <TextView

        style="@style/text_flag_01"

        android:background="@drawable/flag_04"

        android:text="努力ing"

        android:textColor="#323232" />

    <TextView

        style="@style/text_flag_01"

        android:background="@drawable/flag_04"

        android:text="I thick i can"

        android:textColor="#323232" />

</com.zhy.zhy_flowlayout02.FlowLayout>

效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbG1qNjIzNTY1Nzkx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

是不是全然同样~~o了~

假设你认为本篇博客对你实用。那么就留个言或者顶一个~~

源代码点击下载

该博客视频教程已经上线。假设你还不清楚，或者动态加入控件有问题。可以查看下。（PS:视频中也fix了padding的问题）：

Android自己定义控件 打造Android流式布局和热门标签

----------------------------------------------------------------------------------------------------------

博主部分视频已经上线。假设你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：

1、高仿微信5.2.1主界面及消息提醒

2、高仿QQ5.0側滑

3、Android智能机器人“小慕”的实现

----------------------------------------------------------------------------------------------------------

博主部分视频已经上线，假设你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：

1、高仿微信5.2.1主界面及消息提醒

2、高仿QQ5.0側滑

3、Android智能机器人“小慕”的实现

4、Android自己定义控件 打造Android流式布局和热门标签

Android 自己定义ViewGroup 实战篇 -&gt; 实现FlowLayout的更多相关文章

  1. 【Android自己定义View实战】之自己定义超简单SearchView搜索框

    [Android自己定义View实战]之自己定义超简单SearchView搜索框 这篇文章是对之前文章的翻新,至于为什么我要又一次改动这篇文章?原因例如以下 1.有人举报我抄袭,原文链接:http:/ ...

  2. Android 自己定义ViewGroup手把手教你实现ArcMenu

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37567907 逛eoe发现这种UI效果,感觉非常不错,后来知道github上有这 ...

  3. Android自己定义ViewGroup打造各种风格的SlidingMenu

    看鸿洋大大的QQ5.0側滑菜单的视频课程,对于側滑的时的动画效果的实现有了新的认识,似乎打通了任督二脉.眼下能够实现随意效果的側滑菜单了.感谢鸿洋大大!! 鸿洋大大用的是HorizontalScrol ...

  4. Android自己定义View基础篇（三）之SwitchButton开关

    自己定义View基础篇(二) 自己定义View基础篇(一) 自己定义View原理 我在解说之前,先来看看效果图,有图有真相:(转换gif图片效果太差) 那来看看真实图片: 假设你要更改样式,请改动例如 ...

  5. Android网络框架Volley(实战篇)

      之前讲了ym—— Android网络框架Volley(体验篇),大家应该了解了volley的使用,接下来我们要看看如何把volley使用到实战项目里面,我们先考虑下一些问题: 从上一篇来看 mQu ...

  6. Android 自定义ViewGroup 实战篇 -> 实现FlowLayout

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38352503 ,本文出自[张鸿洋的博客] 1.概述 上一篇已经基本给大家介绍了如 ...

  7. android 自己定义ViewGroup实现可记载并呈现选择的ListView

    转载请注明出处:王亟亟的大牛之路 之前也做过一些用TextView之类的记录ListView选项的东西.可是总认为好难看.发现个不错的实现就贴给大家. 项目文件夹 执行效果: 自己定义视图: @Tar ...

  8. Android自己定义ViewGroup（二）——带悬停标题的ExpandableListView

    项目里要加一个点击可收缩展开的列表,要求带悬停标题,详细效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fon ...

  9. Android网络框架Volley(体验篇)

    Volley是Google I/O 2013推出的网络通信库,在volley推出之前我们一般会选择比较成熟的第三方网络通信库,如: android-async-http retrofit okhttp ...

随机推荐

  1. 闲的无聊写了个很(wu)有(liao)意(dao)思(bao)的程序

    下午机房断网了 闲的无聊,写了个小游戏 忘了sleep在哪个库里了.. 自带变色效果哦 #include<iostream> #include<cstdio> #include ...

  2. Json应用案例

    Json应用案例之FastJson   这几天在网上找关于Json的一些案例,无意当中找到了一个我个人感觉比较好的就是阿里巴巴工程师写的FastJson. package com.jerehedu.f ...

  3. Newtonsoft.json多版本共存

    Newtonsoft.json多版本共存 https://blog.csdn.net/dang13579/article/details/72956684 https://blog.csdn.net/ ...

  4. Python的正则表达概述

    本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例.本文的内容不包括如何编写高效的正则表达式.如何优化正则表达式,这些主题请查看其他教程 ...

  5. 【hihocoder 1369】网络流一·Ford-Fulkerson算法

    [Link]:http://hihocoder.com/problemset/problem/1369 [Description] [Solution] 最大流模板题 [NumberOf WA] [R ...

  6. Linux "零拷贝" sendfile函数中文说明及实际操作分析

    Sendfile函数说明 #include ssize_t sendfile(int out_fd, int in_fd, off_t *offset, size_t count); sendfile ...

  7. 洛谷 P1217 [USACO1.5]回文质数 Prime Palindromes

    P1217 [USACO1.5]回文质数 Prime Palindromes 题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找 ...

  8. C#发送邮件DEMO

    虽然网上有很多类似的DEMO,但是还是整个封装好的例子,以便以后用: 发送邮箱是直接在web.config配置的. protected void Button1_Click(object sender ...

  9. 一个小的考试系统 android 思路

    一个小的考试系统 android 思路 假如有 100 组,每组有4个单选钮,设置超时检测确认后去测结果估分视图去切换,如果还有,就再显示下一组 所有结束就给个总结显示 有超时结束过程加上 提示正确选 ...

  10. 微信小程序实现一个简单的表格

    wxml <view class="table"> <view class="tr bg-w"> <view class=&quo ...