很多的搜索界面都会有类似的布局：好多的标签依次顺序排列，当一行放不下后自动移动到下一行，如图：

示例

这个布局是从网络上找的一个，但是有点bug(子控件数量大于两行会与第二行view重合)，我在此基础上进行了修改，在此也谢谢网络上的大神们。

大体思路：

设计一个流布局继承于ViewGroup，实现onMeasure()与onLayout()方法。我们要动态 的添加子View，所以我们还要写一个方法让布局添加我们产生的view。

首先是一个我们添加子View的方法createChild，我们在这个方法里进行view的部分属性的设置 例如他们的padding是多少，margin是多少，文字的居中，点击事件等等。

private void createChild(String[] data, final Context context, int textSize, int pl, int pt, int pr, int pb, int ml, int mt, int mr, int mb){

int size = data.length;

for(int i = 0;i

String text = data[i];

//通过判断style是TextView还是Button进行不同的操作，还可以继续添加不同的view

if (style == TEXTVIEW_STYLE){

btn = new TextView(context);

((TextView) btn).setGravity(Gravity.CENTER);

((TextView) btn).setText(text);

((TextView) btn).setTextSize(textSize);

}else if (style == BUTTON_STYLE){

btn = new Button(context);

((Button) btn).setGravity(Gravity.CENTER);

((Button) btn).setText(text);

((Button) btn).setTextSize(textSize);

}

btn.setClickable(true);

btn.setPadding(dip2px(context, pl),dip2px(context, pt),dip2px(context, pr),dip2px(context, pb));

MarginLayoutParams params = new MarginLayoutParams(MarginLayoutParams.WRAP_CONTENT,MarginLayoutParams.WRAP_CONTENT);

params.setMargins(ml, mt, mr, mb);

btn.setLayoutParams(params);

final int finalI = i;

//给每个view添加点击事件

btn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

markClickListener.clickMark(finalI);

}

});

this.addView(btn);

}

}

我们添加了view之后需要在onLayout方法中测量每个子view 的高度以及每一行的高度和宽度。

//onLayout中完成对所有childView的位置以及大小的指定

@Override

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

mAllViews.clear(); //清空子控件列表

mLineHeight.clear(); //清空高度记录列表

int width = getWidth();//得到当前控件的宽度(在onmeasure方法中已经测量出来了)

int childCount = getChildCount();

// 存储每一行所有的childView

List lineViews = new ArrayList();

int lineWidth = 0; //行宽

int lineHeight = 0; //总行高

for(int i = 0 ; i

View child = getChildAt(i);

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();//得到属性参数

int childWidth = child.getMeasuredWidth();

int childHeight = child.getMeasuredHeight();

// 如果已经需要换行

if (i == 3){

i = 3;

}

if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) //大于父布局的宽度

{

// 记录这一行所有的View以及最大高度

mLineHeight.add(lineHeight);

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

mAllViews.add(lineViews);

lineWidth = 0;// 重置行宽

lineViews = new ArrayList();

}

/**

* 如果不需要换行，则累加

*/

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

// 每一行的所有的views

lineViews = mAllViews.get(i);

// 当前行的最大高度 每一行的高度都相同 所以使用(i+1)进行设置高度

lineHeight = (i+1)*mLineHeight.get(i);

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

View lineChild = lineViews.get(j);

if(lineChild.getVisibility() == View.GONE){

continue;

}

MarginLayoutParams lp = (MarginLayoutParams) lineChild.getLayoutParams();

//开始画标签了。左边和上边的距离是要根据累计的数确定的。

int lc = left + lp.leftMargin;

int tc = top+lp.topMargin;

int rc = lc+lineChild.getMeasuredWidth();

int bc = tc+lineChild.getMeasuredHeight();

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

left += lineChild.getMeasuredWidth() + lp.rightMargin + lp.leftMargin;

}

left = 0;//将left归零

top = lineHeight;

}

}

以前的第三行与第二行重合的bug主要在于

//之前代码

//lineHeight = mLineHeight.get(i);之前的代码 通过debug看每一行的高度其实是相同的 造成第二行与第三行重合

//修改后代码

lineHeight = (i+1)*mLineHeight.get(i);

之后在onMeasure方法中通过子view的高度和宽度测量整体布局的宽高。

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int heightSize = MeasureSpec.getSize(heightMeasureSpec);

int childCount = getChildCount();

int lineWidth = 0;

int lineHeight = 0;

int width = 0;//warpcontet是需要记录的宽度

int height = 0;

