Swift：用UICollectionView整一個瀑布流

時間 2019-11-10

標籤 swift uicollectionview 一個瀑布欄目 Swift 简体版

原文原文鏈接

本文的例子和Swift版本是基於Xcode7.2的。之後也許不知道何時會更新。

咱們要乾點啥

用新浪微博的Open API作後端來實現咱們要提到的功能。把新浪微博的內容，圖片和文字展現在collection view中。本文只簡單的展現內容。下篇會用pinterest同樣的效果來展現這些內容。git

咱們準備優先展現圖片。你的好友花了那麼多時間拍照或者從相冊裏選擇圖片發上來多不容易。若是微博返回的數據中有中等大小的縮略圖，那麼久展現這個縮略圖。不然的話顯示文本。文本都沒有的話。。。這個就不是微博了。可是咱們仍是會準備一個顏色顯示出來。github

啥是UICollectionView

UICollectionView有一個靈活的佈局，能夠用各類不一樣的佈局展現數據。
UICollectionView的使用和UITableView相似，也是須要分別去實現一組datasource的代理和UICollectionView自己的代理來把數據展現在界面中。web

UICollectionView也是UIScrollView的一個子類

其餘的還有：
1. UICollectionViewCell：這些Cell組成了整個UICollectionView，並做爲子View添加到UICollectionView中。能夠在Interface builder中建立，也能夠代碼建立。
2. Header/Footer：跟UITableView差很少的概念。顯示一些title什麼的信息。json

UICollectionView還有一個叫作Decoration view的東西。顧名思義，主要是裝飾用的。
不過要用這部分的功能你須要單獨寫定製的layout。

除了以上說到的內容以外，collection view還有一個專門處理佈局的UICollectionViewLayout。你能夠繼承UICollectionViewLayout來建立一個本身的collection view的佈局。蘋果給了一個基礎的佈局UICollectionViewFlowLayout，能夠實現一個基本的流式佈局。這些會在稍後的教程中介紹。swift

開始咱們的項目：
首先建立一個single view的應用。
後端

而後給你的項目起一個名字，咱們這裏就叫作CollectionViewDemo。Storyboard中默認生成的Controller已經木有什麼用處了。直接幹掉，拖一個UICollectionViewController進去並設置爲默認的Controller。並刪除默認生成的ViewController.swift文件，並建立一個叫作HomeCollectionViewController.swift的文件。以後在interface builder中把collection view的類設置爲HomeCollectionViewController。api

而後：
數組

在Storyboard中添加一個navigation controller
把collection view設置爲上面的navigation controller的root view controller。
把這個navigation controller設置爲initial view controller。

接下來再次回到collection view controller。這個緩存

進一步瞭解UICollectionView

如前文所述，UICollectionView和UITableView相似，都有datasource和delegate。這樣就能夠設置datasource和設置一些用戶的交互，好比選中某一個cell的時候怎麼處理。網絡

UICollectionViewFlowLayout有一個代理：UICollectionViewDelegateFlowLayout。經過這個代理能夠設定佈局的一些行爲好比：cell的間隔，collection view的滾動方向等。

下面就開始在咱們的代碼中給UICollectionViewDataSource和UICollectionViewDelegateFlowLayout 兩個代理的方法作一個填空。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
    }

咱們只要一個section，因此這裏返回數字1。
返回的time line都會放在類型爲StatusModel的數組裏。這個數組可能爲空，由於不少狀況會影響到網絡請求，好比網絡不通的時候。這個時候返回的time line就是空了。因此self.timeLineStatus?.count得出的數字也多是空，那麼這個時候就應該返回0。
因爲沒有合適的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: 10.0, right: 10.0) 

// MARK: UICollectionViewDelegateFlowLayout

// 3
func collectionView(collectionView: UICollectionView, layout collectionViewLayout:UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSize(width: 170, height: 300)
}

// 4
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    return sectionInsets
}

首先須要實現layout的代理UICollectionViewDelegateFlowLayout。
給類添加一個sectionInsets的屬性。
UICollectionViewDelegateFlowLayout的第一個方法，用來返回indexPath指定位置的Cell的Size。
layout代理的另一個方法，用來返回每個section的inset。

看看運行效果：

建立自定義UICollectionViewCell

下面就要處理內容在展現的時候具體應該怎麼展現了。咱們這裏分兩種狀況，若是用戶的微博有圖片，那麼就展現圖片。若是沒有圖片就展現文字。惋惜的是微博的API沒有圖片的大小返回回來。展現的時候須要大小參數來決定這個
UICollectionViewCell到底要多大的size，因爲沒有就只好弄個方塊來展現圖片了。至於圖片的拉伸方式就有你來決定了，咱們這裏爲了簡單就使用默認的方式拉伸圖片。

在文字上就須要根據文字的多少了決定size了。因爲咱們的寬度是必定的，也就是說在autolayout中UILabel的preferredMaxLayoutWidth是必定的。而後就能夠很方便的根據這個寬度來計算多行的UILabel到底須要多少的高度來所有展現微博中的文字。

