AndroidUI系列-ViewGroup流式布局

2024-02-29 07:32
文章标签 布局 系列 流式 viewgroup androidui

本文主要是介绍AndroidUI系列-ViewGroup流式布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

很多时候，我们会遇见各种各样的需求，流式布局算是非常常见的一种。像各种菜单啊，展示之类的。其实这个很简单，可以自己手写一个，顺便练练自定义控件。先看看效果。

这里写图片描述

那么先来分析一下，满足这个需求，应该需要做哪些准备。

这里写图片描述

就像备注写的一样，
首先需要准备的条件：
一个List<List< View > > 来缓存多少行。
一个List<Integer> 来缓存每一行的高度。
一个List<View> 来缓存每一行的子控件View。
相对于每一行来说，需要一个变量缓存当前行的宽度，一个变量缓存当前行的最大高度。

换行的条件：
当前行的宽度加上下一个子控件的宽度，超过了当前控件允许的最大宽度。那就换行。

那么直接开始撸吧。

package com.example.administrator.flowlayout;import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;import java.util.ArrayList;
import java.util.List;/*** Created by ShuWen on 2017/6/1.*/public class FlowLayout extends ViewGroup {//用于缓存的多少行private List<List<View>> mLineViewsList = new ArrayList<>();//用于缓存每一行最大的高度private List<Integer> mLinesHieights = new ArrayList<>();public FlowLayout(Context context) {super(context);}public FlowLayout(Context context, AttributeSet attrs) {super(context, attrs);}public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}//为了获取子控件的margin属性值@Overridepublic LayoutParams generateLayoutParams(AttributeSet attrs) {return new MarginLayoutParams(getContext(),attrs);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//获取测量模式int meaWidthMode = MeasureSpec.getMode(widthMeasureSpec);int meaHeightMode = MeasureSpec.getMode(heightMeasureSpec);//获得允许的宽高int meaWidthSize = MeasureSpec.getSize(widthMeasureSpec);int meaHeightSize = MeasureSpec.getSize(heightMeasureSpec);//最后测量的宽高int measuredWidth = 0;int measuredHeight = 0;if (meaHeightMode == MeasureSpec.EXACTLY && meaWidthMode == MeasureSpec.EXACTLY){measuredHeight = meaHeightSize;measuredWidth = meaWidthSize;}else {int iCurLineW = 0;int iCurLineH = 0;int childWidth = 0;int childHeight = 0;int childCount = getChildCount();//用于缓存每一行的子控件List<View> childsList = new ArrayList<>();for (int i = 0; i < childCount; i++) {View childView = getChildAt(i);//测量子控件，获得子控件的宽高和margin值measureChild(childView,widthMeasureSpec,heightMeasureSpec);MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();//自控件的宽高childWidth = params.leftMargin + childView.getMeasuredWidth() + params.rightMargin;childHeight = params.topMargin + childView.getMeasuredHeight() + params.bottomMargin;//当前行的宽度，加上下一个控件的宽度大于允许值，则换行if (childWidth + iCurLineW > meaWidthSize){//换行操作，记录测量的父控件宽高measuredWidth = Math.max(measuredWidth,iCurLineW);measuredHeight += iCurLineH;//保存该行的数据mLineViewsList.add(childsList);mLinesHieights.add(iCurLineH);//重新记录新的一行iCurLineH = childHeight;iCurLineW = childWidth;//开始缓存新一行数据childsList = new ArrayList<>();childsList.add(childView);}else {//未换行操作，记录该行宽高iCurLineH = Math.max(iCurLineH,childHeight);iCurLineW += childWidth;//保存到该行集合childsList.add(childView);}//当该行是最后一行并且需要换行时，进行换行数据处理if (i == childCount - 1){measuredHeight += iCurLineH;measuredWidth = Math.max(measuredWidth,iCurLineW);mLinesHieights.add(iCurLineH);mLineViewsList.add(childsList);}}}setMeasuredDimension(measuredWidth,measuredHeight);}@Overrideprotected void onLayout(boolean b, int i, int i1, int i2, int i3) {int left,top,right,bottom;int curLeft = 0;int curTop = 0;int linesCount = mLineViewsList.size();for (int j = 0; j < linesCount; j++) {List<View> childViews = mLineViewsList.get(j);int childsCount = childViews.size();for (int k = 0; k < childsCount; k++) {View childView = childViews.get(k);MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();left = curLeft + params.leftMargin;top = curTop + params.topMargin;right = left + childView.getMeasuredWidth();bottom = top + childView.getMeasuredHeight();//为子控件布局childView.layout(left,top,right,bottom);curLeft += params.leftMargin + childView.getMeasuredWidth() + params.rightMargin;}curLeft = 0;curTop += mLinesHieights.get(j);}mLinesHieights.clear();mLineViewsList.clear();}public interface onItemClick{void click(View view,int position);}public void setOnItemClickListener(final onItemClick onItemClick){int childCount = getChildCount();for (int i = 0; i < childCount; i++) {View childView = getChildAt(i);final int finalI = i;childView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View view) {onItemClick.click(view, finalI);}});}}
}

