前面我们讲解完了iOS的第一个列表控件UITableView以及它的表格空间UITableViewCell, 这次让我们继续来讲解iOS的第二个列表控件UICollectionView.

1.UICollectionView的常用属性

// 1.设置位置和大小
init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout)

// 2.设置子视图的布局方式
var collectionViewLayout: UICollectionViewLayout

// 3.设置UICollectionView的代理对象
unowned(unsafe) var delegate: UICollectionViewDelegate?

// 4.设置UICollectionView的数据源对象
unowned(unsafe) var dataSource: UICollectionViewDataSource?

// 5.设置UICollectionView的背景视图
var backgroundView: UIView?

// 6.设置 UICollectionView 的 Cell 是否可以点击
var allowsSelection: Bool

// 7.设置 UICollectionView 的 Cell 是否可以多选
var allowsMultipleSelection: Bool

UICollectionViewCell显示的样式

struct UICollectionViewScrollPosition : RawOptionSetType {
    init(_ rawValue: UInt)
    init(rawValue: UInt)

    // 1.没有样式
    static var None: UICollectionViewScrollPosition { get }

    // 2.垂直居中显示
    static var CenteredVertically: UICollectionViewScrollPosition { get }

    // 3.向下显示
    static var Bottom: UICollectionViewScrollPosition { get }

    // 4.向左显示
    static var Left: UICollectionViewScrollPosition { get }

    // 5.水平居中显示
    static var CenteredHorizontally: UICollectionViewScrollPosition { get }

    // 6.向右显示
    static var Right: UICollectionViewScrollPosition { get }
}

2.UICollectionView常用的方法

// 1.设置UICollectionView的注册类, 以及标示符
    func registerClass(cellClass: AnyClass?, forCellWithReuseIdentifier identifier: String)

// 2.设置 UICollectionView的注册Nib, 以及标示符
    func registerNib(nib: UINib?, forCellWithReuseIdentifier identifier: String)

// 3.设置 UICollectionView 的注册类, 以及辅助视图名称, 标示符
    func registerClass(viewClass: AnyClass?, forSupplementaryViewOfKind elementKind: String, withReuseIdentifier identifier: String)

// 4.设置 UICollectionView的注册Nib, 以及辅助视图名称, 标示符
    func registerNib(nib: UINib?, forSupplementaryViewOfKind kind: String, withReuseIdentifier identifier: String)

// 5.设置 UICollectionView 可重用的 Cell 以及所以路径
    func dequeueReusableCellWithReuseIdentifier(identifier: String, forIndexPath indexPath: NSIndexPath!) -> AnyObject

// 6.设置 UICollectionView 可重用的的辅视图, 标示符, 以及索引路径
    func dequeueReusableSupplementaryViewOfKind(elementKind: String, withReuseIdentifier identifier: String, forIndexPath indexPath: NSIndexPath!) -> AnyObject

// 7.选择 Item 的索引路径
    func indexPathsForSelectedItems() -> [AnyObject] 

// 8.选择 Item 的索引路径, 以及是否使用动画, 显示样式
    func selectItemAtIndexPath(indexPath: NSIndexPath?, animated: Bool, scrollPosition: UICollectionViewScrollPosition)

// 9.取消选择 Item 的索引路径, 以及是否使用动画
    func deselectItemAtIndexPath(indexPath: NSIndexPath?, animated: Bool)

// 10.刷新数据
    func reloadData()

// 11.设置 UICollectionView 的集合视图布局, 及是否使用动画
    func setCollectionViewLayout(layout: UICollectionViewLayout, animated: Bool)

// 12.设置 UICollectionView 的集合视图布局, 及是否使用动画, 以及完成之后的闭包方法
    func setCollectionViewLayout(layout: UICollectionViewLayout, animated: Bool, completion: ((Bool) -> Void)!)

// 13.设置 UICollectionView 显示多少个 Item
    func numberOfSections() -> Int

// 14.设置 UICollectionView 显示多少组 Item
    func numberOfItemsInSection(section: Int) -> Int

// 15.设置 UICollectionView 滚动到第几个 Item 的索引路径, 以及显示样式和是否启用动画
    func scrollToItemAtIndexPath(indexPath: NSIndexPath, atScrollPosition scrollPosition: UICollectionViewScrollPosition, animated: Bool)

// 16.在 UICollectionView 中插入某个 Item
    func insertSections(sections: NSIndexSet)

// 17.在 UICollectionView 中删除某个 Item
    func deleteSections(sections: NSIndexSet)

// 16.在 UICollectionView 中刷新某个 Item
    func reloadSections(sections: NSIndexSet)

// 17.移动 UICollectionView 中某个 Item 到某个位置
    func moveSection(section: Int, toSection newSection: Int)

UICollectionView代理方法

// 1.点击 Item 时调用的方法
    optional func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)

// 2.取消选中 Item 时调用的方法
    optional func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath)

UICollectionView数据源方法

// 1.设置UICollectionView有多少个Item
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int

// 2.设置 UICollectionViewCell 所显示的内容, 以及索引路径
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

// 3.设置 UICollectionView 有多少组 Cell
    optional func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int

UICollectionView的集视图布局方法

// 1.该方法是用来设置 UICollectionView 的 Item 尺寸大小
    optional func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize

// 2.该方法是用来设置 UICollectionView 的 Item 四周的边界
    optional func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets

// 3.该方法是用来设置 UICollectionView 的 Item 上下之间的最小间距(如果在自定义UICollectionView中实现了该属性, 那么该方法就会覆盖掉原来的属性)
    optional func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat

