iOS瀑布流的简单实现(Swift)_IOS

这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及会介绍第一种实现的bug.

<1>第一种

效果图如下所示:

这种实现方法的思路: 

1)首先调用随机函数,产生随机高度,并把它保存到数组中

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
  CGFloat cellW = 100;
  CGFloat cellH = 100 + (arc4random() % 80);
  [self.heightArrayM addObject:@(cellH)];

  return CGSizeMake(cellW, cellH);

}

2)在设置cell的frame的地方,通过取余,取整确定cell的高度,并设定cell的frame

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

  UICollectionViewCell *cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
  //当前处于多少行
  NSInteger num1 = indexPath.row / count;
  //当前处于多少列
  int num2 = indexPath.row % count;
  CGFloat cellX = num2 * 100 + (num2 + 1) * margin;
  CGFloat cellY = 0;
  for (int i = 0; i < num1; i++) {
    NSInteger position = num2 + i * 3;
    cellY += [self.heightArrayM[position] floatValue] + margin;
  }
  CGFloat cellW = 100;
  CGFloat cellH = cellHeight;
  cell.frame = CGRectMake(cellX, cellY, cellW, cellH);
//  cell.backgroundColor = [UIColor redColor];
  cell.backgroundColor = [UIColor colorWithRed:(arc4random() % 250) / 250.0 green:(arc4random() % 250) / 250.0 blue:(arc4random() % 250) / 250.0 alpha:1.0];

//  NSLog(@"%@", NSStringFromCGRect(cell.frame));
  return cell;
}

弊端 : 其实这种方法的弊端,相信从上面的动态图中可以看出来,当往上面滑的时候,由于cell的循环机制,下面的cell的会消失,但是由于高度不一致,同时撤销的是最后一行的cell,所以下面的cell在屏幕上就会消失.

下面附上第一种方法的源代码:

#import "ViewController.h"

#define margin 10
#define count 3
#define cellHeight [self.heightArrayM[indexPath.row] floatValue]
static NSString * const ID = @"cell";
@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@property (nonatomic, strong) NSMutableArray *heightArrayM;

@end

@implementation ViewController

- (NSMutableArray *)heightArrayM {
  if (_heightArrayM == nil) {
    _heightArrayM = [NSMutableArray array];
  }
  return _heightArrayM;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
  self.collectionView.dataSource = self;
  self.collectionView.delegate = self;
  //设置collectionView
  [self setupCollectionView];
}

//设置collectionView的布局
- (UICollectionViewFlowLayout *)setupCollectionLayout {
  UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

  flowLayout.minimumInteritemSpacing = margin;
  flowLayout.minimumLineSpacing = margin;
  flowLayout.sectionInset = UIEdgeInsetsMake(margin, margin, margin, margin);
  return flowLayout;
}

//设置collectionView
- (void)setupCollectionView {
  self.collectionView.collectionViewLayout =[self setupCollectionLayout];

}

#pragma mark - UICollectionViewDataSouce
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
  return 60;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

  UICollectionViewCell *cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
  //当前处于多少行
  NSInteger num1 = indexPath.row / count;
  //当前处于多少列
  int num2 = indexPath.row % count;
  CGFloat cellX = num2 * 100 + (num2 + 1) * margin;
  CGFloat cellY = 0;
  for (int i = 0; i < num1; i++) {
    NSInteger position = num2 + i * 3;
    cellY += [self.heightArrayM[position] floatValue] + margin;
  }
  CGFloat cellW = 100;
  CGFloat cellH = cellHeight;
  cell.frame = CGRectMake(cellX, cellY, cellW, cellH);
//  cell.backgroundColor = [UIColor redColor];
  cell.backgroundColor = [UIColor colorWithRed:(arc4random() % 250) / 250.0 green:(arc4random() % 250) / 250.0 blue:(arc4random() % 250) / 250.0 alpha:1.0];

//  NSLog(@"%@", NSStringFromCGRect(cell.frame));
  return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
  CGFloat cellW = 100;
  CGFloat cellH = 100 + (arc4random() % 80);
  [self.heightArrayM addObject:@(cellH)];

  return CGSizeMake(cellW, cellH);

}
@end

<2>下面介绍第二种(Swift实现)

效果图如下所示:

这种实现方法就是比较成熟的了,我把它封装成一个类.其实主要是实现三个函数

