自定义viewGroup 实现 流式布局

最新推荐文章于 2023-05-26 10:13:50 发布
最新推荐文章于 2023-05-26 10:13:50 发布
阅读量442 收藏
点赞数 1
分类专栏： android开发 自定义view 文章标签： android 自定义viewgroup 流式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmq121210/article/details/72477648
版权

首先看这篇文章时前 希望你看下http://blog.csdn.net/lmj623565791/article/details/38339817 这篇博客，学习一下简单的自定义viewGroup，如果这篇文章你看懂了，我想你就能直接写这个需求了.
不多说，先虑一下思路：有很多个view，然后一个一个放置到viewGroup中，如果每一个view不能够放下了，就换行。
看下原理图：
红色的是textview的margin 黑色的是viewGroup的padding。
这里写图片描述
接下来看下整体效果图：
这里写图片描述
然后看代码：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //测量模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //测量ViewGroup的宽高
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //ViewGroup的padding
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        //当前宽度
        int curWidth = 0;
        //当前高度
        int curHeight = paddingTop + paddingBottom;
        //最大宽度
        int widthMax = 0;
        for(int i = 0;i <  getChildCount();){
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
            MarginLayoutParams marginLayoutParams = (MarginLayoutParams) childView.getLayoutParams();
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            if(curWidth == 0 ){
                curWidth = paddingLeft + paddingRight;
                curHeight += marginLayoutParams.topMargin + marginLayoutParams.bottomMargin + childHeight;
            }
            if(curWidth + marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth <= widthSize){
                //不换行
                curWidth += marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth;
                i++;
            }else{
                //换行
                widthMax = Math.max(widthMax, curWidth);
                curWidth = 0;
            }
            //判断是否是最后一行
            if(i == getChildCount()){
                widthMax = Math.max(widthMax, curWidth);
                curHeight += marginLayoutParams.topMargin + marginLayoutParams.bottomMargin + childHeight;
            }
        }
        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : widthMax ,
                heightMode == MeasureSpec.EXACTLY  ? heightSize : curHeight);
    }

关于上面的代码我一点点解释

        //测量模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //测量ViewGroup的宽高
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

也就是获取viewGroup的测量方式和viewGroup的宽高

        //初始化curHeight，加上viewGroup的上下padding; 注意： curHeight也就是最终要显示的高度
        curHeight += parentBottom + parentTop;

上述代码其实就是直接将初始化viewGroup的高度，因为始终要记住onMeasure只是计算宽度和高度！，然后每换一次行 curHeight就加一下textview的高度和margin.

if(curWidth == 0 ){
       curWidth = paddingLeft + paddingRight;
       curHeight += marginLayoutParams.topMargin + marginLayoutParams.bottomMargin + childHeight;
}

上述代码和curHeight一样的，就是换一次行，然后curWidth重置为0，然后在加上viewGroup的padding。

if(curWidth + marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth <= widthSize){
     //不换行
     curWidth += marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth;
     i++;
}else{
     //换行
     widthMax = Math.max(widthMax, curWidth);
     curWidth = 0;
}

上述代码基本可以说是onmeasure的核心代码，if判断也就是如果curWidth + TextView的宽度+ TextView的margin < viewgroup的宽度，这表明还能放下该textview，此时应该更新curwidth的值。然后判断下一个TextView（也就是i++）。如果else呢就表明大于viewGroup的宽度,此时应该将curwidth置为0，然后curheight需要加上TextView的margin和TextView的高度。（curHeight其实就是每一行的Height和viewGroup的padding）.

//判断是否是最后一行
if(i == getChildCount()){
   widthMax = Math.max(widthMax, curWidth);
   curHeight += marginLayoutParams.topMargin + marginLayoutParams.bottomMargin + childHeight;
}

这个行是非常关键的，就是当最后一个TextView测量完之后，我们需要加上这一行的高度！！！对于为什么，你可以捋一下这个程序流程就知道了。如果不加的话，就不会显示最后一行数据。

好了，接下来看onLayout：

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //获取ViewGroup的padding
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        //当前宽度;
        int curWidth = paddingLeft;
        //当前高度
        int curHeight = paddingTop;
        for(int i = 0; i < getChildCount();){
            View childView = getChildAt(i);
            MarginLayoutParams marginLayoutParams = (MarginLayoutParams) childView.getLayoutParams();
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            if(curWidth + paddingRight + marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth <= getWidth()){
                //不换行
                childView.layout(curWidth + marginLayoutParams.leftMargin,
                        curHeight + marginLayoutParams.topMargin,
                        curWidth + marginLayoutParams.leftMargin + childWidth,
                        curHeight + marginLayoutParams.topMargin + childHeight);
                curWidth += marginLayoutParams.leftMargin + childWidth + marginLayoutParams.rightMargin;
                i ++;
            }else{
                //换行
                curHeight += marginLayoutParams.topMargin + childHeight + marginLayoutParams.bottomMargin;
                curWidth = paddingLeft;
            }
        }
    }

