Swift:用UICollectionView整一个瀑布流

本文的例子和Swift版本是基于Xcode7.2的。以后也许不知道什么时候会更新。

我们要干点啥

用新浪微博的Open API做后端来实现我们要提到的功能。把新浪微博的内容,图片和文字展示在collection view中。本文只简单的展示内容。下篇会用pinterest一样的效果来展示这些内容。

我们准备优先展示图片。你的好友花了那么多时间拍照或者从相册里选择图片发上来多不容易。如果微博返回的数据中有中等大小的缩略图,那么久展示这个缩略图。否则的话显示文本。文本都没有的话。。。这个就不是微博了。但是我们还是会准备一个颜色显示出来。

啥是UICollectionView

UICollectionView有一个灵活的布局,可以用各种不同的布局展示数据。
UICollectionView的使用和UITableView类似,也是需要分别去实现一组datasource的代理和UICollectionView本身的代理来把数据展示在界面中。

  UICollectionView也是UIScrollView的一个子类

其他的还有:
1. UICollectionViewCell:这些Cell组成了整个UICollectionView,并作为子View添加到UICollectionView中。可以在Interface builder中创建,也可以代码创建。
2. Header/Footer:跟UITableView差不多的概念。显示一些title什么的信息。

UICollectionView还有一个叫做Decoration view的东西。顾名思义,主要是装饰用的。
不过要用这部分的功能你需要单独写定制的layout

除了以上说到的内容之外,collection view还有一个专门处理布局的UICollectionViewLayout。你可以继承UICollectionViewLayout来创建一个自己的collection view的布局。苹果给了一个基础的布局UICollectionViewFlowLayout,可以实现一个基本的流式布局。这些会在稍后的教程中介绍。

开始我们的项目:
首先创建一个single view的应用。

然后给你的项目起一个名字,我们这里就叫做CollectionViewDemo。Storyboard中默认生成的Controller已经木有什么用处了。直接干掉,拖一个UICollectionViewController进去并设置为默认的Controller。并删除默认生成的ViewController.swift文件,并创建一个叫做HomeCollectionViewController.swift的文件。之后在interface builder中把collection view的类设置为HomeCollectionViewController

然后:

  1. 在Storyboard中添加一个navigation controller
  2. 把collection view设置为上面的navigation controller的root view controller。
  3. 把这个navigation controller设置为initial view controller。

接下来再次回到collection view controller。这个

进一步了解UICollectionView

如前文所述,UICollectionView和UITableView类似,都有datasource和delegate。这样就可以设置datasource和设置一些用户的交互,比如选中某一个cell的时候怎么处理。

UICollectionViewFlowLayout有一个代理:UICollectionViewDelegateFlowLayout。通过这个代理可以设定布局的一些行为比如:cell的间隔,collection view的滚动方向等。

下面就开始在我们的代码中给UICollectionViewDataSourceUICollectionViewDelegateFlowLayout 两个代理的方法做一个填空。UICollectionViewDelegate里的方法暂时还用不着,稍后会给这个代理做填空。

实现UICollectionViewDataSource

这里我们用微博开放API为例。从微博的开发API上获取到当前用户的全部的微博,然后用UICollectionView展示。获取到的微博time line最后会放在这里:

private var timeLineStatus: [StatusModel]?

在data source中的代码就很好添加了。

    // MARK: UICollectionViewDataSource

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1    //1
    }

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.timeLineStatus?.count ?? 0 //2
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath)

        cell.backgroundColor = UIColor.orangeColor() //3

        return cell
    }
  1. 我们只要一个section,所以这里返回数字1。
  2. 返回的time line都会放在类型为StatusModel的数组里。这个数组可能为空,因为很多情况会影响到网络请求,比如网络不通的时候。这个时候返回的time line就是空了。所以self.timeLineStatus?.count得出的数字也可能是空,那么这个时候就应该返回0。
  3. 由于没有合适的Cell返回,现在只好用改变Cell的背景色的方式看到Cell的排布。

效果是这样的:

UICollectionViewFlowLayoutDelegate

这个代理的作用和UITableView的func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat有非常类似的作用。heightForRowAtIndexPath的作用是返回UITableViewCell的高度。而UICollectionViewCell有非常多的不同的大小,所以需要更加复杂的代理方法的支持。其中包括两个方法:

// 1
class HomeCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout 

// 2
private let sectionInsets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值