1)重写父类的prepare方法,准备所有cell的样式

 extension WaterfallLayout {
  // prepare准备所有Cell的布局样式
  override func prepare() {
    super.prepare()

    // 0.获取item的个数
    let itemCount = collectionView!.numberOfItems(inSection: 0)

    // 1.获取列数
    let cols = dataSource?.numberOfColsInWaterfallLayout?(self) ?? 2

    // 2.计算Item的宽度
    let itemW = (collectionView!.bounds.width - self.sectionInset.left - self.sectionInset.right - self.minimumInteritemSpacing * CGFloat((cols - 1))) / CGFloat(cols)

    // 3.计算所有的item的属性
    for i in startIndex..<itemCount {
      // 1.设置每一个Item位置相关的属性
      let indexPath = IndexPath(item: i, section: 0)

      // 2.根据位置创建Attributes属性
      let attrs = UICollectionViewLayoutAttributes(forCellWith: indexPath)

      // 3.随机一个高度
      guard let height = dataSource?.waterfallLayout(self, indexPath: indexPath) else {
        fatalError("请设置数据源,并且实现对应的数据源方法")
      }

      // 4.取出最小列的位置
      var minH = colHeights.min()!
      let index = colHeights.index(of: minH)!
      minH = minH + height + minimumLineSpacing
      colHeights[index] = minH

      // 5.设置item的属性
      attrs.frame = CGRect(x: self.sectionInset.left + (self.minimumInteritemSpacing + itemW) * CGFloat(index), y: minH - height - self.minimumLineSpacing, width: itemW, height: height)
      attrsArray.append(attrs)
    }

    // 4.记录最大值
    maxH = colHeights.max()!

    // 5.给startIndex重新复制
    startIndex = itemCount
  }
}

2)返回设置cell样式的数组

 override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    return attrsArray
  }

3)返回当前的contentSize

override var collectionViewContentSize: CGSize {
    return CGSize(width: 0, height: maxH + sectionInset.bottom - minimumLineSpacing)
  }

总结:

在下面我封装的这个类中,只需要遵守我的数据代理源协议并且实现我的协议中的两个方法,传给我对应得高度(我这里是传的随机的),可选的方法,若是不实现,会有一个默认值,就可以实现该功能.协议如下:

@objc protocol WaterfallLayoutDataSource : class {
  func waterfallLayout(_ layout : WaterfallLayout, indexPath : IndexPath) -> CGFloat
  @objc optional func numberOfColsInWaterfallLayout(_ layout : WaterfallLayout) -> Int
}

完成代码如下所示:

ViewController.swift中的代码:

import UIKit

extension UIColor {
  class func randomColor() -> UIColor {
    return UIColor(colorLiteralRed: Float(arc4random_uniform(256)) / 255.0, green: Float(arc4random_uniform(256)) / 255.0, blue: Float(arc4random_uniform(256)) / 255.0, alpha: 1.0)
  }
}

private let kWaterCellID = "kWaterCellID"

class ViewController: UIViewController {

  var count : Int = 20

  override func viewDidLoad() {
    super.viewDidLoad()

    // 1.设置布局
    let layout = WaterfallLayout()
    layout.minimumLineSpacing = 10
    layout.minimumInteritemSpacing = 10
    layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    layout.dataSource = self

    // 2.创建UICollectionView
    let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
    collectionView.dataSource = self
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: kWaterCellID)
    view.addSubview(collectionView)
  }

}

extension ViewController : UICollectionViewDataSource {
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return count
  }

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kWaterCellID, for: indexPath)

    cell.backgroundColor = UIColor.randomColor()

    if indexPath.item == count - 1 {
      count += 20

      collectionView.reloadData()
    }

    return cell
  }
}

extension ViewController : WaterfallLayoutDataSource {
  func waterfallLayout(_ layout: WaterfallLayout, indexPath: IndexPath) -> CGFloat {
    return CGFloat(arc4random_uniform(80) + 100)
  }

  func numberOfColsInWaterfallLayout(_ layout: WaterfallLayout) -> Int {
    return 3
  }
}

封装自定义布局中的WaterfallLayout.swift代码如下:

import UIKit

@objc protocol WaterfallLayoutDataSource : class {
  func waterfallLayout(_ layout : WaterfallLayout, indexPath : IndexPath) -> CGFloat
  @objc optional func numberOfColsInWaterfallLayout(_ layout : WaterfallLayout) -> Int
}

class WaterfallLayout: UICollectionViewFlowLayout {

  // MARK: 对外提供属性
  weak var dataSource : WaterfallLayoutDataSource?

  // MARK: 私有属性
  fileprivate lazy var attrsArray : [UICollectionViewLayoutAttributes] = [UICollectionViewLayoutAttributes]()

  fileprivate var totalHeight : CGFloat = 0
  fileprivate lazy var colHeights : [CGFloat] = {
    let cols = self.dataSource?.numberOfColsInWaterfallLayout?(self) ?? 2
    var colHeights = Array(repeating: self.sectionInset.top, count: cols)
    return colHeights
  }()
  fileprivate var maxH : CGFloat = 0
  fileprivate var startIndex = 0
}

