GridLayoutView:基于GridLayout实现的网格布局,实现宽高自适应

2024-06-04 16:48

本文主要是介绍GridLayoutView:基于GridLayout实现的网格布局,实现宽高自适应,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

前两天突发一个bug,我在ScrollView中嵌套了一个GridView(已经重写了onMeasure方法),GridView的高度是wrap_content,在我更新adapter的时候GridView的高度竟然会时高时低,搞得我一脸懵逼,最终找到原因:

@Overridepublic void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2 + expandHeight,MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec, expandSpec);}

不知道是什么历史原因,高度的测量模式竟然被我修改成这个样子,影响了MeasureSpec.AT_MOST模式下的高度测量,并且问题非必现。

ScrollView嵌套GridView,为了解决手势冲突问题,需要设置GridView高度为wrap_content,我遇到的有两种解决方案:

  1. 重写测量模式,对于这种做法,我一直都不喜欢,而且好像总会出现一些莫名其妙的问题。
  2. 通过LinearLayout模拟GridView,虽然问题得到解决,但是性能上并不是很完美(因为要嵌套LinearLayout实现换行)。

所有的不满终于在这次爆发,决定实现一个令自己满意的网格布局。

源码及具体用法,移步github地址,希望大家多多支持

正文

基于之前提到的LinearLayout去模拟一个网格布局的实现思路,需要每一行都嵌套一个LinearLayout,通过weight去平分宽度。如果能把这个嵌套的LinearLayout去掉,就是我想要的效果了,于是我想到了GridLayout。

GridLayout是安卓的五大布局之一,但是用的比较少,最经典的案例就是做计算器的布局:

计算器布局

GridLayout最大的优势:可以设置在网格中的位置坐标,占用的格数。例如下面的xml:

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="300dp"android:layout_height="300dp"android:background="@color/colorPrimaryDark"app:alignmentMode="alignBounds"app:columnCount="3"app:horizontalSpacing="5dp"app:orientation="vertical"app:rowCount="3"app:verticalSpacing="5dp"><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:background="@color/colorAccent"app:layout_column="0"app:layout_row="0" /><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:background="@color/colorAccent"app:layout_column="1"app:layout_row="1" /></android.support.v7.widget.GridLayout>


我们简单的复习了一下基本效果,接下来就可以动手实现了。

首先我们需要一个适配器,建议直接使用BaseAdapter,这样方便替换掉已经使用的GridView,而不用修改适配器的代码。

