【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
    }
}