首先需要注意的是onLayout中的curHeight初始化是：

int curHeight = paddingTop;//

这根onMeasure不一样，因为还是那句话，onMeasure只是测量，而onLayout就是放置位置了，这时就是从上到下，从左到右了。

然后就是核心代码了：

int childHeight = childView.getMeasuredHeight();
if(curWidth + paddingRight + marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth <= getWidth()){
     //不换行
     childView.layout(curWidth + marginLayoutParams.leftMargin,
          curHeight + marginLayoutParams.topMargin,
          curWidth + marginLayoutParams.leftMargin + childWidth,
          curHeight + marginLayoutParams.topMargin + childHeight);
     curWidth += marginLayoutParams.leftMargin + childWidth +   marginLayoutParams.rightMargin;
     i ++;
}else{
     //换行
     curHeight += marginLayoutParams.topMargin + childHeight + marginLayoutParams.bottomMargin;
     curWidth = paddingLeft;
}

思路：比较某一行是否能够放下该TextView 如果能，就直接放置，然后curwidth更新数据（加上放置的TextView的宽度和margin），最后i++（判断下一个TextView是否能够放下）；如果不能放下，这就将curwidth重置为0，然后换行（curheight += TextView的高度 + TextView的上下margin）

然后这个实现了最后贴上整个自定义的ViewGroup：

package com.app.test.testflowproject;

import android.content.Context;
import android.location.GnssMeasurementsEvent;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

/**
 *  Created by ${liumegnqiang} on 2017/5/18.
 */

public class FlowViewGroup extends ViewGroup {
    public FlowViewGroup(Context context) {
        super(context);
    }

    public FlowViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //测量模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //测量ViewGroup的宽高
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //ViewGroup的padding
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        //当前宽度
        int curWidth = 0;
        //当前高度
        int curHeight = paddingTop + paddingBottom;
        //最大宽度
        int widthMax = 0;
        for(int i = 0;i <  getChildCount();){
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
            MarginLayoutParams marginLayoutParams = (MarginLayoutParams) childView.getLayoutParams();
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            if(curWidth == 0 ){
                curWidth = paddingLeft + paddingRight;
                curHeight += marginLayoutParams.topMargin + marginLayoutParams.bottomMargin + childHeight;
            }
            if(curWidth + marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth <= widthSize){
                //不换行
                curWidth += marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth;
                i++;
            }else{
                //换行
                widthMax = Math.max(widthMax, curWidth);
                curWidth = 0;
            }
            //判断是否是最后一行
            if(i == getChildCount()){
                widthMax = Math.max(widthMax, curWidth);
                curHeight += marginLayoutParams.topMargin + marginLayoutParams.bottomMargin + childHeight;
            }
        }
        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : widthMax ,
                heightMode == MeasureSpec.EXACTLY  ? heightSize : curHeight);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //获取ViewGroup的padding
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        //当前宽度;
        int curWidth = paddingLeft;
        //当前高度
        int curHeight = paddingTop;
        for(int i = 0; i < getChildCount();){
            View childView = getChildAt(i);
            MarginLayoutParams marginLayoutParams = (MarginLayoutParams) childView.getLayoutParams();
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            if(curWidth + paddingRight + marginLayoutParams.rightMargin + marginLayoutParams.leftMargin + childWidth <= getWidth()){
                //不换行
                childView.layout(curWidth + marginLayoutParams.leftMargin,
                        curHeight + marginLayoutParams.topMargin,
                        curWidth + marginLayoutParams.leftMargin + childWidth,
                        curHeight + marginLayoutParams.topMargin + childHeight);
                curWidth += marginLayoutParams.leftMargin + childWidth + marginLayoutParams.rightMargin;
                i ++;
            }else{
                //换行
                curHeight += marginLayoutParams.topMargin + childHeight + marginLayoutParams.bottomMargin;
                curWidth = paddingLeft;
            }
        }
    }
}

最后附上源码下载地址：

http://download.csdn.net/detail/lmq121210/9845960

