如何使用Swift做一个简单的集合视图
我试图学习如何使用UICollectionView 。 该文档有点难以理解，我发现的教程是在Objective C或长时间复杂的项目。
当我学习如何使用UITableView ， 我们❤Swift的 如何使用iOS 8制作一个简单的tableview，Swift有一个非常基本的设置和解释让我走。 有没有这样的UICollectionView ？
下面的答案是我尝试学习这样做。
这个项目已经更新了Xcode 8和Swift 3。
创build一个新的项目
它可以只是一个单一的视图应用程序。
添加代码
创build一个新的Cocoa Touch类文件（File> New> File …> iOS> Cocoa Touch Class）。 将其命名为MyCollectionViewCell 。 本课将为您添加到故事板中单元格的视图设置分支。
import UIKit class MyCollectionViewCell: UICollectionViewCell { @IBOutlet weak var myLabel: UILabel! }
我们稍后会连接这个sockets。
打开ViewController.swift，并确保你有以下内容：
import UIKit class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate { let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"] // MARK: - UICollectionViewDataSource protocol // tell the collection view how many cells to make func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return self.items.count } // make a cell for each cell index path func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { // get a reference to our storyboard cell let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell // Use the outlet in our custom class to get a reference to the UILabel in the cell cell.myLabel.text = self.items[indexPath.item] cell.backgroundColor = UIColor.cyan // make cell more visible in our example project return cell } // MARK: - UICollectionViewDelegate protocol func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { // handle tap events print("You selected cell #\(indexPath.item)!") } }
笔记
-
UICollectionViewDataSource和UICollectionViewDelegate是集合视图遵循的协议。 您还可以添加UICollectionViewFlowLayout协议以编程方式更改视图的大小，但这不是必需的。 - 我们只是把简单的string放在我们的网格中，但是你以后肯定可以做图像。
设置故事板
将集合视图拖到故事板中的视图控制器中。 如果你喜欢，你可以添加约束来填充父视图。
确保属性检查器中的默认值也是
- 项目：1
- 布局：stream
集合视图左上方的小框是一个集合视图单元。 我们将使用它作为我们的原型单元格。 将一个标签拖到单元格中心。 如果您愿意，您可以调整单元格边框的大小并添加约束来将标签居中。
在集合视图单元的属性检查器的标识符框中写入“单元格”（不带引号）。 请注意，这与ViewController.swift中的let reuseIdentifier = "cell"值相同。
在单元格的Identity Inspector中，将类名设置为我们自定义的类MyCollectionViewCell 。
连接网点
- 将集合单元中的标签挂钩到
MyCollectionViewCell类中的myLabel。 （你可以控制拖动 。） - 将Collection View
delegate和dataSource挂钩到View Controller。 （右键单击“文档大纲”中的“集合视图”，然后单击并将向上箭头向上拖到“视图控制器”。）
成品
在添加约束以将单元格放置在单元格的中心并将集合视图固定到父窗体之后，以下是它的样子。
改进
上面的例子工作，但它是相当丑陋的。 这里有一些你可以玩的东西：
背景颜色
在界面生成器中，转到您的集合视图>属性检查器>视图>背景 。
单元格间距
将单元格之间的最小间距更改为更小的值使其看起来更好。 在界面生成器中，转到“ 集合视图”>“大小检查器”>“最小间距” ，并将值设置得更小。 “对于单元格”是水平距离，“对于线条”是垂直距离。
细胞形状
如果你想要圆angular，边框等，你可以在细胞layer玩耍。 这里是一些示例代码。 你可以把它放在cell.backgroundColor = UIColor.cyan的代码中。
cell.layer.borderColor = UIColor.black.cgColor cell.layer.borderWidth = 1 cell.layer.cornerRadius = 8
看到这个答案你可以用层做的其他事情（例如阴影）。
点击时改变颜色
当单元以可视方式响应水龙头时，它提供了更好的用户体验。 达到此目的的一种方法是在单元格被触摸时更改背景颜色。 为此，将以下两个方法添加到ViewController类中：
// change background color when user touches cell func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) { let cell = collectionView.cellForItem(at: indexPath) cell?.backgroundColor = UIColor.red } // change background color back when user releases touch func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) { let cell = collectionView.cellForItem(at: indexPath) cell?.backgroundColor = UIColor.cyan }
这是更新的外观：
进一步研究
- 一个简单的UICollectionView教程
- UICollectionView教程第1部分：入门
- UICollectionView教程第2部分：可重用的视图和单元格select
这个Q＆A的UITableView版本
- Swift的UITableView示例
UICollectionView的委托和数据源
//MARK: UICollectionViewDataSource override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { return 1 //return number of sections in collection view } override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 10 //return number of rows in section } override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath) configureCell(cell, forItemAtIndexPath: indexPath) return cell //return your cell } func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) { cell.backgroundColor = UIColor.blackColor() //Customise your cell } override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView { let view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView return view } //MARK: UICollectionViewDelegate override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { // When user selects the cell } override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) { // When user deselects the cell }
