UGUI自定义GridView(流式布局)

引言

Unity中对子物体的排序我们一般是使用GridLayoutGroup这个组件，但是这个组件会强行将子物体的width和height设置为相同的，但是如果遇到子物体的宽高不同的需求时，这个GridLayoutGroup将不再适用。此时需要我们自定义的编写一套排序子物体的算法（分为子View宽度一致，高度不一致或者高度一致，宽度不一致两种情况）。

温馨提示

本文排序子物体采用了设置本地坐标的做法，为了方便，将父物体Content的中心点和itemPrefab的中心点设置在了左上角（也就是当子物体的本地坐标为Vector3.zero时刚好在Content的左上角）。

正文分析

1.宽度一致，高度不一致

 排序第一行           这种情况时因为宽度是确定的，所以列表的列数也是固定的（列表的总宽度也是可以确定下来（padding.left + (width + spacing.x) * column）），那么对于第一排的位置是很好排的：也就是Vector2 pos = new Vector2(padding.left + (width + spacing.x) * index, padding.top)， index为第一行的索引 。

 排序其他行           由于item的高度不一致导致除了第一排之后的并不是很好排，但此时由于第一排已经排好，位置是已知的，那么可以用Dictionary<column,image>保存当前最后一行的每列的image,由此可以根据当前最后一行的每列的image确定下一行对应该列的image的position：也就是Vector2 pos = new Vector2(aboveimg.rectTransform.localPosition.x, aboveimg.rectTransform.localPosition.y - aboveimg.rectTransform.sizeDelta.y - spacing.y)。

Content的大小      由于content的大小需要在排序完成之后才获取到，所以这里采取了两次排序的做法，第一次排序的目的仅仅是获取content大小并设置（可在Dictionary<column,image>中的取Y坐标最小的即可），此时再排序一次即可。

2.高度一致，宽度不一致

item的Y轴           这种情况时由于item的高度一致，所以此时可以根据当前行数和item的高度确定Y  也就是：-(padding.top + (height + spacing.y) * curRaw)  。

item的X轴           由于item的宽度不一致，所以导致x轴并不是很好排，但排好第一个后可根据第一个的宽度和列表的总宽度（如果超过总宽度需要换行）来确定下一个item的x轴  以此类推即可排好，换行的时候需要将当前下一个item的x轴置零。

Content的大小   与1.的情况相同，需第一次进行排序获取行数才可得content大小，第一次排序的目的也仅仅是获取content大小并设置（ (padding.top + (height + spacing.y) * curRaw)）， 此时再排序一次即可。

 

Demo下载地址

https://download.csdn.net/download/qq_37896049/11245132