// 4.该方法是用来设置 UICollectionView 的 Item 左右之间的最小间距(如果在自定义UICollectionView中实现了该属性, 那么该方法就会覆盖掉原来的属性)
    optional func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat

// 5.该方法是用来设置 UICollectionView 的页头尺寸(如果在自定义UICollectionView中实现了该属性, 那么该方法就会覆盖掉原来的属性)
    optional func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize

// 6.该方法是用来设置 UIcollectionView 的页尾尺寸(如果在自定义UICollectionView中实现了该属性, 那么该方法就会覆盖掉原来的属性)
    optional func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize

3.代码演示

首先我们要遵守以下协议

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
}

自定义UICollectionView

    func myCollectionView() {
        // 1.自定义 Item 的FlowLayout
        let flowLayout = UICollectionViewFlowLayout()

        // 2.设置 Item 的 Size
        flowLayout.itemSize = CGSizeMake(90, 120)

        // 3.设置 Item 的排列方式
        flowLayout.scrollDirection = UICollectionViewScrollDirection.Vertical

        // 4.设置 Item 的四周边距
        flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20)

        // 5.设置同一竖中上下相邻的两个 Item 之间的间距
        flowLayout.minimumLineSpacing = 20

        // 6.设置同一行中相邻的两个 Item 之间的间距
        flowLayout.minimumInteritemSpacing = 20

        // 7.设置UICollectionView 的页头尺寸
        flowLayout.headerReferenceSize = CGSizeMake(100, 50)

        // 8.设置 UICollectionView 的页尾尺寸
        flowLayout.footerReferenceSize = CGSizeMake(100, 50)

        // 1.自定义 UICollectionView 的位置大小, 以及 Item 的显示样式为 flowLayout
        var collection = UICollectionView(frame: CGRectMake(0, 64, self.view.frame.width, self.view.frame.height - 64), collectionViewLayout: flowLayout)

        // 2.设置 UICollectionView 的背景颜色
        collection.backgroundColor = UIColor.whiteColor()

        // 3.设置 UICollectionView 垂直滚动是否滚到 Item 的最底部内容
        collection.alwaysBounceVertical = true

        // 4.设置 UICollectionView 垂直滚动是否滚到 Item 的最右边内容
        collection.alwaysBounceHorizontal = true

        // 5.设置 UICollectionView 的数据源对象
        collection.dataSource = self

        // 6.设置 UICollectionView 的代理对象
        collection.delegate = self

        // 7.设置 UICollectionView 的单元格点击(默认是 true)
        collection.allowsSelection = true

        // 8.设置 UICollectionView 的单元格多选(默认是 false)
        collection.allowsMultipleSelection = false

        // 9.开启 UICollectionView 的分页显示效果
        collection.pagingEnabled = true

        // 10.注册 UICollectionViewCell
collection.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        // 11.添加到 self.view 上
        self.view.addSubview(collection)
    }

自定义UINavigationBar

    func myNavigationBar() {
        // 1.自定义 NavigationBar, 设置它的位置大小
        var navigationBar = UINavigationBar(frame: CGRectMake(0, 0, self.view.frame.width, 64))
        // 2.设置 NavigationBar 的背景色
        navigationBar.backgroundColor = UIColor.redColor()
        // 3.自定义 NavigationItem 设定它的 Title
        let navigationItem = UINavigationItem(title: "UICollectionView演示")
        // 4.自定义 UIBarButtonItem 的Title, Style, Target 的对象, 已经监听的方法
        let leftButton = UIBarButtonItem(title: "返回", style: UIBarButtonItemStyle.Plain, target: self, action: "back")
        // 5.设置 Navigation 左边的按钮为 leftButton
        navigationItem.leftBarButtonItem = leftButton
        // 6.把 NavigationItem 添加到 NavigationBar
        navigationBar.pushNavigationItem(navigationItem, animated: true)
        // 7.添加到到 self.view 上
        self.view.addSubview(navigationBar)
    }

    // 8.NavigationBar监听方法
    func back() {
        println("点击了返回")
    }

UICollectionView的代理方法, 数据源方法, FlowLayout 方法

    // 1.该方法是用来设置返回 CollectionViewCell 的组数
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    // 2.该方法是用来设置返回 CollectionViewCell 的个数
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 15
    }

    // 3.该方法是用来设置 CollectionViewCell 的内容
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        var collectionCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! UICollectionViewCell
        collectionCell.backgroundColor = UIColor.redColor()

        return collectionCell
    }

    // 4.该方法是点击了 CollectionViewCell 时调用的监听方法
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        println("aaa")
    }

    // 5.该方法是用来设置 CollectionViewCell 的大小
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSizeMake(90, 120)
    }

    // 6.该方法是用来设置 CollectionViewCell 四周的边距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(20, 20, 20, 20)
    }

    // 7.该方法是用来设置同一行 CollectionViewCell 之间的间距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 20
    }

    // 8.该方法是用来设置同一列 CollectionViewCell 之间的间距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 20
    }

    // 9.该方法是用来设置 CollectionView 的页头尺寸
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSizeMake(100, 50)
    }

    // 10.该方法是用来设置 CollectionView 的页尾尺寸
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        return CGSizeMake(100, 50)
    }

4.最终效果

PS: UIColleCtionView 是继承于 UIScrollView 的, 所以 UIScrollView 里的属性, 以及方法都是可以用的.

好了这次我们就讲到这里, 下次我们继续~~