for(int i = 0 ; i< childCount;i++){

View child = getChildAt(i);

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

measureChild(child, widthMeasureSpec, heightMeasureSpec);

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

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

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

// Log.e(TAG, "onMeasure: lineHeight = "+lineHeight+" childHeight = "+childHeight );

if(lineWidth+childWidth>widthSize){

width = Math.max(lineWidth, childWidth);//这种情况就是排除单个标签很长的情况

lineWidth = childWidth;//开启新行

height += lineHeight;//记录总行高

lineHeight = childHeight;//因为开了新行，所以这行的高度要记录一下

}else{

lineWidth += childWidth;

// lineHeight = Math.max(lineHeight, childHeight); //记录行高

lineHeight = Math.max(height, childHeight); //记录行高

}

// 如果是最后一个，则将当前记录的最大宽度和当前lineWidth做比较

if (i == childCount - 1)

{

width = Math.max(width, lineWidth); //宽度

height += lineHeight; //

}

}

setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? widthSize

: width, (heightMode == MeasureSpec.EXACTLY) ? heightSize

: height);

/* int width1 = (widthMode == MeasureSpec.EXACTLY)? widthSize:width;

int height1 = (heightMode == MeasureSpec.EXACTLY)? heightSize:height;

Log.e(TAG, "onMeasure: widthSize ="+widthSize+" heightSize = "+heightSize );

Log.e(TAG, "onMeasure: width ="+width+" height = "+height );

Log.e(TAG, "onMeasure: widthEnd ="+width1+" heightEnd = "+height1 );*/

}

以上就是大体思路了。接下来上整体代码：

/**

* 自动换行布局

* Created by Went_Gone on 2016/9/20.

*/

public class WrapLayout extends ViewGroup {

private static final String TAG = "WrapLayout";

/**

* TextView的style

*/

public int TEXTVIEW_STYLE = 0;

/**

* Button的style

*/

public int BUTTON_STYLE = 1;

private int style;

private View btn;

public WrapLayout(Context context) {

super(context);

}

public WrapLayout(Context context, AttributeSet attrs) {

super(context, attrs);

}

public WrapLayout(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

/**

* 设置数据

* @param data 文字

* @param context 上下文

* @param textSize 文字大小

* @param pl 左内边距

* @param pt 上内边距

* @param pr 右内边距

* @param pb 下内边距

* @param ml 左外边距

* @param mt 上外边距

* @param mr 右外边距

* @param mb 下外边距

*/

public void setData(String[] data,Context context,int textSize,int pl,int pt,int pr,int pb,int ml,int mt,int mr,int mb){

createChild(data,context,textSize, pl, pt, pr, pb, ml, mt, mr, mb);

}

public void setData(List data, Context context, int textSize, int pl, int pt, int pr, int pb, int ml, int mt, int mr, int mb){

String[] mydata = null;

if(data!=null){

int length = data.size();

mydata = new String[length];

for(int i = 0 ; i

mydata[i] = data.get(i);

}

}

setData(mydata,context, textSize,pl, pt, pr, pb, ml, mt, mr, mb);

}

private void createChild(String[] data, final Context context, int textSize, int pl, int pt, int pr, int pb, int ml, int mt, int mr, int mb){

int size = data.length;

for(int i = 0;i

String text = data[i];

//通过判断style是TextView还是Button进行不同的操作，还可以继续添加不同的view

if (style == TEXTVIEW_STYLE){

btn = new TextView(context);

((TextView) btn).setGravity(Gravity.CENTER);

((TextView) btn).setText(text);

((TextView) btn).setTextSize(textSize);

}else if (style == BUTTON_STYLE){

btn = new Button(context);

((Button) btn).setGravity(Gravity.CENTER);

((Button) btn).setText(text);

((Button) btn).setTextSize(textSize);

}

btn.setClickable(true);

btn.setPadding(dip2px(context, pl),dip2px(context, pt),dip2px(context, pr),dip2px(context, pb));

MarginLayoutParams params = new MarginLayoutParams(MarginLayoutParams.WRAP_CONTENT,MarginLayoutParams.WRAP_CONTENT);

params.setMargins(ml, mt, mr, mb);

btn.setLayoutParams(params);

final int finalI = i;

//给每个view添加点击事件

btn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

markClickListener.clickMark(finalI);

}

});

this.addView(btn);

}

}

private MarkClickListener markClickListener;

public void setMarkClickListener(MarkClickListener markClickListener) {

this.markClickListener = markClickListener;

}

public interface MarkClickListener{

void clickMark(int position);

}

/**

* 根据手机的分辨率从 dp 的单位 转成为 px(像素)

*/

private int dip2px(Context context, float dpValue) {

final float scale = context.getResources().getDisplayMetrics().density;

return (int) (dpValue * scale + 0.5f);

}

@Override

