AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android 中自定义ViewGroup实现流式布局的效果

2023-08-16 112
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android 中自定义ViewGroup实现流式布局的效果

前言：

自定义View与自定义ViewGroup的区别：

  1. 自定义View：在没有现成的View，需要自己实现的时候，就使用自定义View,一般继承自View,SurfaceView或其他的View。这个是控件。
  2. 自定义ViewGroup：一般是利用现有的组件根据特定的布局方式来组成新的组件，大多继承自ViewGroup或各种Layout。这个是组件。

自定义View的绘制流程图如下：

下面来实现流式布局，定义一个类FlowLayout继承自ViewGroup,重写里面的相关方法，实现流式布局的效果。

public class FlowLayout extends ViewGroup {
    //每个item横向间距
    private int mHorizontalSpacing = dp2px(16);
    //每个item竖向间距
    private int mVerticalSpacing = dp2px(8);
    //记录所有的行，一行一行的存储，用于Layout
    private List<List<View>> allLines;
    //记录每一行的行高，用于Layout
    List<Integer> lineHeights = new ArrayList<>();
    //new FlowLayout(传入上下文)
    //在代码中创建组件时会调用该构造方法
    //比如创建一个按钮：Button btn=new Button(this)，
    // this 是指当前的 Activity，Activity 是 Context 的子类
    public FlowLayout(Context context) {
        super(context);
    }
    //在xml中使用 在xml转化为java代码的时候，通过反射调用有两个参数的构造函数
    //在 layout 布局文件中使用时调
    //用，参数 attrs 表示当前配置中的属性集合，例如在要 layout.xml 中定义一个按钮：
    //<Button
    // android:layout_width = "match_parent"
    // android:layout_height = "wrap_content"
    //android:text ="OK"/>
    // Android 会调用第二个构造方法 Inflate 出 Button 对象
    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    //代码中有不同的主题style,调用有三个参数的构造函数
    //该方法不会自动调用的，当我们在 Theme 中定义了 Style 属性时通常在第二个
    //构造方法中手动调用。
    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    //进行集合的初始化
    private void initMeasureParams() {
        if (allLines != null) {
            allLines.clear();
        } else {
            allLines = new ArrayList<>();
        }
        if (lineHeights != null) {
            lineHeights.clear();
        } else {
            lineHeights = new ArrayList<>();
        }
    }
    //度量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //每次进入onMeasure()方法中 都需要将全局变量重新初始化
        initMeasureParams();
        //度量子View的宽度和高度
        int childCount = getChildCount();
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        //ViewGroup解析的宽度
        int selfWidth = MeasureSpec.getSize(widthMeasureSpec);
        //ViewGroup解析的高度
        int selfHeight = MeasureSpec.getSize(heightMeasureSpec);
        //保存一行中的所有View
        List<View> lineViews = new ArrayList<>();
        //记录这一行已经使用了多宽的size
        int lineWidthUsed = 0;
        //一行的行高
        int lineHeight = 0;
        //measure过程中,子View要求的父ViewGroup的宽
        int parentNeededWidth = 0;
        //measure过程中,子View要求的父ViewGroup的高
        int parentNeededHeight = 0;
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            LayoutParams childLP = childView.getLayoutParams();
            int childWidthMeasureSpec = getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, childLP.width);
            int childHeightMeasureSpec = getChildMeasureSpec(heightMeasureSpec, paddingBottom + paddingTop, childLP.height);
            childView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
            //获取子View的宽高
            int childMeasuredWidth = childView.getMeasuredWidth();
            int childMeasuredHeight = childView.getMeasuredHeight();
            //通过宽度来判断是否需要换行，通过换行后的每行的行高来获取
            //整个ViewGroup的行高
            if (childMeasuredWidth + lineWidthUsed + mHorizontalSpacing > selfWidth) {
                allLines.add(lineViews);
                lineHeights.add(lineHeight);
                //一旦换行，我们就可以判断当前列需要的宽和高了，所以此时需要记录下来
                parentNeededHeight = parentNeededHeight + lineHeight + mVerticalSpacing;
                parentNeededWidth = Math.max(parentNeededWidth, lineWidthUsed + mHorizontalSpacing);
                lineViews = new ArrayList<>();
                lineWidthUsed = 0;
                lineHeight = 0;
            }
            //view是分行layout的，所以要记录每一行有哪些View，这样可以方便布局
            lineViews.add(childView);
            //每行都会有自己的宽和高
            lineWidthUsed = lineWidthUsed + childMeasuredWidth + mHorizontalSpacing;
            lineHeight = Math.max(lineHeight, childMeasuredHeight);
        }
        //根据子View的度量结果，来重新度量自己的ViewGroup
        //作为一个ViewGroup,它自己也是一个View,它的大小也需要根据它的父亲给它提供的宽高来度量
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int realWidth = (widthMode == MeasureSpec.EXACTLY) ? selfWidth : parentNeededWidth;
        int realHeight = (heightMode == MeasureSpec.EXACTLY) ? selfHeight : parentNeededHeight;
        //度量自己的宽度和高度
        setMeasuredDimension(realWidth, realHeight);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //获取Layout中的行数
        int lineCount = allLines.size();
        int curL = getPaddingLeft();
        int curT = getPaddingTop();
        for (int i = 0; i < lineCount; i++) {
            List<View> lineViews = allLines.get(i);
            int lineHeight = lineHeights.get(i);
            for (int j = 0; j < lineViews.size(); j++) {
                View view = lineViews.get(j);
                int left = curL;
                int top = curT;
                int right = left + view.getMeasuredWidth();
                int bottom = top + view.getMeasuredHeight();
                view.layout(left, top, right, bottom);
                curL = right + mHorizontalSpacing;
            }
            curL = getPaddingLeft();
            curT = lineHeight + curT + mVerticalSpacing;
        }
    }
  //dp转为px
    public static int dp2px(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
    }
}

