我正在尝试学习如何使用UICollectionView. 文档有点难以理解,我发现的教程要么是在 Objective C 中,要么是在很长的复杂项目中。
UICollectionView
当我学习如何使用UITableView时, 我们鉂� Swift 的 How to make a simple tableview with iOS 8 and Swift有一个非常基本的设置和解释让我开始。有这样的事情UICollectionView吗?
UITableView
下面的答案是我尝试学习这样做。
该项目已使用 Xcode 10 和 Swift 4.2 进行了测试。
它可以只是一个单一视图应用程序。
创建一个新的 Cocoa Touch Class 文件(File > New > File… > iOS > Cocoa Touch Class)。命名它MyCollectionViewCell。此类将保存您添加到情节提要中的单元格的视图的出口。
MyCollectionViewCell
import UIKit class MyCollectionViewCell: UICollectionViewCell { @IBOutlet weak var myLabel: UILabel! }
稍后我们将连接此插座。
打开 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.row] // The row value is the same as the index of the desired text within the array. 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
将 Collection View 拖到 Storyboard 中的 View Controller 中。如果您愿意,可以添加约束以使其填充父视图。
确保属性检查器中的默认值也是
集合视图左上角的小框是集合视图单元格。我们将使用它作为我们的原型单元。将标签拖入单元格并将其居中。如果愿意,您可以调整单元格边框的大小并添加约束以使标签居中。
在 Collection View Cell 的 Attributes Inspector 的 Identifier 框中写入“cell”(不带引号)。请注意,这与 ViewController.swift 中的值相同let reuseIdentifier = "cell"。
let reuseIdentifier = "cell"
在单元格的 Identity Inspector 中,将类名设置为MyCollectionViewCell,我们创建的自定义类。
myLabel
delegate
dataSource
这是在添加约束以使单元格中的标签居中并将集合视图固定到父项的墙壁后的样子。
上面的例子有效,但它相当难看。这里有一些你可以玩的东西:
背景颜色
在 Interface Builder 中,转到 Collection View > Attributes Inspector > View > Background。
单元间距
将单元格之间的最小间距更改为较小的值使其看起来更好。在 Interface Builder 中,转到您的 Collection View > Size Inspector > Min Spacing并使值更小。“对于单元格”是水平距离,“对于线条”是垂直距离。
细胞形状
如果你想要圆角、边框等,你可以玩一下 cell layer。这是一些示例代码。您可以将其直接放在cell.backgroundColor = UIColor.cyan上面的代码之后。
layer
cell.backgroundColor = UIColor.cyan
cell.layer.borderColor = UIColor.black.cgColor cell.layer.borderWidth = 1 cell.layer.cornerRadius = 8
有关可以对图层执行的其他操作(例如阴影),请参阅此答案。
在 swift 4 中快速测试的东西
import UIKit extension UIView { @IBInspectable var dropShadow: Bool { set{ if newValue { layer.shadowColor = UIColor.black.cgColor layer.shadowOpacity = 0.4 layer.shadowRadius = 1 layer.shadowOffset = CGSize.zero } else { layer.shadowColor = UIColor.clear.cgColor layer.shadowOpacity = 0 layer.shadowRadius = 0 layer.shadowOffset = CGSize.zero } } get { return layer.shadowOpacity > 0 } } }
生产
如果您像这样在检查器中启用它:
它将添加用户定义的运行时属性,从而导致:
(我之前添加了cornerRadius = 8)
cornerRadius = 8
点击时更改颜色
当单元格对点击做出视觉响应时,它可以提供更好的用户体验。实现此目的的一种方法是在触摸单元格时更改背景颜色。为此,请将以下两种方法添加到您的ViewController类中:
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 }
这是更新后的外观: