我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Android自定义ViewGroup之实现FlowLayout流式布局

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Android自定义ViewGroup之实现FlowLayout流式布局

整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/
 一、FlowLayout介绍
 所谓FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行。有点像所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局。Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: 

github上已有现成的FlowLayout,本文是从无到有去制作。

二、制作分析 

1、对于FlowLayout,需要指定的LayoutParams,我们目前只需要能够识别margin即可,即使用MarginLayoutParams.
2、onMeasure中计算所有childView的宽和高,然后根据childView的宽和高,计算自己的宽和高。(当然,如果不是wrap_content,直接使用父ViewGroup传入的计算值即可)
3、onLayout中对所有的childView进行布局。 

三、代码 
1、MainActivity.java


 public class MainActivity extends Activity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
//  setContentView(R.layout.activity_main2);
//  setContentView(R.layout.activity_main3);
 }
} 

 2、CustomViewGroup.java


public class CustomViewGroup extends ViewGroup {
 private final String TAG = getClass().getSimpleName();
 public CustomViewGroup(Context context) {
  super(context);
 }
 public CustomViewGroup(Context context, AttributeSet attrs) {
  super(context, attrs);
 }
 public CustomViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
 }
 
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
  return new MarginLayoutParams(getContext(), attrs);
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  //1、获得此ViewGroup上级容器为其推荐的宽和高,以及计算模式
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
  int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
  // 2、如果ViewGroup布局是wrap_content时,根据childView的尺寸,计算容器的宽和高
  int width = 0;//ViewGroup的宽度
  int height = 0;//ViewGroup的高度
  int lineWidth = 0;//childView所占据的当前行总宽度
  int lineHeight = 0;//childView所占据的各行总高度
  int cCount = getChildCount();////childView的数量
  for(int i=0; i<cCount; i++){//遍历每个childView
   View childView = getChildAt(i);
   measureChild(childView, widthMeasureSpec, heightMeasureSpec);// 测量当前child的宽和高
   MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
   int cWidth = childView.getMeasuredWidth() + mlp.leftMargin + mlp.rightMargin;
   int cHeight = childView.getMeasuredHeight() + mlp.topMargin + mlp.bottomMargin;
   if(lineWidth + cWidth > sizeWidth){//如果加入当前childView后超出最大宽度,width取最大高度,累加lineHeight,然后开启新行
    width = Math.max(lineWidth, cWidth);
    height += lineHeight;
    lineWidth = cWidth;
   }else{//如果加入当前childView后小于最大宽度,则累加lineWidthheight lineHeight取最大高度
    lineWidth += cWidth;
    height = Math.max(lineHeight, cHeight);
   }
   if(i == cCount-1){// 如果是最后一个childView,则将当前记录的最大宽度和当前lineWidth做比较
    width = Math.max(lineWidth, cWidth);
    height += lineHeight;
   }
  }
  //3、如果是wrap_content设置为我们计算的值;否则直接设置为父容器计算的值
  setMeasuredDimension(
    (widthMode == MeasureSpec.EXACTLY) ? sizeWidth : width,
    (heightMode == MeasureSpec.EXACTLY) ? sizeHeight : height
  );
 }
 
 private List<List<View>> allChildViews = new ArrayList<List<View>>();//存储所有的childView,按行记录
 private List<Integer> maxLineHeight = new ArrayList<Integer>();//存储每行的最大高度值
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  allChildViews.clear();
  maxLineHeight.clear();
  int width = getWidth();//每行的最大宽度
  int lineWidth = 0;//每行的即时宽度
  int lineHeight = 0;//每行的即时高度
  List<View> lineChildViews = new ArrayList<View>();//存储每行所有的childView
  int cCount = getChildCount();
  for(int i=0; i<cCount; i++){//遍历所有childView
   View childView = getChildAt(i);
   MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
   int cWidth = childView.getMeasuredWidth();
   int cHeight = childView.getMeasuredHeight();
   if(lineWidth + cWidth + mlp.leftMargin + mlp.rightMargin > width){//如果需要换行
    maxLineHeight.add(lineHeight);// 存储这一行最大高度
    allChildViews.add(lineChildViews);// 将当前行的childView保存,然后开启新的ArrayList保存下一行的childView
    lineChildViews = new ArrayList<View>();
    lineWidth = 0;// 重置行宽
   }else{//如果不需要换行
    lineWidth += cWidth + mlp.leftMargin + mlp.rightMargin;//即时宽度累加
    lineHeight = Math.max(lineHeight,cHeight + mlp.topMargin + mlp.bottomMargin );//即时高度取最大值
    lineChildViews.add(childView);//把当前childView存入这一行的集合
   }
  }
  // 记录最后一行
  maxLineHeight.add(lineHeight);
  allChildViews.add(lineChildViews);
  int left = 0;//左坐标
  int top = 0;//上坐标
  int lineNums = allChildViews.size();// 得到总行数
  for (int i = 0; i < lineNums; i++) {
   lineChildViews = allChildViews.get(i);// 取得每一行的所有的views
   lineHeight = maxLineHeight.get(i);// 取得当前行的最大高度
   Log.e(TAG, "第" + i + "行 :" + lineChildViews.size() + " , " + lineChildViews);
   Log.e(TAG, "第" + i + "行, :" + lineHeight);
   // 遍历当前行所有的View 
   for (int j = 0; j < lineChildViews.size(); j++) {
    View childView = lineChildViews.get(j);//取得childView
    if (childView.getVisibility() == View.GONE) {
     continue;
    }
    MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
    //计算childView的left,top,right,bottom
    int lc = left + mlp.leftMargin;
    int tc = top + mlp.topMargin;
    int rc = lc + childView.getMeasuredWidth();
    int bc = tc + childView.getMeasuredHeight();
    Log.e(TAG, childView + " , l = " + lc + " , t = " + t + " , r =" + rc + " , b = " + bc);
    childView.layout(lc, tc, rc, bc);//设置这个childView的位置
    left += childView.getMeasuredWidth() + mlp.rightMargin + mlp.leftMargin;//左坐标累加
   }
   left = 0;//开始新的一行,左坐标重置
   top += lineHeight;//开始新的一行,上坐标累加
  }
 }
}

 3、activity_main.xml


<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.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
  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="IT工程师" />
  <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.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>
</LinearLayout>

 4、activity_main2.xml


<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.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
  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="IT工程师" />
  <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.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>
 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
  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="IT工程师"
   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.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>
 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
  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="IT工程师"
   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.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>
</LinearLayout> 

 5、activity_main3.xml


<com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup 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="IT工程师"
  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.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

您可能感兴趣的文章:Android自定义ViewGroup实现带箭头的圆角矩形菜单Android自定义ViewGroup实现标签浮动效果Android App开发中自定义View和ViewGroup的实例教程Android自定义ViewGroup实现堆叠头像的点赞LayoutAndroid应用开发中自定义ViewGroup的究极攻略Android动画效果之自定义ViewGroup添加布局动画(五)Android自定义ViewGroup实现受边界限制的滚动操作(3)Android自定义ViewGroup的实现方法Android自定义ViewGroup实现可滚动的横向布局(2)Android进阶教程之ViewGroup自定义布局


免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Android自定义ViewGroup之实现FlowLayout流式布局

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Android自定义ViewGroup之实现FlowLayout流式布局

整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/ 一、FlowLayout介绍 所谓FlowLayout,就是控件根据ViewGroup的宽,自
2022-06-06

Android实现简单的自定义ViewGroup流式布局

本文我们将一起复习一下ViewGroup的测量布局方式。然后会以入门级的FlowLayout为例,来看看流式布局是如何测量与布局的,感兴趣的可以了解一下
2022-12-09

Android自定义ViewGroup之FlowLayout(三)

本篇继续来讲自定义ViewGroup,给大家带来一个实例:FlowLayout。何为FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行,所以也叫流式布局。Android并没有
2022-06-06

Android自定义ViewGroup实现标签流容器FlowLayout

本篇文章讲的是Android 自定义ViewGroup之实现标签流式布局-FlowLayout,开发中我们会经常需要实现类似于热门标签等自动换行的流式布局的功能,网上也有很多这样的FlowLayout,但不影响我对其的学习。和往常一样,主要
2022-06-06

Android 自定义流式布局FlowLayout 自己造的轮子真香!

效果图二话不说,先上效果图原创文章 25获赞 45访问量 10万+关注私信展开阅读全文作者:A类函数
2022-06-06

Android自定义ViewGroup横向布局(1)

