【swift3.0】- 建立CollectionView方式的細節問題

時間 2019-11-24

標籤 swift3.0 建立 collectionview 方式細節問題欄目 Swift 简体版

原文原文鏈接

貢獻做者 -【XJDomain】
博客XJ: https://my.oschina.net/shengbingli/blog
GitHub: https://github.com/lishengbing/XJQRCodeToolDemogit

1:方式1: 在一個控制器中經過代碼來建立collectionview,代碼以下，實現數據源和代理方法太簡單不寫了github

fileprivate lazy var collectionView : UICollectionView = { [unowned self] in
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: kItemW, height: kItemW + 50)
        layout.minimumLineSpacing = klineMargin
        layout.minimumInteritemSpacing = 0
        layout.sectionInset = UIEdgeInsetsMake(30, kMiddleMargin, 30, kMiddleMargin)
        
        let collectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.showsVerticalScrollIndicator = false
        collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        collectionView.backgroundColor = kColorGrayBg
        collectionView.alwaysBounceVertical = true
        collectionView.register(UINib(nibName: "CHCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: kCollectionCellID)
        return collectionView
        }()

2:方式2: 在一個控制器中經過xib來建立collectionview

基本步驟:swift

01-建立一個控制器，同時建立一個xibide

02-在xib中添加一個collectionView，添加約束之後就完成了函數

03-在控制器中拖入collectionView屬性，同時在xib中右鍵拖入dataSource連線給控制器，成爲數據源代理佈局

04-在控制器中實現數據源和代理的相關方法便可flex

3:方式3:在一個view上經過xib添加來建立一個collectionView

基本步驟和上面基本步驟差很少，只是連線的時候是鏈接給父view，而不是控制器spa

注意點是:修改佈局約束，有兩種方式：.net

方式1:layoutSubviews()中去實現約束代理

override func layoutSubviews() {
        super.layoutSubviews()
        
        let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        layout.itemSize = collectionView.bounds.size
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        layout.scrollDirection = .horizontal
        collectionView.isPagingEnabled = true
        collectionView.backgroundColor = UIColor.white
        collectionView.showsHorizontalScrollIndicator = false
    }

方式2: 寫一個類繼承自UICollectionViewFlowLayout,

01-實現prepare方法，而後調用super.prepare

02-書寫item約束便可

//
//  XJAmuseMenuView.swift
//  XJZB
//
//  Created by 李勝兵 on 16/10/17.
//  Copyright © 2016年 付公司. All rights reserved.
//

import UIKit
private let kCellID = "kCellID"

class XJAmuseMenuView: UIView {
    
    
    // MARK: - 設置屬性
    var groups : [XJAnchorGroup]? {
        didSet {
            collectionView.reloadData()
        }
    }
    
    
    // MARK: - 控件屬性
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var pageControl: UIPageControl!
    

    // MARK: - 系統回調函數
    override func awakeFromNib() {
        super.awakeFromNib()
        autoresizingMask = UIViewAutoresizing()
        
        // 註冊cell
        collectionView.register(UINib(nibName: "XJAmuseMenuCollectionVIewCell", bundle: nil), forCellWithReuseIdentifier: kCellID)
        
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        layout.itemSize = collectionView.bounds.size
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        layout.scrollDirection = .horizontal
        collectionView.isPagingEnabled = true
        collectionView.backgroundColor = UIColor.white
        collectionView.showsHorizontalScrollIndicator = false
    }
    
    
}


extension XJAmuseMenuView {
    class func menuView() -> XJAmuseMenuView {
        return Bundle.main.loadNibNamed("XJAmuseMenuView", owner: nil, options: nil)?.first as! XJAmuseMenuView
    }
}


extension XJAmuseMenuView : UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if groups == nil { return 0 }
        let pageNum = (groups!.count - 1 ) / 8 + 1
        pageControl.numberOfPages = pageNum
        return pageNum
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "kCellID", for: indexPath) as! XJAmuseMenuCollectionVIewCell
        // 給cell設置數據
        setupCellDataWithCell(cell: cell, indexPath: indexPath)
        return cell
    }
    
    
    private func setupCellDataWithCell(cell : XJAmuseMenuCollectionVIewCell, indexPath : IndexPath) {
        // 0頁: 0 ~ 7
        // 1頁: 8 ~ 15
        // 2頁: 16 ～ 23
        // 1.取出起始位置 && 終點位置
        let starIndex = indexPath.item * 8
        var endIndex = (indexPath.item + 1) * 8 - 1
        
        // 2.判斷越界問題
        if endIndex > groups!.count - 1 {
            endIndex = groups!.count - 1
        }
        
        // 3.取出數據，而且賦值給cell
        cell.groups = Array(groups![starIndex...endIndex])
    }
    
    
}