其中用到的flag背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><corners android:radius="10dp"/><padding android:bottom="2dp"android:top="2dp"android:right="10dp"android:left="10dp"/><solid android:color="@color/colorPrimary"/>
</shape>

textView的样式.

<style name="text_flag"><item name="android:background">@drawable/flag</item><item name="android:layout_width">wrap_content</item><item name="android:layout_height">wrap_content</item><item name="android:layout_margin">4dp</item><item name="android:textColor">#fff</item></style>

activity的布局：

<?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:id="@+id/activity_main"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.administrator.flowlayout.MainActivity"><com.example.administrator.flowlayout.FlowLayout
        android:id="@+id/flowlayout"android:layout_width="fill_parent"android:layout_height="wrap_content"><TextView
            style="@style/text_flag"android:text="阿萨德 "/><TextView
            style="@style/text_flag"android:text="我阿萨德阿萨德的"/><TextView
            style="@style/text_flag"android:textSize="16sp"android:text="你阿萨德阿萨德的"/><TextView
            style="@style/text_flag"android:textSize="19sp"android:text="阿萨德 阿萨德"/><TextView
            style="@style/text_flag"android:text="阿萨德阿萨德"/><TextView
            style="@style/text_flag"android:text="阿大声道"/><TextView
            style="@style/text_flag"android:text="阿大声道"/><TextView
            style="@style/text_flag"android:text="为全文完请二位"/><TextView
            style="@style/text_flag"android:text="谁是谁"/><TextView
            style="@style/text_flag"android:text="撒大声地"/><TextView
            style="@style/text_flag"android:text="阿大声道"/><TextView
            style="@style/text_flag"android:text="大法师"/><TextView
            style="@style/text_flag"android:text="12123"/><TextView
            style="@style/text_flag"android:text="sadsa"/></com.example.administrator.flowlayout.FlowLayout>
</LinearLayout>

就这么简单，自己撸一遍吧，总能学到一点的。

这篇关于AndroidUI系列-ViewGroup流式布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/758002。

相关文章

html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

《springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法》：本文主要介绍springboot整合阿里云百炼DeepSeek实现sse流式打印,本文给大家介绍的非常详细,对大... 目录1.开通阿里云百炼,获取到key2.新建SpringBoot项目3.工具类4.启动类5.测试类6.测
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
Spring AI集成DeepSeek实现流式输出的操作方法

Spring AI集成DeepSeek实现流式输出的操作方法

《SpringAI集成DeepSeek实现流式输出的操作方法》本文介绍了如何在SpringBoot中使用Sse（Server-SentEvents）技术实现流式输出,后端使用SpringMVC中的S... 目录一、后端代码二、前端代码三、运行项目小天有话说题外话参考资料前面一篇文章我们实现了《Spring
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
Java 8 Stream filter流式过滤器详解

Java 8 Stream filter流式过滤器详解

《Java8Streamfilter流式过滤器详解》本文介绍了Java8的StreamAPI中的filter方法,展示了如何使用lambda表达式根据条件过滤流式数据,通过实际代码示例,展示了f... 目录引言 一.Java 8 Stream 的过滤器（filter）二.Java 8 的 filter、fi
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2