之后我们在xml中，进行引用，就可以了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".ViewGroupActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="搜索历史"
        android:textColor="@color/black"
        android:textSize="17sp" />
    <com.example.animationtest.view.FlowLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="水果味孕妇奶粉"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童洗衣机"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="洗衣机全自动"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="手机"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童汽车可坐人111111111111111111"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="抽真空收纳袋"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童滑板车"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="稳定器 电容"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童洗衣机"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="衣服"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="运动鞋"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="手表"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="水果味孕妇奶粉"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童洗衣机"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="洗衣机全自动"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="手机"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="抽真空收纳袋"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童滑板车"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="稳定器 电容"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童洗衣机"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="衣服"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="运动鞋"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="手表"
            android:textColor="@color/black"
            android:textSize="16sp" />
    </com.example.animationtest.view.FlowLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="搜索发现"
        android:textColor="@color/black"
        android:textSize="17sp" />
    <com.example.animationtest.view.FlowLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="水果味孕妇奶粉"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童洗衣机"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="洗衣机全自动"
            android:textColor="@color/black" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="手机"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童汽车可坐人111111111111111111"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="抽真空收纳袋"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童滑板车"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="稳定器 电容"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="儿童洗衣机"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="衣服"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="运动鞋"
            android:textColor="@color/black"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tv_back_color"
            android:text="手表"
            android:textColor="@color/black"
            android:textSize="16sp" />
    </com.example.animationtest.view.FlowLayout>
</LinearLayout>

运行后，效果如下：


文章标签：
Android开发
数据格式
XML
关键词：
Android自定义
Android布局
Android ViewGroup
Android自定义ViewGroup
Android viewgroup布局
路宇
目录
相关文章
shuj
|
29天前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图：从零到英雄
【10月更文挑战第42天】 在安卓的世界里，自定义视图是一块画布，让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门，通过深入浅出的方式，让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤，以及如何优化你的视图以提高性能和兼容性。准备好了吗？让我们开始这段创造性的旅程吧！
shuj
25 1
shuj
|
2月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中，自定义视图犹如一座座小岛，等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程，从浅滩走向深海，逐步揭开自定义视图的神秘面纱。
shuj
44 3
游客syv66y3m2ksnc
|
2月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
游客syv66y3m2ksnc
118 0
shuj
|
2月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中，自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View，包括设计理念、实现步骤以及性能优化技巧，帮助开发者打造流畅且富有创意的用户界面。
shuj
95 0
请看我回答~
|
4月前
|
供应链 物联网 区块链
未来触手可及：探索新兴技术的趋势与应用安卓开发中的自定义视图：从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展，新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景，带你领略未来的可能性。
请看我回答~
59 6
天下无贼001
|
1月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中，自定义视图是那抹不可或缺的亮色，它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图，并展示如何通过代码实现这一过程。我们将从基础出发，逐步引导你理解自定义视图的核心概念，然后通过一个实际的代码示例，详细讲解如何将理论应用于实践，最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能，还是仅仅出于对安卓开发的兴趣，这篇文章都将为你提供价值。
天下无贼001
40 4
shuj
|
1月前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域，自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View，以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理，进而探索内存和布局优化技巧，最终实现既美观又高效的安卓界面。
shuj
37 5
游客moiomvrp3vyac2
|
2月前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石，它为开发者提供了无限的可能。通过掌握其原理和实现方法，可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程，包括绘制技巧、事件处理以及性能优化等关键步骤。
游客moiomvrp3vyac2
33 1
mrq4nk6ni2neg
|
3月前
|
Android开发 开发者
安卓开发中的自定义视图：从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中，自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌，更是艺术与科技的完美结合。通过掌握自定义视图，开发者能够打破常规，创造出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战应用，一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者，这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密，将你的应用打造成一件艺术品吧！
mrq4nk6ni2neg
69 10
stefanie燕
|
2月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
stefanie燕
154 0

热门文章

最新文章

  • 1
    Android Service完全解析，关于服务你所需知道的一切(下)
  • 2
    android页面切换和常用方法的执行顺序
  • 3
    《Android游戏开发详解》——第2章，第2.12节设置和访问对象的状态
  • 4
    Android 数据库ORM框架GreenDao学习心得及使用总结<二>
  • 5
    android—使用Expandable实现三级树形结构
  • 6
    Android开发学习笔记：数据存取之File浅析
  • 7
    Android UI开发第八篇——ViewFlipper 左右滑动效果
  • 8
    Android 联系人信息的获取
  • 9
    Android创建桌面快捷方式
  • 10
    我的Android进阶之旅------&gt;Android关于Log的一个简单封装
  • 1
    构建高效Android应用：探究Kotlin协程的优化实践
    58
  • 2
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    400
  • 3
    Android应用开发：实现自定义View的高效绘制
    78
  • 4
    构建高效Android应用：Kotlin协程的实践与优化
    69
  • 5
    构建高效Android应用：Kotlin协程的实践指南
    79
  • 6
    jenkins编译H5做的android端编译卫士app记录
    57
  • 7
    利用Bundle实现Android Activity间消息的传递
    60
  • 8
    Intent在Android中的几种用法
    87
  • 9
    Android如何在Activity和Service之间传递数据
    313
  • 10
    android TextView HTML 的效果
    46

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline

    • 推荐镜像

    更多
  • android.googlesource.com
    • 下一篇
    阿里云oss存储简介和如何使用