自定义FlowLayout,android flowLayout实现

2023-11-22 17:48

本文主要是介绍自定义FlowLayout,android flowLayout实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

我想大家在开发过程中都碰到过这样的需求,类似标签展示,要展示如上图效果,这里面的数据不确定每项字数,有的非常长,有的很短,数据动态填充。

这种情况用listView和gridView展示效果都没有上图的效果。

这时我们其实是要自己写一个控件来填充上图的数据,也就是我们今天要说的自定义view,流式布局。

方法还是重写onMeasure和onLayout

话不多说  ,代码贴上

一.自定义view

package com.jky.mobilebzt.view;import java.util.ArrayList;
import java.util.List;import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;public class XCFlowLayout extends ViewGroup {// 存储所有子Viewprivate List<List<View>> mAllChildViews = new ArrayList<List<View>>();// 每一行的高度private List<Integer> mLineHeight = new ArrayList<Integer>();public XCFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public XCFlowLayout(Context context, AttributeSet attrs) {this(context, attrs, 0);}public XCFlowLayout(Context context) {this(context, null);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stub// 父控件传进来的宽度和高度以及对应的测量模式int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);int modeWidth = MeasureSpec.getMode(widthMeasureSpec);int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);int modeHeight = MeasureSpec.getMode(heightMeasureSpec);// 如果当前ViewGroup的宽高为wrap_content的情况int width = 0; // 自己测量的宽度int height = 0; // 自己测量的高度int lineWidth = 0;// 每一行的宽度int lineHeight = 0; // 每一行的高度int childCount = getChildCount();// 获取子view的个数for (int i = 0; i < childCount; i++) {View child = getChildAt(i);// 测量子View的宽和高measureChild(child, widthMeasureSpec, heightMeasureSpec);// 得到LayoutParamsMarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();// 得到子View占据的宽度int childWidth = child.getMeasuredWidth() + lp.leftMargin+ lp.rightMargin;// 得到子View占据的高度int childHeight = child.getMeasuredHeight() + lp.topMargin+ lp.bottomMargin;if (lineWidth + childWidth > sizeWidth) {// 需要进行换行width = Math.max(width, lineWidth); // 得到最大宽度lineWidth = childWidth; // 重置lineWidthheight += lineHeight; // 得到高度lineHeight = childHeight;// 重置LineHeight} else {// 不需要进行换行lineWidth += childWidth;// 叠加行宽lineHeight = Math.max(lineHeight, childHeight);}if (i == childCount - 1) {// 处理最后一个子View的情况width = Math.max(width, lineWidth);height += lineHeight;}}// wrapcontentsetMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth: width, modeHeight == MeasureSpec.EXACTLY ? sizeHeight: height);//		super.onMeasure(widthMeasureSpec, heightMeasureSpec);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubmAllChildViews.clear();mLineHeight.clear();int width = getWidth();// 获取当前ViewGroup宽度int lineWidth = 0;int lineHeight = 0;List<View> lineViews = new ArrayList<View>();// 记录当前行的Viewint childCount = getChildCount();for (int i = 0; i < childCount; i++) {View child = getChildAt(i);MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();int childWidth = child.getMeasuredWidth();int childHeight = child.getMeasuredHeight();// 需要换行if (lineWidth + childWidth + lp.leftMargin + lp.rightMargin > width) {mLineHeight.add(lineHeight); // 记录lineHeightmAllChildViews.add(lineViews); // 记录当前行的Views// 重置 行的宽高lineWidth = 0;lineHeight = childHeight + lp.topMargin + lp.bottomMargin;// 重置当前行的View集合;lineViews = new ArrayList<View>();}lineWidth += childWidth + lp.leftMargin + lp.rightMargin;lineHeight = Math.max(lineHeight, childHeight + lp.topMargin+ lp.bottomMargin);lineViews.add(child);}// 处理最后一行mLineHeight.add(lineHeight);mAllChildViews.add(lineViews);// 设置子View的位置int left = 0;int top = 0;// 获取行数int lineCount = mAllChildViews.size();for (int i = 0; i < lineCount; i++) {// 当前行的views和高度lineViews = mAllChildViews.get(i);lineHeight = mLineHeight.get(i);for (int j = 0; j < lineViews.size(); j++) {View child = lineViews.get(j);// 判断是否显示if (child.getVisibility() == View.GONE) {continue;}MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();int cLeft = left + lp.leftMargin;int cTop = top + lp.topMargin;int cRight = cLeft + child.getMeasuredWidth();int cBottom = cTop + child.getMeasuredHeight();// 进行子View进行布局child.layout(cLeft, cTop, cRight, cBottom);left += child.getMeasuredWidth() + lp.leftMargin+ lp.rightMargin;}left = 0;top += lineHeight;}}/*** 与当前ViewGroup对应的LayoutParams*/@Overridepublic LayoutParams generateLayoutParams(AttributeSet attrs) {return new MarginLayoutParams(getContext(), attrs);}
}

