当前位置：移动技术网 > 移动技术>移动开发>IOS > iOS瀑布流的简单实现(Swift)

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写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)
  }
}

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

HDU - 2082 生成函数基础题

这些题都可以暴力直接做，但用于练习生成函数。（虽然并没有。。。马上做几道难题练练）#include<ios... [阅读全文]
HDU1085 —— 生成函数入门题

(1+X^i)*……最经典的生成函数。#include<iostream>#include<c... [阅读全文]
[HDU-1398] 生成函数基础题

还是经典生成函数：(1+x^i)#include<iostream>#include<cstr... [阅读全文]
iOS14Beta3续航怎么样 iOS14Beta3续航能力介绍

ios 14 第三个测试版本发布已经快一周，该版本更新的内容相对上一个版本来说较多，同时解决了升级后内存被严重占用的 bug。在一周的使用过程中，续航并没有较大... [阅读全文]
iOS14Beta3稳定性怎么样 iOS14Beta3升级建议介绍

每年wwdc全球开发者大会结束后，苹果就会放出beta版的ios、macos、ipados等，今年的ios 14也不例外。截止到7 月 24 日，苹果已经正式发... [阅读全文]
2019微信骰子助手IOS苹果安卓微信骰子控制插件

2019微信骰子随心插件是一款非常适用的微信小控件，应用这款软件的时候就一随便的控制微信摇骰子的点数，应用任意控制，感兴趣的伴侣赶紧来下载体验！2019微信骰子... [阅读全文]
智算之道初赛第二场A题

亮三盏灯这题首先我们就能看出当同时亮三盏灯的时候小明肯定在中间一层，然后就是特殊情况亮两盏灯0、如果该楼只有两层... [阅读全文]
uniapp编写H5界面放入IOS全面屏原生导航栏盖住H5界面

今天一大早被公司的IOS喷一脸，前段时间看他们安卓和IOS比较忙，界面比较多，然后我就零时抽出来帮他们用H5编写... [阅读全文]
游戏APP解决方案，8月1日起下架无版号ios手游的出路在哪？

在苹果至中国游戏开发者的邮件中声明：如果开发者不能在7月31日前提交版号及相关文件，付费游戏将不可以在中国App... [阅读全文]
download:post下载

本文写了一个ts封装的小方法，download下载功能的实现，首先建立一个ts文件：import axios f... [阅读全文]

网友评论


验证码：

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论