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

1.UICollectionView的常用属性

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

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

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

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

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

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

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

UICollectionViewCell显示的样式

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

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

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

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

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

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

    // 6.向右显示
    @H_403_11@static @H_403_11@var Right: UICollectionViewScrollPosition { @H_403_11@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,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,insetForSectionAtIndex section: Int) -> UIEdgeInsets

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

// 4.该方法是用来设置 UICollectionView 的 Item 左右之间的最小间距(如果在自定义UICollectionView中实现了该属性,minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat

// 5.该方法是用来设置 UICollectionView 的页头尺寸(如果在自定义UICollectionView中实现了该属性,referenceSizeForHeaderInSection section: Int) -> CGSize

// 6.该方法是用来设置 UIcollectionView 的页尾尺寸(如果在自定义UICollectionView中实现了该属性,referenceSizeForFooterInSection section: Int) -> CGSize

3.代码演示

首先我们要遵守以下协议

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

自定义UICollectionView

func myCollectionView() {
        // 1.自定义 Item 的FlowLayout
        @H_403_11@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)

        // 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,@H_403_11@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: @H_403_11@self,action: "back")
        // 5.设置 Navigation 左边的按钮为 leftButton
        navigationItem.leftBarButtonItem = leftButton
        // 6.把 NavigationItem 添加到 NavigationBar
        navigationBar.pushNavigationItem(navigationItem,animated: true)
        // 7.添加到到 self.view 上
        @H_403_11@self.view.addSubview(navigationBar)
    }

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

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

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

    // 2.该方法是用来设置返回 CollectionViewCell 的个数
    func collectionView(collectionView: UICollectionView,numberOfItemsInSection section: Int) -> Int {
        @H_403_11@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()

        @H_403_11@return collectionCell
    }

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

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

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

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

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

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

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

4.最终效果

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

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