[Xcode 实际操作]三、视图控制器-(12)在Storyboard中使用集合控件

目录：[Swift]Xcode实际操作

本文将演示集合控件在故事板中的使用。

在控制器根视图上点击鼠标，以选择该根视图。

现在往根视图中添加一个集合视图。

点击【库面板】图标，打开控件库面板

在控件库搜索框内，输入控件名称Collection View，在控件库中，快速定位目标控件。

然后在按钮控件上双击，导入所需的控件。

点击【库面板】图标，打开控件库面板。

接着将集合对象，移动到视图控制器的适当位置。

在集合视图定界框右下角处按下手指，并向下拖动，使集合视图的尺寸和根视图相同。

接着点击【尺寸检查器】图标，打开尺寸检查器面板，

Cell Size

【Width】:输入集合视图单元格宽度数值，

【Height】:输入集合视图单元格高度数值，

选择集合视图的单元格，点击【库面板】图标，打开控件库面板。

需要往集合视图的单元格中，添加一个图像视图。

在控件库搜索框内，输入控件名称Image View，在控件库中，快速定位目标控件。

然后在按钮控件上双击，导入所需的控件。

【X】:图像视图在单元格内的横向坐标值。

【Y】:图像视图在单元格内的纵向坐标值。

【Width】:图像视图宽度数值，

【Height】:图像视图高度数值，

打开【属性见哈起面板】

然后在【Tag】标志值，输入图像视图的标志值，

可以在代码中，通过标志值，获得图像视图对象。

在故事板文档框架区，选择集合视图的单元格。

在【Identifier】标识符输入框中，输入单元格的可重用标识符。

在故事板文档框架区，选择集合视图。

在集合视图控件上按下鼠标右键，然后拖动到视图控制器图标，设置集合视图的数据源。

在弹出的列表中，选择【dataSource】数据源选项，设置集合视图的数据源，为当前的视图控制器

在集合视图控件上按下鼠标右键，然后拖动到视图控制器图标，设置集合视图的代理。

在弹出的列表中，选择【delegate】代理选项，设置表格的代理。

点击【隐藏或显示检查器】按钮，隐藏检查器面板。

在项目导航区，打开视图控制器代码文件【ViewController.swift】

import UIKit
//给根视图控制器类，添加两个代理协议
//一个使集合视图的数据源协议，一个使集合视图的代理协议。
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    var images :Array<String>!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        //创建一个数组
        //该数组里面的数据，将作为集合数据的来源。
        images = ["Pic1", "Pic2", "Pic3", "Pic4", "Pic5", "Pic6", "Pic7", "Pic8", "Pic9"]
    }

    //添加一个集合视图代理方法，用来设置集合视图的单元格数量。
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //这里使用数组的长度，作为集合视图的单元格数量
        return images.count
    }
    
    //添加一个集合视图代理方法，用来初始化和返回集合视图的单元格，是最最重要的一个方法。
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //创建一个字符串，作为单元格的标识符，
25      //也就是上文在故事板中，给单元格控件设置的那个重用标识符。
        let cellIdentifier = "reusedCell"
        //单元格的标识符，可以看作是一种重用机制，此方法可以从所有已经开辟内存的单元格里面，
28      //选择一个具有同样标识符的、空闲的单元格。
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
        
        //通过在故事板中设置的标志值，获得单元格中的图像视图控件。
        let imageView = cell.viewWithTag(1) as! UIImageView
        //设置图像视图默认为半透明
        imageView.layer.opacity = 0.5
        //根据表格行的编号，从数组中获得对应的图像名称
        let imageName = images[(indexPath as NSIndexPath).row]
        //将加载后的图像，指定给图像视图
        imageView.image = UIImage(named: imageName)
        
        //最后返回设置好的单元格对象
        return cell
    }
    
    //添加一个代理方法，用来处理单元格的点击事件
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        //根据单元格的编号，获得被点击的单元格
        let cell = collectionView.cellForItem(at: indexPath)
        //通过在故事板中的标志值，获得单元格中的图像视图
        let view = cell?.viewWithTag(1)
        //将图像视图的透明度，设置为完全不透明。
        view?.layer.opacity = 1.0
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}