（十）swift UICollectionViewController常用操作(swift 九宫格)

桃扇骨 2022-08-18 02:07 333阅读 0赞

Demo 说明：九宫格  
软件环境：编译器：XCode 7.1.1

## 1、 新建 XCode “Single View Application” 项目 ##

填入Product Name：“MyCollection” , Next -> 选择路径，保存。  
![这里写图片描述][20151204131648698]

## 2、 删除所有视图，新建UICollectionViewController ##

单击打开Main.storyboard，删除所有视图，同时视图加入UICollectionViewController 选择下图中的九格图标，拖拽入Main.storyboard  
![这里写图片描述][20151204132136583]  
视图板结果如下：  
![这里写图片描述][20151204132227754]

## 3、 修改Title和默认视图选项 ##

单击 ![这里写图片描述][20151204132452327]，或单击![这里写图片描述][20151204132807613] 。  
右侧选择“属性选择器” ![这里写图片描述][20151204132841683]，Title 填入“home” ,勾选“Is Initial View Controller”![这里写图片描述][20151204132910904]

## 4、 新建“Cocoa Touch Class”，绑定视图 ##

新建Cocoa Touch Class  
![这里写图片描述][20151204133227773]

继承自 UICollectionViewController  
![这里写图片描述][20151204133741066]

绑定视图：选择新建的类”CollectionViewController”  
点击：![这里写图片描述][20151204133849013]  
，选择身份识别器  
![这里写图片描述][20151204133946330]  
更改Class 为“CollectionViewController”

绑定视图：选择新建的类”CollectionViewController”

## 5、 调整“CollectionViewController.swift”代码，显示九宫格 ##

修改函数numberOfSectionsInCollectionView：设置返回值为1（视图个数），

代码如下：  
numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int \{

return 1

修改函数 collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int：设置cell个数 为9  
代码如下：  
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int \{

return 9

修改函数func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell  
代码如下：

var i = 1;  
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell \{

let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath)

let \_frame = CGRect(x:0, y:0, width:100,height:40)  
let nil\_label = UILabel(frame: \_frame)  
nil\_label.tag = 1;  
nil\_label.text = “Hello” + String(i++);  
cell.contentView.addSubview(nil\_label)

return cell

启动模拟器运行，模拟器结果如下：  
![这里写图片描述][20151204140724587]

判断结果每一个cell 小于标准九宫格要求。

## 6、 通过代码调整九宫格大小 ##

新增代码如下：  
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize  
\{  
let frame = self.view.frame;  
var width = frame.width  
width = CGFloat(Int(width/3)-10)  
return CGSize(width: width, height: width)  
\}

运行模拟器，结果如下：  
![这里写图片描述][20151204141012138]

[20151204131648698]: /images/20220731/470d098d563445309da7805981403db1.png
[20151204132136583]: /images/20220731/e371e167649e43c5b427152c9c8bdd8f.png
[20151204132227754]: /images/20220731/49767e5aa99345aaad92ecc711052ab4.png
[20151204132452327]: https://img-blog.csdn.net/20151204132452327
[20151204132807613]: /images/20220731/1c277e9904a548088f981b7b573e2aae.png
[20151204132841683]: https://img-blog.csdn.net/20151204132841683
[20151204132910904]: /images/20220731/7bfee81a901a4441a07135664f9785f0.png
[20151204133227773]: /images/20220731/9029e9d82aa54ff5bf143f44581749e8.png
[20151204133741066]: /images/20220731/fcd646c2af15447ba10f7a46e70f5e99.png
[20151204133849013]: /images/20220731/fe1b1b8b0faa470884551c3517abd738.png
[20151204133946330]: /images/20220731/f456415b36bf48dcbd32e73f2a63ff92.png
[20151204140724587]: /images/20220731/6cf4223e5d104e0aab6d1d2a4266bd51.png
[20151204141012138]: /images/20220731/7889e2973ab64906943dae21cd0fe819.png