extension WaterfallLayout {
  // prepare准备所有Cell的布局样式
  override func prepare() {
    super.prepare()

    // 0.获取item的个数
    let itemCount = collectionView!.numberOfItems(inSection: 0)

    // 1.获取列数
    let cols = dataSource?.numberOfColsInWaterfallLayout?(self) ?? 2

    // 2.计算Item的宽度
    let itemW = (collectionView!.bounds.width - self.sectionInset.left - self.sectionInset.right - self.minimumInteritemSpacing * CGFloat((cols - 1))) / CGFloat(cols)

    // 3.计算所有的item的属性
    for i in startIndex..<itemCount {
      // 1.设置每一个Item位置相关的属性
      let indexPath = IndexPath(item: i, section: 0)

      // 2.根据位置创建Attributes属性
      let attrs = UICollectionViewLayoutAttributes(forCellWith: indexPath)

      // 3.随机一个高度
      guard let height = dataSource?.waterfallLayout(self, indexPath: indexPath) else {
        fatalError("请设置数据源,并且实现对应的数据源方法")
      }

      // 4.取出最小列的位置
      var minH = colHeights.min()!
      let index = colHeights.index(of: minH)!
      minH = minH + height + minimumLineSpacing
      colHeights[index] = minH

      // 5.设置item的属性
      attrs.frame = CGRect(x: self.sectionInset.left + (self.minimumInteritemSpacing + itemW) * CGFloat(index), y: minH - height - self.minimumLineSpacing, width: itemW, height: height)
      attrsArray.append(attrs)
    }

    // 4.记录最大值
    maxH = colHeights.max()!

    // 5.给startIndex重新复制
    startIndex = itemCount
  }
}

extension WaterfallLayout {
  override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    return attrsArray
  }

  override var collectionViewContentSize: CGSize {
    return CGSize(width: 0, height: maxH + sectionInset.bottom - minimumLineSpacing)
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ios瀑布流的实现
ios瀑布流的实现、ios瀑布流的实现原理、ios瀑布流实现原理、swift 瀑布流、swift 瀑布流布局，以便于您获取更多的相关知识。

时间： 2024-10-27 23:40:27

iOS瀑布流的简单实现(Swift)_IOS的相关文章

iOS本地推送简单实现代码_IOS

本文为大家分解介绍了iOS本地推送代码的三步骤,供大家参考,具体内容如下 第一步:创建本地推送 // 创建一个本地推送 UILocalNotification *notification = [[[UILocalNotification alloc] init] autorelease]; //设置10秒之后 NSDate *pushDate = [NSDate dateWithTimeIntervalSinceNow:10]; if (notification != nil) { // 设置推

详解IOS中如何实现瀑布流效果_IOS

首先是效果演示 特点:可以自由设置瀑布流的总列数(效果演示为2列) 虽然iphone手机的系统相册没有使用这种布局效果,瀑布流依然是一种很常见的布局方式!!!下面来详细介绍如何实现这种布局. 首先使用的类是UICollectionView 我们要做的是自定义UICollectionViewCell和UICollectionViewLayout      1.自定义UICollectionViewCell类,只需要一个UIImageView即可,frame占满整个cell.      2.重点是自

IOS实现自定义布局瀑布流_IOS

瀑布流是电商应用展示商品通常采用的一种方式,如图示例 瀑布流的实现方式,通常有以下几种 通过UITableView实现(不常用) 通过UIScrollView实现(工作量较大) 通过UICollectionView实现(通常采用的方式) 一.UICollectionView基础 1.UICollectionView与UITableView有很多相似的地方,如 都通过数据源提供数据 都通过代理执行相关的事件 都可以自定义cell,且涉及到cell的重用 都继承自UIScrollView,具有滚动效

iOS实现水平方向瀑布流_IOS

效果 源码:https://github.com/YouXianMing/Animations  // // GridFlowLayoutViewController.m // Animations // // Created by YouXianMing on 16/5/5. // Copyright 2016年 YouXianMing. All rights reserved. // #import "GridFlowLayoutViewController.h" #import

利用JS实现简单的瀑布流效果

哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足! 一.瀑布流之准备工作    首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的,

Pinterest采用瀑布流的方式网页设计

文章描述:浅谈个人在瀑布流网页的实现中遇到的问题和解决方法. 先上Demo 瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.html 瀑布流+无限拖 http://cued.xunlei.com/demos/publ/demo2.html 随着pinterest的走红,瀑布流式的布局被越来越多的网站所使用,这种布局确实有很多好处,图片列表页有很强大的视觉感染力,而且还提高了用户"发现好图"的效率.瀑布流的实现有很多种方式,之前淘宝UED有

瀑布流的小例子和ThinkPHP相结合

瀑布流的插件jquery.masonry.min.js 地址:http://masonry.desandro.com/index.html里面有很 多,但是都是英文的,因为项目需要,就自己写了一个简单的例子 其实瀑布流就是用了固定的宽度或者高度产生一堆不规则的div来展现出来的. 流程是 1:初始化页面的时候加载一次数据 2.当页面到底部的时候再次加载数据 3,重 复以上操作直到没有数据 <!DOCTYPE HTML> <html> <head> <meta ht

Android瀑布流照片墙实现，体验不规则排列的美感

传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它 产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫 无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计 界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使 用的GridView来进行布局的,这种布局方式只适用于"墙"上的每张图片大小都相同的情况,如果图片的大 小

浅谈瀑布流网页实现中遇到的问题和解决方法

  先上Demo 瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.html 瀑布流+无限拖 http://cued.xunlei.com/demos/publ/demo2.html 随着pinterest的走红,瀑布流式的布局被越来越多的网站所使用,这种布局确实有很多好处,图片列表页有很强大的视觉感染力,而且还提高了用 户"发现好图"的效率.瀑布流的实现有很多种方式,之前淘宝UED有篇文章详细的介绍过各种方式的优劣.今天我们主要讨论一下绝