android中UIColletionView瀑布流布局实现思路以及封装的实现

android中实现UIColletionView瀑布流布局的思路如下:

1. 计算每一列的高度,保存至数组columnHeights中。

2. 根据collectionView的宽度和列数,计算每一列的宽度,保存至columnWidths数组中。

3. 获取要添加的子项View的高度height。

4. 找到columnHeights数组中最短的那一列的索引index。

5. 修改columnHeights数组中index索引对应的高度为原高度+height。

6. 设置子项View的布局参数为:- 高度:height

– 宽度:columnWidths[index]

– 纵坐标:之前第index列的总高度减去height

– 横坐标:index * (columnWidths[index] + 列间距)7. 重复步骤3-6,添加后续子项View。基于上述思路,可以封装一个UICollectionViewFlowLayout的子类来实现瀑布流布局:

public class WaterfallFlowLayout extends UICollectionViewFlowLayout {

   private int[] columnHeights; 
   private int[] columnWidths;
   private int columnNumber = 2;
   private int columnSpacing = 10;
  
   @Override
   public void prepareLayout() {
      super.prepareLayout();
      
      // 计算每一列的宽度和高度
      columnWidths = new int[columnNumber];
      columnHeights = new int[columnNumber];
      int columnWidth = (int) ((getWidth() - (columnNumber - 1) * columnSpacing) / columnNumber);
      for (int i = 0; i < columnNumber; i++) {
          columnWidths[i] = columnWidth;
          columnHeights[i] = 0; 
      }
   }
  
   @Override
   public boolean shouldInvalidateLayout(UICollectionView collectionView, int i) {
      return true;
   }
 
   @Override
   public CollectionView.LayoutParams generateLayoutParams(ViewGroup.LayoutParams lp) {
      int height = lp.height; // 获取子项高度
      int minHeightIndex = 0;  // 最短列的索引
     
      for (int i = 0; i < columnNumber; i++) {
          if (columnHeights[i] < columnHeights[minHeightIndex]) {
             minHeightIndex = i;   
          }
      }
      columnHeights[minHeightIndex] += height;  // 最短列的高度增加
      
   // 设置子项布局参数
   int left = minHeightIndex * (columnWidths[minHeightIndex] + columnSpacing);
   int top = columnHeights[minHeightIndex] - height;
   int right = left + columnWidths[minHeightIndex];
   int bottom = columnHeights[minHeightIndex]; 
      
   return new Rect(left, top, right, bottom);
   }
}

该类继承自UICollectionViewFlowLayout,在prepareLayout()方法中计算每列的宽高,在生成子项布局参数时找到最短列并设置对应的布局参数,从而实现瀑布流布局效果。