最近学习自定义viewgroup,我的目标是做一个可以很想滚动的listview,使用adapter填充数据,并且使用adapter.notifyDataSetChanged()更新数据。 不过一口吃不成一个胖子(我吃成这样可是好几年的积累
2022-06-06

Android 实现FlowLayout流式布局(热门标签)

先上效果图:接着看代码实现:public class FlowLayout extends ViewGroup {protected DataSetObserver mDataSetObserver;private FlowBaseAdap
2022-06-06

Android自定义ViewGroup实现可滚动的横向布局(2)

上一篇文章自定义viewgroup(1)地址://www.jb51.net/article/100608.htm 这里直接代码:package com.example.libingyuan.horizontallistview.Scroll
2022-06-06

Android简单实现自定义流式布局的方法

本文实例讲述了Android简单实现自定义流式布局的方法。分享给大家供大家参考,具体如下: 首先来看一下 手淘HD - 商品详情 - 选择商品属性 页面的UI商品有很多尺码,而且展现每个尺码所需要的View的大小也不同(主要是宽度),所以在
2022-06-06

Android动画效果之自定义ViewGroup添加布局动画(五)

前言:前面几篇文章介绍了补间动画、逐帧动画、属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画。本文将通过对自定义图片选择控件设置动画为例来学习布
2022-06-06

Android自定义ViewGroup的实现方法

在android中提供了常见的几种ViewGroup的实现,包括LinearLayout、Relativeayout、FrameLayout等。这些ViewGroup可以满足我们一般的开发需求,但是对于界面要求复杂的,这几个布局就
2022-06-06

Android自定义viewgroup可滚动布局 GestureDetector手势监听(5)

这篇效果和上一篇://www.jb51.net/article/100638.htm的效果是一样的,但是不再在OnTouchEvent中写代码,而是使用系统自带的类GestureDetector来监听手势以及滑动事件等等,它内置了滑动,点击
2022-06-06

Android自定义ViewGroup实现侧滑菜单

这篇文章主要为大家详细介绍了Android如何通过自定义ViewGroup实现侧滑菜单,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
2023-01-05

Android自定义实现BaseAdapter的优化布局

上一篇中我们介绍了自定义实现BaseAdapter的普通实现布局,然而上一章也说了普通实现的方式效率会很低,而且对系统开销也很大,所以,那样的实现是为了让初学者能知道可以这样使用,在实际项目中不可能使用那种方式的,要是你在做项目的时候使用普
2022-06-06

Android 自定义布局竖向的ViewPager的实现

Android 自定义布局竖向的ViewPager的实现效果图:这个自定义控件涉及到的知识点:自定义ViewGroup中onMeasure和onLayout的写法 弹性滚动Scroller的用法 速度轨迹追踪器VelocityTracker
2023-05-31

Android自定义ViewGroup嵌套与交互实现幕布全屏滚动

这篇文章主要为大家介绍了Android自定义ViewGroup嵌套与交互实现幕布全屏滚动效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-17

编程热搜

  • Android:VolumeShaper
    VolumeShaper(支持版本改一下,minsdkversion:26,android8.0(api26)进一步学习对声音的编辑,可以让音频的声音有变化的播放 VolumeShaper.Configuration的三个参数 durati
    Android:VolumeShaper
  • Android崩溃异常捕获方法
    开发中最让人头疼的是应用突然爆炸,然后跳回到桌面。而且我们常常不知道这种状况会何时出现,在应用调试阶段还好,还可以通过调试工具的日志查看错误出现在哪里。但平时使用的时候给你闹崩溃,那你就欲哭无泪了。 那么今天主要讲一下如何去捕捉系统出现的U
    Android崩溃异常捕获方法
  • android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
    系统的设置–>电池–>使用情况中,统计的能耗的使用情况也是以power_profile.xml的value作为基础参数的1、我的手机中power_profile.xml的内容: HTC t328w代码如下:
    android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
  • Android SQLite数据库基本操作方法
    程序的最主要的功能在于对数据进行操作,通过对数据进行操作来实现某个功能。而数据库就是很重要的一个方面的,Android中内置了小巧轻便,功能却很强的一个数据库–SQLite数据库。那么就来看一下在Android程序中怎么去操作SQLite数
    Android SQLite数据库基本操作方法
  • ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
    工作的时候为了方便直接打开编辑文件,一些常用的软件或者文件我们会放在桌面,但是在ubuntu20.04下直接直接拖拽文件到桌面根本没有效果,在进入桌面后发现软件列表中的软件只能收藏到面板,无法复制到桌面使用,不知道为什么会这样,似乎并不是很
    ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
  • android获取当前手机号示例程序
    代码如下: public String getLocalNumber() { TelephonyManager tManager =
    android获取当前手机号示例程序
  • Android音视频开发(三)TextureView
    简介 TextureView与SurfaceView类似,可用于显示视频或OpenGL场景。 与SurfaceView的区别 SurfaceView不能使用变换和缩放等操作,不能叠加(Overlay)两个SurfaceView。 Textu
    Android音视频开发(三)TextureView
  • android获取屏幕高度和宽度的实现方法
    本文实例讲述了android获取屏幕高度和宽度的实现方法。分享给大家供大家参考。具体分析如下: 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即
    android获取屏幕高度和宽度的实现方法
  • Android自定义popupwindow实例代码
    先来看看效果图:一、布局
  • Android第一次实验
    一、实验原理 1.1实验目标 编程实现用户名与密码的存储与调用。 1.2实验要求 设计用户登录界面、登录成功界面、用户注册界面,用户注册时,将其用户名、密码保存到SharedPreference中,登录时输入用户名、密码,读取SharedP
    Android第一次实验

目录