extension XJAmuseMenuView : UICollectionViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        pageControl.currentPage = Int(scrollView.contentOffset.x / scrollView.bounds.width)
    }
}

4:方式4：在一個view上經過xib添加來建立一個collectionView，可是是讓本身成爲本身的代理

步驟同3差很少，只是不用拖線，可是須要本身自定義一個collectionView,如：

而後再建立一個xib對應其中的自定義cell，而後在cell中添加其餘控件就能夠了

//
//  XJPicImageCollectionView.swift
//  XJWeiBo
//
//  Created by 李勝兵 on 16/10/27.
//  Copyright © 2016年 李勝兵. All rights reserved.
//

import UIKit
import Kingfisher
private let cellIdentifier = "cellIdentifier"

class XJPicImageCollectionView: UICollectionView {
    
    // MARK: - 定義屬性
    var picUrls : [URL] = [URL]() {
        didSet {
            reloadData()
        }
    }

    // MARK: - 系統回調函數
    override func awakeFromNib() {
        super.awakeFromNib()
        // 設置數據源
        dataSource = self
        delegate = self
        isScrollEnabled = false
        register(UINib(nibName: "XJPicImageCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: cellIdentifier)
    }
}


extension XJPicImageCollectionView : UICollectionViewDataSource, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return picUrls.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath) as! XJPicImageCollectionViewCell
        cell.iconView.kf.setImage(with: picUrls[indexPath.item], placeholder: UIImage(named: "empty_picture"))
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("--------")
    }
}


// MARK: - 自定義cell類
class XJPicImageCollectionViewCell: UICollectionViewCell {
    
    // MARK: - 系統屬性
    @IBOutlet weak var iconView: UIImageView!
    override func awakeFromNib() {
        super.awakeFromNib()
        
    }
    
}

範例2:

//
//  XJRecommendGameView.swift
//  XJZB
//
//  Created by 李勝兵 on 16/10/12.
//  Copyright © 2016年 付公司. All rights reserved.
//

import UIKit
private let kGameCellID = "kGameCellID"
private let kEdgeInsetMargin : CGFloat = 10

class XJRecommendGameView: UIView {
    
    // MARK: - 定義數據的屬性
    var groups : [XJBaseModel]? {
        didSet {
            // 刷新數據
            collectionView.reloadData()
        }
    }
    
    
    
    // MARK: - 控件屬性
    @IBOutlet weak var collectionView: UICollectionView!
    

    // 系統回調函數
    override func awakeFromNib() {
        super.awakeFromNib()
        
        // 讓控件不隨着父控件的拉伸而拉伸
        autoresizingMask = UIViewAutoresizing()
        
        // 註冊cell
        collectionView.register(UINib(nibName: "XJGameCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: kGameCellID)
        
        // 給collectionView添加內邊距
        collectionView.contentInset = UIEdgeInsetsMake(0, kEdgeInsetMargin, 0, kEdgeInsetMargin)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        layout.itemSize = CGSize(width: 80, height: collectionView.bounds.size.height)
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        layout.scrollDirection = .horizontal
        collectionView.showsHorizontalScrollIndicator = false
    }
}

// MARK: - 快速建立的類方法
extension XJRecommendGameView {
    class func recommendGameView() -> XJRecommendGameView {
        return Bundle.main.loadNibNamed("XJRecommendGameView", owner: nil, options: nil)?.first as! XJRecommendGameView
    }
}



// MARK: - collectionView數據源
extension XJRecommendGameView : UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return groups?.count ?? 0
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGameCellID, for: indexPath) as! XJGameCollectionViewCell
        cell.group = groups![(indexPath as NSIndexPath).item]
        return cell
    }
}