/*** 设置该控件的适配器**/var adapter: BaseAdapter? = nullset(adapter) {// 解绑之前的adapter的数据监听unregisterDataSetObserver()field = adapterthis.count = field!!.countthis.adapter!!.registerDataSetObserver(dataSetObserver)this.fillChildInLayout()}private val dataSetObserver = object : DataSetObserver() {override fun onChanged() {super.onChanged()count = adapter!!.countfillChildInLayout()}override fun onInvalidated() {super.onInvalidated()count = adapter!!.countfillChildInLayout()}}

设置了Adapter后,我们注册一个监听adapter数据的观察者,这样adapter.notifyDataSetChanged可以直接刷新内容的显示。

fillChildInLayout()是填充内容的方法:

/*** 通过adapter把item填入到GridLayout中*/private fun fillChildInLayout() {if (adapter == null || count == 0) {clear()return}// 判断如果是竖向if (orientation == GridLayout.VERTICAL) {fillChildInLayoutVertical()} else {fillChildInLayoutHorizontal()}// 如果当前child的数量比count要大,移除多余Childif (childCount > count) {removeViews(count, childCount - count)}}

首先判断adapter是否为空或者数量为0,我们只要删除所有的child就可以了。如果数量大于0,根据方向填充child,最后判断目前填充的child的个数和变化后的个数做对比,如果child个数多了,就都删掉。

每次刷新数据,频繁的移除和填充Child,实在是一种很笨的做法,不如更新已经填充的child,多退少补,优化性能。

下面以竖直方向的填充方法fillChildInLayoutVertical为例:

private fun fillChildInLayoutVertical() {val columnCount = columnCount// 遍历adapterfor (position in 0 until count) {// 得到adapter中的Viewval child = getView(position)// 得到布局信息val params = generateLayoutParams(child, position)// 设置水平方向的间距if (position % columnCount == columnCount - 1) {params.rightMargin = 0} else {params.rightMargin = horizontalSpace}// 中间的child// 设置竖直方向的间距,if (position > count - 1 - columnCount) {params.bottomMargin = 0} else {params.bottomMargin = verticalSpace}// 设置点击之间child.setOnClickListener {onCellClickListener?.onCellClick(position, this.adapter?.getItem(position) as T)}child.layoutParams = paramsif (child.parent == null) {addView(child)}}}

遍历adapter,得到指定位置的child,刷新child的显示,然后根据child所处的位置,设置右间距和下间距,最后一列不设置右间距,最后一行没有下间距,这样就实现了网格水平和上下的间距。

接下来看一下getView()方法,在这个方法中实现了之前提到的多退少补的优化策略:

/*** 从cache中得到View,没有则创建*/private fun getView(index: Int): View {// 首先遍历已经存在的child,直接更新内容// 这样可以节省清空再填充的性能浪费var view: View? = nullif (index < count) {view = getChildAt(index)}// 更新数据显示view = this.adapter!!.getView(index, view, this)return view}class TestAdapter(private val context: Context, private val list: List<String>) : BaseAdapter() {override fun getItem(position: Int): String = list[position]override fun getItemId(position: Int): Long = position.toLong()override fun getCount(): Int = list.sizeoverride fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {var view = convertViewif(view == null){view = LayoutInflater.from(context).inflate(R.layout.item_test, parent, false)}view!!.findViewById<TextView>(R.id.text).text = list[position]return view}
}

首先查询是否已经添加了指定位置的child,然后调用adapter.getView(),如果没有找到child,会引入一个新的布局,如果找到了child,直接更新内容,这样已经添加的child直接得到了复用。

最后就是设置child的位置了:

/*** 生成LayoutParams*/private fun generateLayoutParams(child: View, position: Int): GridLayout.LayoutParams {val params: GridLayout.LayoutParams = if (child.layoutParams != null) {child.layoutParams as GridLayout.LayoutParams} else {GridLayout.LayoutParams()}// 设置宽度if (orientation == VERTICAL) {// 设置所占的行数params.columnSpec = GridLayout.spec(position % columnCount, 1, 1f)params.rowSpec = GridLayout.spec(position / columnCount, 1)} else {// 设置所占的行数params.rowSpec = GridLayout.spec(position % rowCount, 1, 1f)params.columnSpec = GridLayout.spec(position / rowCount, 1)}return params}

GridLayout.LayoutParams简单的介绍一下:

columnSpec:child所在的列。
rowSpec:child所在的行。
GridLayout.spec(position % rowCount, 1, 1f)
第一个参数:所在列/行的位置;
第二个参数:所占用的个数,这里需要注意的是,格数仅仅是占用的数量,而不是宽度比;
第三个参数:所在的列/行,所占的宽度/高度的比例。

这就是GridLayoutView的全部实现,非常的简单,最后看一下实际的应用:

<!-- XML布局 -->
<com.lzp.grid.GridLayoutViewandroid:id="@+id/grid"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/colorPrimaryDark"app:columnCount="3"app:horizontalSpacing="5dp"app:orientation="vertical"app:verticalSpacing="5dp" /><!-- Java代码 -->
GridLayoutView<String> gridView = findViewById(R.id.grid);
gridView.setOnCellClickListener((index, s) -> Toast.makeText(this, s, Toast.LENGTH_SHORT).show());
gridView.setAdapter(adapter);

因为要在child的点击事件直接回调Adapter中的数据对象,所以需要指定Item的泛型。

总结

这一次的内容相对来说比较简单,但是在思考的过程中发生了很多奇妙蛋疼的事情,最后给大家留下几个问题:

  1. 我继承的是android.support.v7.widget.GridLayout,如果直接使用自带的GridLayout,在android 26以下是不能使用weight的,这个要怎么就解决呢?

提示:计算宽高比,需要得到自身的宽度,如何解决getWidth/getHeight等于0的问题

  1. 以第一个添加child为例,此时一个child都没有,需要循环addView,已知addView会调用requestLayout(),这种情况下会layout几次,是否会有性能问题呢?

需要了解View整体的添加和绘制流程,理解android的优化策略。

3、如果我们需要自定义LayoutParam,如何设置xml中添加的child的LayoutParam是自定义类型呢?

可以参考一下GridLayout源码

今天分享就这些了,如果有高手知道问题答案的话,欢迎留言大家共同学习,最后祝大家元旦愉快。

这篇关于GridLayoutView:基于GridLayout实现的网格布局,实现宽高自适应的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

MyBatis-Plus逻辑删除实现过程

《MyBatis-Plus逻辑删除实现过程》本文介绍了MyBatis-Plus如何实现逻辑删除功能,包括自动填充字段、配置与实现步骤、常见应用场景,并展示了如何使用remove方法进行逻辑删除,逻辑删... 目录1. 逻辑删除的必要性编程1.1 逻辑删除的定义1.2 逻辑删php除的优点1.3 适用场景2.

C#借助Spire.XLS for .NET实现在Excel中添加文档属性

《C#借助Spire.XLSfor.NET实现在Excel中添加文档属性》在日常的数据处理和项目管理中,Excel文档扮演着举足轻重的角色,本文将深入探讨如何在C#中借助强大的第三方库Spire.... 目录为什么需要程序化添加Excel文档属性使用Spire.XLS for .NET库实现文档属性管理Sp

Python+FFmpeg实现视频自动化处理的完整指南

《Python+FFmpeg实现视频自动化处理的完整指南》本文总结了一套在Python中使用subprocess.run调用FFmpeg进行视频自动化处理的解决方案,涵盖了跨平台硬件加速、中间素材处理... 目录一、 跨平台硬件加速:统一接口设计1. 核心映射逻辑2. python 实现代码二、 中间素材处

Java数组动态扩容的实现示例

《Java数组动态扩容的实现示例》本文主要介绍了Java数组动态扩容的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1 问题2 方法3 结语1 问题实现动态的给数组添加元素效果,实现对数组扩容,原始数组使用静态分配

Python实现快速扫描目标主机的开放端口和服务

《Python实现快速扫描目标主机的开放端口和服务》这篇文章主要为大家详细介绍了如何使用Python编写一个功能强大的端口扫描器脚本,实现快速扫描目标主机的开放端口和服务,感兴趣的小伙伴可以了解下... 目录功能介绍场景应用1. 网络安全审计2. 系统管理维护3. 网络故障排查4. 合规性检查报错处理1.

Python轻松实现Word到Markdown的转换

《Python轻松实现Word到Markdown的转换》在文档管理、内容发布等场景中,将Word转换为Markdown格式是常见需求,本文将介绍如何使用FreeSpire.DocforPython实现... 目录一、工具简介二、核心转换实现1. 基础单文件转换2. 批量转换Word文件三、工具特性分析优点局

Springboot3统一返回类设计全过程(从问题到实现)

《Springboot3统一返回类设计全过程(从问题到实现)》文章介绍了如何在SpringBoot3中设计一个统一返回类,以实现前后端接口返回格式的一致性,该类包含状态码、描述信息、业务数据和时间戳,... 目录Spring Boot 3 统一返回类设计:从问题到实现一、核心需求:统一返回类要解决什么问题?

Java使用Spire.Doc for Java实现Word自动化插入图片

《Java使用Spire.DocforJava实现Word自动化插入图片》在日常工作中,Word文档是不可或缺的工具,而图片作为信息传达的重要载体,其在文档中的插入与布局显得尤为关键,下面我们就来... 目录1. Spire.Doc for Java库介绍与安装2. 使用特定的环绕方式插入图片3. 在指定位

Java使用Spire.Barcode for Java实现条形码生成与识别

《Java使用Spire.BarcodeforJava实现条形码生成与识别》在现代商业和技术领域,条形码无处不在,本教程将引导您深入了解如何在您的Java项目中利用Spire.Barcodefor... 目录1. Spire.Barcode for Java 简介与环境配置2. 使用 Spire.Barco

Java利用Spire.Doc for Java实现在模板的基础上创建Word文档

《Java利用Spire.DocforJava实现在模板的基础上创建Word文档》在日常开发中,我们经常需要根据特定数据动态生成Word文档,本文将深入探讨如何利用强大的Java库Spire.Do... 目录1. Spire.Doc for Java 库介绍与安装特点与优势Maven 依赖配置2. 通过替换