首先是展現圖片的Cell。

在Cell上放一個UIImageView，保證這個image view的四個邊距都是0。

建立一個文件WeiboImageCell.swift，裏面是類WeiboImageCell，繼承自UICollectionViewCell。

把這個Cell的custom class設置爲WeiboImageCell。

而後把Cell代碼中的image view和interface builder的image view關聯爲IBOutelt：

class WeiboImageCell: UICollectionViewCell {
    @IBOutlet weak var weiboImageView: UIImageView!
}

重複上面的步驟添加一個只有一個UILabel的Cell，類型爲WeiboTextCell。設置這個UILabel的屬性numberOfLines爲0，這樣就能夠顯示多行的文字。而後設置這個label的上、左、下、右都是-8。

爲何是-8呢，由於蘋果默認的給父view留了寬度爲8的margin（邊距），若是要文字和Cell的邊距貼合的話 須要覆蓋這個系統預留的邊距，所以須要設置邊距爲-8。

最後關聯代碼和label。

class WeiboTextCell: UICollectionViewCell {
    @IBOutlet weak var weiboTextLabel: UILabel!
}

添加完這兩個Cell以後，回到HomeCollectionViewController。刪除self.collectionView!.registerClass(WeiboImageCell.self, forCellWithReuseIdentifier: reuseIdentifier)方法，以及所有的registerClass。

`registerClass`, 這個方法的調用會把咱們在storyboard裏作的一切都給抹掉。在調用Cell裏的image view或者label的時候獲得的永遠是nil。

到這，咱們須要討論一下text cell對於label的約束問題。首先咱們一樣設置label的約束，讓這個label貼着cell的邊。也就是，top、leading、trailing和bottom爲-8。

可是這樣的而設置讓label在顯示出來的cell中是居中的。尤爲在文字不足夠現實滿cell的空間的時候。因此，咱們須要改一個地方。修改bottom的優先級，設置爲low，最低：UILayoutPriorityDefaultLow。這樣在labe計算高度的時候會優先考慮的是文字填滿label後的高度，而不是像以前同樣直接把labe的高度設置爲cell的高度。這個時候不論文字是否填滿cell，都是從頂開始顯示有多少控件用多少空間。

集成SDWebImage

咱們那什麼來拯救圖片cell惹？辣就是SDWebImage是一個著名的圖片請求和緩存的庫。咱們這裏用這個庫來請求微博中的圖片並緩存。

添加：
在Podfile裏添加SDWebImage的pod應用pod ‘SDWebImage’, ‘~>3.7’。固然了以前咱們已經添加了user_frameworks!。爲何用這個看原文：

You can make CocoaPods integrate to your project via frameworks instead of static libraries by specifying use_frameworks!.

多了就很少說了，須要瞭解更多的能夠看這裏。

pod更新完成以後。引入這個framework。

import SDWebImage

而後就能夠給cell的image view上圖片了。

weiboImageCell.weiboImageView.sd_setImageWithURL(NSURL(string: status.status?.bmiddlePic ?? ""))

SDWebImage給image view寫了一個category。裏面有不少能夠調用的方法。好比能夠設置一個place holder的image。也就是在image沒有下載下來以前能夠給image view設置一個默認的圖片。

http請求和數據

這裏只是簡單說一下，更過的內容請看這裏。
下面咱們看看微博的Open API能給咱們返回什麼：

{
    "statuses": [
        {
            "created_at": "Tue May 31 17:46:55 +0800 2011",
            "id": 11488058246,
            "text": "求關注。"，
            "source": "<a href="http://weibo.com" rel="nofollow">新浪微博</a>",
            "favorited": false,
            "truncated": false,
            "in_reply_to_status_id": "",
            "in_reply_to_user_id": "",
            "in_reply_to_screen_name": "",
            "geo": null,
            "mid": "5612814510546515491",
            "reposts_count": 8,
            "comments_count": 9,
            "annotations": [],
            "user": {
                "id": 1404376560,
                "screen_name": "zaku",
                "name": "zaku",
                "province": "11",
                "city": "5",
                "location": "北京 朝陽區",
                "description": "人生五十年，乃如夢如幻；有生斯有死，壯士復何憾。",
                "url": "http://blog.sina.com.cn/zaku",
                "profile_image_url": "http://tp1.sinaimg.cn/1404376560/50/0/1",
                "domain": "zaku",
                "gender": "m",
                "followers_count": 1204,
                ...
            }
        },
        ...
    ],
    "ad": [
        {
            "id": 3366614911586452,
            "mark": "AB21321XDFJJK"
        },
        ...
    ],
    "previous_cursor": 0,      // 暫時不支持
    "next_cursor": 11488013766,     // 暫時不支持
    "total_number": 81655
}

咱們只須要咱們follow的好友的微博的圖片或者文字。因此由這些內容咱們能夠定義出對應的model類。