public LayoutParams generateLayoutParams(AttributeSet attrs) {

return new MarginLayoutParams(getContext(), attrs);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int heightSize = MeasureSpec.getSize(heightMeasureSpec);

int childCount = getChildCount();

int lineWidth = 0;

int lineHeight = 0;

int width = 0;//warpcontet是需要记录的宽度

int height = 0;

for(int i = 0 ; i< childCount;i++){

View child = getChildAt(i);

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

measureChild(child, widthMeasureSpec, heightMeasureSpec);

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

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

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

// Log.e(TAG, "onMeasure: lineHeight = "+lineHeight+" childHeight = "+childHeight );

if(lineWidth+childWidth>widthSize){

width = Math.max(lineWidth, childWidth);//这种情况就是排除单个标签很长的情况

lineWidth = childWidth;//开启新行

height += lineHeight;//记录总行高

lineHeight = childHeight;//因为开了新行，所以这行的高度要记录一下

}else{

lineWidth += childWidth;

// lineHeight = Math.max(lineHeight, childHeight); //记录行高

lineHeight = Math.max(height, childHeight); //记录行高

}

// 如果是最后一个，则将当前记录的最大宽度和当前lineWidth做比较

if (i == childCount - 1)

{

width = Math.max(width, lineWidth); //宽度

height += lineHeight; //

}

}

setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? widthSize

: width, (heightMode == MeasureSpec.EXACTLY) ? heightSize

: height);

/* int width1 = (widthMode == MeasureSpec.EXACTLY)? widthSize:width;

int height1 = (heightMode == MeasureSpec.EXACTLY)? heightSize:height;

Log.e(TAG, "onMeasure: widthSize ="+widthSize+" heightSize = "+heightSize );

Log.e(TAG, "onMeasure: width ="+width+" height = "+height );

Log.e(TAG, "onMeasure: widthEnd ="+width1+" heightEnd = "+height1 );*/

}

/**

* 存储所有的View，按行记录

*/

private List> mAllViews = new ArrayList>();

/**

* 记录每一行的最大高度

*/

private List mLineHeight = new ArrayList();

//onLayout中完成对所有childView的位置以及大小的指定

@Override

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

mAllViews.clear(); //清空子控件列表

mLineHeight.clear(); //清空高度记录列表

int width = getWidth();//得到当前控件的宽度(在onmeasure方法中已经测量出来了)

int childCount = getChildCount();

// 存储每一行所有的childView

List lineViews = new ArrayList();

int lineWidth = 0; //行宽

int lineHeight = 0; //总行高

for(int i = 0 ; i

View child = getChildAt(i);

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();//得到属性参数

int childWidth = child.getMeasuredWidth();

int childHeight = child.getMeasuredHeight();

// 如果已经需要换行

if (i == 3){

i = 3;

}

if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) //大于父布局的宽度

{

// 记录这一行所有的View以及最大高度

mLineHeight.add(lineHeight);

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

mAllViews.add(lineViews);

lineWidth = 0;// 重置行宽

lineViews = new ArrayList();

}

/**

* 如果不需要换行，则累加

*/

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

// 每一行的所有的views

lineViews = mAllViews.get(i);

// 当前行的最大高度 每一行的高度都相同 所以使用(i+1)进行设置高度

lineHeight = (i+1)*mLineHeight.get(i);

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

View lineChild = lineViews.get(j);

if(lineChild.getVisibility() == View.GONE){

continue;

}

MarginLayoutParams lp = (MarginLayoutParams) lineChild.getLayoutParams();

//开始画标签了。左边和上边的距离是要根据累计的数确定的。

int lc = left + lp.leftMargin;

int tc = top+lp.topMargin;

int rc = lc+lineChild.getMeasuredWidth();

int bc = tc+lineChild.getMeasuredHeight();

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

left += lineChild.getMeasuredWidth() + lp.rightMargin + lp.leftMargin;

}

left = 0;//将left归零

top = lineHeight;

}

}

public void setStyle(int style) {

this.style = style;

}

}

只需要初始化WrapLayout的对象后调用setData的方法即可，setData暴露在外的有两个方法 一个是设置String数组的，另一个是设置StringList的。这个布局还可以继续根据自己的需要添加各种东西，包括背景，文字大小等等。

在Activity中使用：

android:id="@+id/act_wrap"

android:layout_width="match_parent"

android:layout_height="wrap_content">

myFlowLayout.setData(myData1, this, 15, 10, 10, 10, 10, 10, 10, 10, 10);

myFlowLayout.setMarkClickListener(new WrapLayout.MarkClickListener() {

@Override

public void clickMark(int position) {

Toast.makeText(WrapActivity.this, myData1[position], Toast.LENGTH_SHORT).show();

}

});