粗鲁先生
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义ViewGroup
qq_41672484的博客
03-20 1237
一、自定义ViewGroup代码 自定义VIew的关键在于重写onMeasure和onDraw，而自定义ViewGroup的关键在于重写onLayout方法。 public class FlowLayout extends ViewGroup { //存储每行由哪些控件 List<List<View>> lineViews = new ArrayList(); //存储每行的高度 List<Integer> heightArray =
自定义ViewGroup实现流式布局
最新发布
璐璐的专栏
06-01 651
自定义ViewGroup原理 流式布局
Android 手把手教您自定义ViewGroup（一）
810364804
08-02 1447
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/38339817， 本文出自:【张鸿洋的博客】 最近由于工作的变动，导致的博客的更新计划有点被打乱，希望可以尽快脉动回来~ 今天给大家带来一篇自定义ViewGroup的教程，说白了，就是教大家如何自定义ViewGroup，如果你对自定义ViewGroup还不是很了解，或者正想学习如何...
带你深入理解自定义View和自定义ViewGroup
Dakaring的专栏
05-26 1807
在实现自定义 View 和自定义 ViewGroup 的过程中，需要注意测量、布局和绘制的流程和方法，以及合理处理子视图的添加和移除。自定义 ViewGroup 是指通过继承现有的 ViewGroup 类，重写相关方法和管理子视图的布局和绘制逻辑，来创建一个新的自定义容器。自定义 View 是指通过继承现有的 View 类，重写相关方法和实现自定义的绘制逻辑，来创建一个新的自定义视图。在以上示例代码中，我们通过继承 View 或 ViewGroup 类，重写了关键的方法，以实现自定义的视图或容器。
Android自定义ViewGroup实现流式布局
01-20
本文主要讲解如何通过自定义ViewGroup实现流式布局（FlowLayout）。流式布局是一种常见的布局方式，它允许子View按照从左到右的顺序填充容器，当一行无法容纳更多子View时，自动换行继续排列。 1. **概述** 流式...
自定义ViewGroup实现流式布局demo
09-13
本教程将深入探讨如何通过自定义ViewGroup来实现一个流式布局（FlowLayout）的示例，这在展示多个小图标或者创建类似瀑布流的效果时非常有用。流式布局能让元素自动换行，根据屏幕尺寸动态调整布局。 首先，我们...
自定义ViewGroup实现流式布局（支持ViewGroup Padding, 子View margin，每行高度可以不一样）
08-31
http://blog.csdn.net/zxt0601/article/details/50533658 博客资源
Android自定义ViewGroup之实现FlowLayout流式布局
09-02
在Android开发中，有时系统默认的布局管理器如LinearLayout、RelativeLayout等并不能满足所有需求，这时我们就需要自定义ViewGroup来实现特定的布局效果。本文将详细介绍如何实现一个自定义的FlowLayout，这是一种...
Android自定义ViewGroup-----流式布局
08-30
原文地址http://blog.csdn.net/android_cmos/article/details/52356229
Android中使用自定义ViewGroup的总结
01-04
分类 自定义Layout可以分为两种情况。 自定义ViewGroup，创造出一些不同于LinearLayout，RelativeLayout等之类的ViewGroup。比如：API 14以后增加的GridLayout、design support library中的CoordinatorLayout等等。 自定义一些已经有的Layout然后加一些特殊的功能。比如：TableLayout以及percent support library中的PercentFrameLayout等等。 流程 自定义View的流程是：onMeasure()->onLayout()->onDraw()。自定义V
自定义ViewGroup——自定义布局
weixin_40763897的博客
01-20 2743
自定义ViewGroup和自定义View的步骤差不多。 自定义ViewGroup需要重写onMeasure方法测量子控件的宽高和自己的宽高，然后在onLayout方法中摆放子控件。 自定义View则是需要重写onMeasure根据测量模式和父控件给出的建议的宽高值计算自己的宽高，然后在父控件为其指定的区域绘制自己的图形。 自定义ViewGroup的步骤： ①. 继承ViewGroup，覆盖构造...
自定义View和自定义ViewGroup实例讲解
小Tian的博客
11-09 288
参考:https://www.jianshu.com/p/c84693096e41 自定义View 定义一个自定义View的步骤: 1.需要继承View或者View的子类; 2.重写至少两个构造方法; 3.自定义xml中的属性; declare-styleable中的format的类型: reference:引用类型,如@drawable/xxx color:颜色,如#fff000 dimension:尺寸,如11dp 其他的:float,integer,boolean,string
android 自定义控件 new,android--------自定义控件 之 ViewGroup
weixin_34910772的博客
05-25 194
今天这篇博文主要来说说 自定义控件的 ViewGroup。什么是ViewGroup？ViewGroup是一种容器。它包含零个或以上的View及子ViewViewGroup有什么作用？ViewGroup内部可以用来存放多个View控件，并且根据自身的测量模式，来测量View子控件，并且决定View子控件的位置。这在下面会逐步讲解它是怎么测量及决定子控件大小和位置的。自定义控件public class...
自定义ViewGroup实现Android多风格SlidingMenu
这表明开发者可以通过自定义ViewGroup实现多种交互和视觉效果，提高应用的用户体验。 自定义ViewGroup是Android开发中的高级技巧，它允许开发者深入理解Android视图系统的底层机制，从而创造出更加个性化的界面组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值