import ObjectMapper

class BaseModel: Mappable {
    var previousCursor: Int?
    var nextCursor: Int?
    var hasVisible: Bool?
    var statuses: [StatusModel]?
    var totalNumber: Int?

    required init?(_ map: Map) {

    }

    func mapping(map: Map) {
        previousCursor <- map["previous_cursor"]
        nextCursor <- map["next_cursor"]
        hasVisible <- map["hasvisible"]
        statuses <- map["statuses"]
        totalNumber <- map["total_number"]
    }
}

和

import ObjectMapper

class StatusModel: BaseModel {
    var statusId: String?
    var thumbnailPic: String?
    var bmiddlePic: String?
    var originalPic: String?
    var weiboText: String?
    var user: WBUserModel?

    required init?(_ map: Map) {
        super.init(map)

    }

    override func mapping(map: Map) {
        super.mapping(map)
        statusId <- map["id"]
        thumbnailPic <- map["thumbnail_pic"]
        bmiddlePic <- map["bmiddle_pic"]
        originalPic <- map["original_pic"]
        weiboText <- map["text"]
    }
}

其中內容所有都放在類StatusModel中，圖片咱們用屬性bmiddlePic，文字用weiboText。其餘屬性留着之後使用。

請求完成之後，這些time line的微博會存在一個屬性裏作爲數據源使用。

class HomeCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
  private var timeLineStatus: [StatusModel]?  // 1

  //2
  Alamofire.request(.GET, "https://api.weibo.com/2/statuses/friends_timeline.json", parameters: parameters, encoding: .URL, headers: nil)
                .responseString(completionHandler: {response in
                    let statuses = Mapper<BaseModel>().map(response.result.value)

                    if let timeLine = statuses where timeLine.totalNumber > 0 {
                        self.timeLineStatus = timeLine.statuses // 3
                        self.collectionView?.reloadData()
                    }
            })
}

存放數據源的屬性。
Alamofire發出http請求。
請求成功以後解析數據，並把咱們須要的微博數據存放在屬性self.timeLineStatus。

在展現數據的時候須要區分微博的圖片是否存在，存在則優先展現圖片，不然展現文字。

一個不怎麼好的作法是在方法cell for collection view裏判斷數據源是否存在，遍歷每個數據源的item判斷這個item是否有圖片。。。

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
  if let statuses = self.timeLineStatus {
    let status = statuses[indexPath.item]
    if status 
  }
}

這樣顯然太過冗長了，因此咱們要把這一部分代碼提高出來。

/**
     get status and if this status has image or not
     @return:
        status, one of the timeline
        Int, 1: there's image, 0: there's no image, -1: empty status
     */
    func getWeiboStatus(indexPath: NSIndexPath) -> (status: StatusModel?, hasImage: Int) {  // 1
        if let timeLineStatusList = self.timeLineStatus where timeLineStatusList.count > 0 {
            let status = timeLineStatusList[indexPath.item]
            if let middlePic = status.bmiddlePic where middlePic != "" {
                // there's middle sized image to show
                return (status, 1)

            } else {
                // start to consider text
                return (status, 0)
            }
        }

        return (nil, -1)
    }

swift是能夠在一個方法裏返回多個值的。這個多個內容的值用tuple來存放。調用時這樣的：

let status = self.getWeiboStatus(indexPath)
let hasImage = status?.hasImage              // if there's a image 
let imageUrl = status.status?.bmiddlePic     // image path
let text = status.status?.weiboText          // text

只要經過let hasImage = status?.hasImage就能夠判斷是否有圖片。因此Swift的這一點仍是很是方便的。那麼在判斷要顯示哪種Cell的時候就很是的方便了。修改後的代碼也很是的簡潔。這個習慣須要一直保持下去。

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let status = self.getWeiboStatus(indexPath)
        var cell: UICollectionViewCell = UICollectionViewCell()

        guard let _ = status.status else {
            cell.backgroundColor = UIColor.darkTextColor()
            return cell
        }

        if status.hasImage == 1 {
            cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath)
            let weiboImageCell = cell as! WeiboImageCell
            weiboImageCell.weiboImageView.backgroundColor = UIColor.blueColor()
            weiboImageCell.weiboImageView.sd_setImageWithURL(NSURL(string: status.status?.bmiddlePic ?? ""))

        } else if status.hasImage == 0 {
            cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseTextIdentifier, forIndexPath: indexPath)
            let weiboTextCell = cell as! WeiboTextCell
            weiboTextCell.setCellWidth(self.cellWidth)
            weiboTextCell.weiboTextLabel.text = status.status?.weiboText ?? ""
            weiboTextCell.contentView.backgroundColor = UIColor.orangeColor()
            weiboTextCell.weiboTextLabel.backgroundColor = UIColor.redColor()
        } else {
            cell = UICollectionViewCell()
        }

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

        return cell
    }

跑起來，看看運行效果。

好醜！！！

所有代碼在這裏。