效果图：

两行，并点击文字效果

多行效果

android 按钮换行_自定义Android自动换行的布局相关推荐

  1. android 按钮换行_Android LinearLayout实现自动换行

    由于前段时间项目中使用到了自动换行的线性布局,本来打算用表格布局在里面一个个的用Java代码添加ImageView的,但是添加的View控件是不确定的,因为得靠服务器的数据返回,就这样手动用Java代 ...

  2. Android按钮设计，自定义按钮，圆形按钮，颜色

    In this tutorial, we'll be customizing the Buttons in our Android Application. If you aren't aware o ...

  3. android shpe 三角形_在Android中制作三角形按钮

    有没有办法制作一个可以用作Android按钮的等腰三角形? 此按钮占据整个屏幕: 这是我当前的xml: android:layout_width="match_parent" an ...

  4. android edittext换行位置不变,Android EditText使用自动换行但无硬性返回

    我也在寻找一些东西来做到这一点.我发现的唯一的解决办法是延长的EditText如下: package com.kylemilligan.test; import android.content.Con ...

  5. android 顶部导航栏 自定义,Android自定义NavigationController - 安卓自定义导航栏 --【WJ】...

    注意: 本文主要介绍安卓自定义顶部导航栏(iOS中成为NavigationBar):写的不尽如人意的地方,请见谅~ 概述如下: 环境 :Android Studio 1.4 for Mac 语言 :如 ...

  6. android按钮点击变化,Android实现按钮点击效果（第一次点击变色，第二次恢复）...

    1.首先创建一个按钮 android:id="@+id/click" android:layout_width="fill_parent" android:la ...

  7. android edittext不可复制_精选Android中高级面试题：性能优化，JNI，设计模式

    性能优化 1.图片的三级缓存中,图片加载到内存中,如果内存快爆了,会发生什么?怎么处理? 参考回答:首先我们要清楚图片的三级缓存是如何的: 如果内存足够时不回收.内存不够时就回收软引用对象 2.内存中 ...

  8. android按钮控件常见问题,Android的基本控件和Activity的应用总结

    Android的基本控件 常用界面控件 TextView 显示文本信息 button 普通按钮 EditText 可编辑的文本框组件(输入框) ImageView 用于显示图片 ImageBUtton ...

  9. [Android学习笔记四] 自定义Android组件之组合方式创建密码框组件

    Android中所有控件(也称组件)都继承自adnroid.view.View类,android.view.ViewGroup是View类的重要子类,绝大多书的布局类就继承自ViewGroup类. 参 ...

  10. android 按钮在键盘上,Android使用键盘上的完成按钮点击按钮

    确定在我的应用程序我有一个字段为用户输入一个数字.我将字段设置为只接受数字.当用户点击字段时,它会弹出键盘.在键盘上(在ICS上)有一个完成按钮.我想要在键盘上的完成按钮触发提交按钮我有我的应用程序. ...

最新文章

  1. flutter加载本地html标签,Flutter中如何加载并预览本地的html文件的方法
  2. 基于live555的视频直播 DM368IPNC RTSP分析
  3. Nginx服务器之负载均衡策略（6种）
  4. XML 反序列化为Model
  5. idea安装drl插件
  6. [android-wifi](7.1)漫游部分逻辑
  7. android开发我的新浪微博客户端系列教程
  8. delphi接口带上请求头是什么意思_python接口自动化（二十）--token登录（详解）...
  9. python实例化次数怎么算_关于python多次实例化
  10. J-Link软件和文档包的版本发行说明（4）[V6.50 ~ V6.90a版本]
  11. 腾讯互娱开源分布式开发框架Pebble
  12. 谢烟客---------Linux之文件系统管理创建
  13. Android Accessibility大致解析,通过adb运行纯java代码打开应用的辅助功能
  14. ASII码：小写字符比大写字符大32
  15. 史帝奇动感影院技术|4D特效影院|4D电影院的建造要求
  16. 邮箱验证（正则表达式）
  17. python 验证码图片 模拟登录_【python】带图片验证码的登录自动化实战
  18. 黑马Python数据分析网课个人笔记01
  19. django中常用的数据查询方法
  20. C++ LinuxWebServer项目(5)同步异步日志系统

热门文章

  1. 5. Web 的结构组件
  2. 4. jQuery 事件
  3. 6. JavaScript HTML DOM
  4. java 读取clob字段的几种方法
  5. [2019杭电多校第五场][hdu6630]permutation 2
  6. 2018/3/27 省选模拟赛 140分
  7. img 图片加载出错时 显示默认图片
  8. 测试：第二章 测试过程
  9. jenkins 管理员账号丢失
  10. 代理设置(wget/yum)