在我们的开发过程中，常常会遇到这样的场景:
我们展示一种物品或者为某一事物添加一些标签。比如说，我们买一件衣服，可以有以下几种标签:杰克琼斯，男士,运动等等。
但我们这时候可能并不知道标签的数量和每个标签的文字，所以，我们在开发过程中，需要实现下面的功能:
我们从服务器端获取标签的信息，然后将其动态的添加到布局中，并且我们能够得到我们选择容器的信息，并将选中的标签重新返回至服务器。
因此，我们必须计算出每个标签(Button)的长度，并且将其与它的容器做比较，如果容器剩余的长度并不足以容纳一个标签的时候，那么就会另起一行，添加标签，就这样周而复始，直到所有的标签添加到容器中。
在这之前，我们先来复习下view的绘制过程：
View 的绘制三步：
1，measure 控件的大小
调用onMeasure方法——>调用setMeasuredDimension()方法
// 确定控件的大小
setMeasuredDimension(width, height);
2，layout 控件的位置
调用onLayout方法
/**
* 控制viewgroup 里面的孩子 显示的位置 左上角的坐标 （l,t) 右下角的坐标 (r,b)
*/
protected void onLayout(boolean changed, int l, int t, int r, int b)
3，draw 控件长的样子
onMeasure()---> onLayout()-->onDraw();
view对象是在onstart方法之后的某一个时刻显示出来。
下面就是view绘制过程的流程图:
当然view的绘制过程很复杂，很多细节需要注意
今天我们要实现的效果是这样的，如图：
对于这样一个功能，我们的思路如下：
对于标签容器TagLayout继承ViewGroup：
维护行的集合
当前行
行的水平间距
行间的垂直间距
onMeasure方法：
1，获取父控件的宽度
2，获取行的宽度
3，获取子孩子的个数
4，测量每个子孩子
5，构造行（确定行的宽度，水平间隙），把孩子添加到行中，把行添加行容器中
6，获取自己的高度，累加行高+垂直间距
7，设置自己的宽高
onLayout方法：
1，计算每一行的marginTop和marginLeft
2, 让每一行自己去摆放自己孩子的位置
对于每一行Line：
维护的控件集合
行的最大宽度
行的使用了的宽度
行的高度
行控件的水平间距
方法1：添加控件：
计算控件的宽度，高度
计算行的使用了的宽度，和行的高度
把控件添加到控件集合中
方法2:判断控件是否可以添加
获取控件的宽度
如果剩余宽度不足则不能添加
方法3：摆放每个孩子
计算每个孩子的left，top，right，bottom的值，调用layout方法
自定义控件TayLayout继承ViewGroup,代码如下：
package com.hdc.flowlayoutdemo;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;
/**
* Created by wk on 2016/6/14.
*/
public class TagLayout extends ViewGroup {
private List<Line> mLines = new LinkedList<Line>(); // 用来记录布局中有多少个行
private Line mCurrentLine; //当前行
private int horizontalSpace = 10; //控件之间的间隙
private int verticalSpace = 10; //行之间的间隙
public TagLayout(Context context) {
this(context,null);
}
public TagLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 清空记录,,,不清空就会掉坑了
mLines.clear();
mCurrentLine = null;
//1,获取自身的宽度
int width = MeasureSpec.getSize(widthMeasureSpec);
//2,获取行的宽度
int maxWidth = width - getPaddingLeft() - getPaddingRight();
//3,获取孩子
for(int i = 0;i<getChildCount();i++){
View child = getChildAt(i);
if (child.getVisibility() == View.GONE)
{
continue;
}
//测量孩子的宽高
measureChild(child,widthMeasureSpec,heightMeasureSpec);
//将孩子添加到行中,把行添加到集合中
if(mCurrentLine == null){
mCurrentLine = new Line(maxWidth,horizontalSpace);
mCurrentLine.addView(child);
mLines.add(mCurrentLine);
}else{
if(mCurrentLine.canAdd(child)){
// 可以加入
mCurrentLine.addView(child);
}else{
// 换行
mCurrentLine = new Line(maxWidth, horizontalSpace);
// 添加到list
mLines.add(mCurrentLine);
// 添加孩子
mCurrentLine.addView(child);
}
}
}
//获取自己的高度
int measuredHeight = getPaddingTop() + getPaddingBottom();
for (int i = 0 ;i<mLines.size();i++){
measuredHeight += mLines.get(i).height;
}
measuredHeight = measuredHeight + (mLines.size()-1)*verticalSpace;
// 设置自己的宽度和高度
setMeasuredDimension(width,measuredHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int marginTop = getPaddingTop();
int marginLeft = getPaddingLeft();
// 让line自己去摆放
for(int i = 0;i<mLines.size();i++){
Line line = mLines.get(i);
line.layout(marginLeft,marginTop);
marginTop += verticalSpace + line.height;
}
}
/**
* 用来记录每行控件的摆放
*/
private class Line{
private List<View> mViews = new ArrayList<View>();
private int maxWidth ; //行的宽度
private int space; //行的水平间隙
private int usedWidth ; //行使用了的宽度
public int height; //行高
public Line(int maxWidth, int horizontalSpace) {
this.maxWidth = maxWidth;
this.space = horizontalSpace;
}
/**
* 添加子控件
* @param child
*/
public void addView(View child) {
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
if(mViews.size()==0){
// 如果没有控件的情况下
if(childWidth > maxWidth){
usedWidth = maxWidth;
height = childHeight;
}else{
usedWidth = childWidth;
height = childHeight;
}
}else{
//有控件
usedWidth = usedWidth + space+ childWidth;
height = (childHeight>height)?childHeight:height;
}
mViews.add(child);
}
/**
* 判断是否可以添加子控件
* @param child
* @return
*/
public boolean canAdd(View child) {
int width = child.getMeasuredWidth();
// line中没有view时
if (mViews.size() == 0)
{
// 只要没有，就可以加
return true;
}
if(usedWidth + width + space > maxWidth){
return false;
}else{
return true;
}
}
/**
* 摆放行
* @param marginLeft
* @param marginTop
*/
public void layout(int marginLeft, int marginTop) {
int extraWidth = maxWidth - usedWidth;
int avgWidth = (int)(extraWidth*1f/mViews.size()+0.5f);
//计算控件的上下左右的位置
for(int i=0;i<mViews.size();i++){
View view = mViews.get(i);
int viewWidth = view.getMeasuredWidth();
int viewHeight = view.getMeasuredHeight();
if(avgWidth > 0){
// 重新的去期望孩子的宽高
int specWidth = MeasureSpec.makeMeasureSpec(viewWidth + avgWidth,MeasureSpec.EXACTLY);
int specHeight = MeasureSpec.makeMeasureSpec(viewHeight,MeasureSpec.EXACTLY);
view.measure(specWidth,specHeight);
// 重新获取宽度和高度
viewWidth = view.getMeasuredWidth();
viewHeight = view.getMeasuredHeight();
}
int extraTop =(int) ((height - viewHeight)/2f + 0.5);
int left = marginLeft;
int top = marginTop + extraTop;
int right = left + viewWidth;
int bottom = top + viewHeight;
//摆放每一个孩子的位置
view.layout(left,top,right,bottom);
marginLeft += viewWidth + space;
}
}
}
}
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<com.hdc.flowlayoutdemo.TagLayout
android:id="@+id/flowlayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
package com.hdc.flowlayoutdemo;
import java.util.Random;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.Menu;
import android.widget.TextView;
public class MainActivity extends Activity
{
private String[] mDatas = new String[] { "QQ", "视频", "放开那三国", "电子书", "酒店",
"单机", "小说", "斗地主", "优酷", "网游", "WIFI万能钥匙", "播放器", "捕鱼达人2", "机票",
"游戏", "熊出没之熊大快跑", "美图秀秀", "浏览器", "单机游戏", "我的世界", "电影电视", "QQ空间",
"旅游", "免费游戏", "2048", "刀塔传奇", "壁纸", "节奏大师", "锁屏", "装机必备", "天天动听",
"备份", "网盘", "海淘网", "大众点评", "爱奇艺视频", "腾讯手机管家", "百度地图", "猎豹清理大师",
"谷歌地图", "hao123上网导航", "京东", "youni有你", "万年历-农历黄历", "支付宝钱包" };
private TagLayout mLayout;
private int[] colors = {Color.GRAY,Color.LTGRAY,Color.RED,Color.YELLOW,Color.BLUE};
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLayout = (TagLayout) findViewById(R.id.flowlayout);
mLayout.setPadding(10, 10, 10, 10);
// 动态加载数据
Random rdm = new Random();
for (int i = 0; i < mDatas.length; i++)
{
TextView view = new TextView(this);
view.setText(mDatas[i]);
view.setBackgroundColor(colors[rdm.nextInt(5)]);
view.setTextColor(Color.WHITE);
view.setPadding(5, 5, 5, 5);
view.setGravity(Gravity.CENTER);
view.setTextSize(rdm.nextInt(10) + 16);
// view.setTextSize(15);
mLayout.addView(view);
}
}
}
到这里已经完成，如需源码，点击 这里，欢迎留言。。。
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