二.xml部分

xml布局中加上这个

  <com.jky.mobilebzt.view.XCFlowLayoutandroid:id="@+id/xcf_hot_words"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="@dimen/margin_lsmall"android:layout_marginBottom="@dimen/margin_normal"android:layout_marginRight="@dimen/margin_normal" />

三.初始化数据部分

	@SuppressLint("NewApi")private void initHotWordViews() {MarginLayoutParams lp = new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);lp.leftMargin = 20;lp.rightMargin = 20;lp.topMargin = 8;lp.bottomMargin = 8;for (int i = 0; i < hotWords.size(); i++) {final String hotWord = hotWords.get(i);TextView view = new TextView(this);view.setGravity(Gravity.CENTER);view.setText(hotWords.get(i));view.setTextColor(Color.BLACK);view.setBackground(getResources().getDrawable(R.drawable.hot_word_selector));mFlowLayout.addView(view, lp);view.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {}});}}

hotWords就是你要填充的数据集合
 

基本核心的东西就上面这些 ,最上面的图是我的项目里面最后实现的效果图。如果还有其他问题欢迎加入我们的qq群:

开发一群:454430053开发二群:537532956

这篇关于自定义FlowLayout,android flowLayout实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/411849

相关文章

C/C++中OpenCV 矩阵运算的实现

《C/C++中OpenCV矩阵运算的实现》本文主要介绍了C/C++中OpenCV矩阵运算的实现,包括基本算术运算(标量与矩阵)、矩阵乘法、转置、逆矩阵、行列式、迹、范数等操作,感兴趣的可以了解一下... 目录矩阵的创建与初始化创建矩阵访问矩阵元素基本的算术运算 ➕➖✖️➗矩阵与标量运算矩阵与矩阵运算 (逐元

C/C++的OpenCV 进行图像梯度提取的几种实现

《C/C++的OpenCV进行图像梯度提取的几种实现》本文主要介绍了C/C++的OpenCV进行图像梯度提取的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录预www.chinasem.cn备知识1. 图像加载与预处理2. Sobel 算子计算 X 和 Y

C/C++和OpenCV实现调用摄像头

《C/C++和OpenCV实现调用摄像头》本文主要介绍了C/C++和OpenCV实现调用摄像头,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录准备工作1. 打开摄像头2. 读取视频帧3. 显示视频帧4. 释放资源5. 获取和设置摄像头属性

c/c++的opencv图像金字塔缩放实现

《c/c++的opencv图像金字塔缩放实现》本文主要介绍了c/c++的opencv图像金字塔缩放实现,通过对原始图像进行连续的下采样或上采样操作,生成一系列不同分辨率的图像,具有一定的参考价值,感兴... 目录图像金字塔简介图像下采样 (cv::pyrDown)图像上采样 (cv::pyrUp)C++ O

c/c++的opencv实现图片膨胀

《c/c++的opencv实现图片膨胀》图像膨胀是形态学操作,通过结构元素扩张亮区填充孔洞、连接断开部分、加粗物体,OpenCV的cv::dilate函数实现该操作,本文就来介绍一下opencv图片... 目录什么是图像膨胀?结构元素 (KerChina编程nel)OpenCV 中的 cv::dilate() 函

Python使用FFmpeg实现高效音频格式转换工具

《Python使用FFmpeg实现高效音频格式转换工具》在数字音频处理领域,音频格式转换是一项基础但至关重要的功能,本文主要为大家介绍了Python如何使用FFmpeg实现强大功能的图形化音频转换工具... 目录概述功能详解软件效果展示主界面布局转换过程截图完成提示开发步骤详解1. 环境准备2. 项目功能结

SpringBoot使用ffmpeg实现视频压缩

《SpringBoot使用ffmpeg实现视频压缩》FFmpeg是一个开源的跨平台多媒体处理工具集,用于录制,转换,编辑和流式传输音频和视频,本文将使用ffmpeg实现视频压缩功能,有需要的可以参考... 目录核心功能1.格式转换2.编解码3.音视频处理4.流媒体支持5.滤镜(Filter)安装配置linu

在Spring Boot中实现HTTPS加密通信及常见问题排查

《在SpringBoot中实现HTTPS加密通信及常见问题排查》HTTPS是HTTP的安全版本,通过SSL/TLS协议为通讯提供加密、身份验证和数据完整性保护,下面通过本文给大家介绍在SpringB... 目录一、HTTPS核心原理1.加密流程概述2.加密技术组合二、证书体系详解1、证书类型对比2. 证书获

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

使用Python实现Windows系统垃圾清理

《使用Python实现Windows系统垃圾清理》Windows自带的磁盘清理工具功能有限,无法深度清理各类垃圾文件,所以本文为大家介绍了如何使用Python+PyQt5开发一个Windows系统垃圾... 目录一、开发背景与工具概述1.1 为什么需要专业清理工具1.2 工具设计理念二、工具核心功能解析2.