如何使用 Swift 创建一个简单的集合视图 [英] How to make a simple collection view with Swift
问题描述
我正在尝试学习如何使用 UICollectionView
.
确保属性检查器中的默认值也是
- 项目:1
- 布局:流程
集合视图左上角的小框是集合视图单元格.我们将使用它作为我们的原型单元.将标签拖到单元格中并将其居中.如果您愿意,您可以调整单元格边框的大小并添加约束以将标签居中.
写入单元格"(不带引号)在集合视图单元格的属性检查器的标识符框中.请注意,这与 ViewController.swift 中的 let ReuseIdentifier = "cell"
的值相同.
在单元格的身份检查器中,将类名设置为 MyCollectionViewCell
,这是我们创建的自定义类.
连接插座
- 将集合单元格中的 Label 与
MyCollectionViewCell
类中的myLabel
挂钩.(您可以完成
这是添加约束以将 Label 置于单元格中的中心并将 Collection View 固定到父级的墙壁后的样子.
进行改进
上面的例子有效,但它相当丑陋.以下是您可以玩的一些东西:
背景颜色
在界面生成器中,转到您的集合视图>属性检查器 >查看 >背景.
单元格间距
将单元格之间的最小间距更改为较小的值会使其看起来更好.在 Interface Builder 中,转到您的 Collection View >尺寸检查员 >最小间距并使值变小.对于细胞"是水平距离和对于线"是垂直距离.
细胞形状
如果您想要圆角、边框等,您可以使用单元格
layer
.这是一些示例代码.您可以将它直接放在上面代码中的cell.backgroundColor = UIColor.cyan
之后.cell.layer.borderColor = UIColor.black.cgColorcell.layer.borderWidth = 1cell.layer.cornerRadius = 8
请参阅
进一步研究
此问答的 UITableView 版本
I'm trying to learn how to use
UICollectionView
. The documentation is a little hard to understand and the tutorials that I found were either in Objective C or long complicated projects.When I was learning how to use
UITableView
, We ❤ Swift's How to make a simple tableview with iOS 8 and Swift had a very basic setup and explanation to get me going. Is there anything like this forUICollectionView
?The answer below is my attempt to learn to do this.
解决方案This project has been tested with Xcode 10 and Swift 4.2.
Create a new project
It can be just a Single View App.
Add the code
Create a new Cocoa Touch Class file (File > New > File... > iOS > Cocoa Touch Class). Name it
MyCollectionViewCell
. This class will hold the outlets for the views that you add to your cell in the storyboard.import UIKit class MyCollectionViewCell: UICollectionViewCell { @IBOutlet weak var myLabel: UILabel! }
We will connect this outlet later.
Open ViewController.swift and make sure you have the following content:
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)!") } }
Notes
UICollectionViewDataSource
andUICollectionViewDelegate
are the protocols that the collection view follows. You could also add theUICollectionViewFlowLayout
protocol to change the size of the views programmatically, but it isn't necessary.- We are just putting simple strings in our grid, but you could certainly do images later.
Set up the storyboard
Drag a Collection View to the View Controller in your storyboard. You can add constraints to make it fill the parent view if you like.
Make sure that your defaults in the Attribute Inspector are also
- Items: 1
- Layout: Flow
The little box in the top left of the Collection View is a Collection View Cell. We will use it as our prototype cell. Drag a Label into the cell and center it. You can resize the cell borders and add constraints to center the Label if you like.
Write "cell" (without quotes) in the Identifier box of the Attributes Inspector for the Collection View Cell. Note that this is the same value as
let reuseIdentifier = "cell"
in ViewController.swift.And in the Identity Inspector for the cell, set the class name to
MyCollectionViewCell
, our custom class that we made.Hook up the outlets
- Hook the Label in the collection cell to
myLabel
in theMyCollectionViewCell
class. (You can Control-drag.) - Hook the Collection View
delegate
anddataSource
to the View Controller. (Right click Collection View in the Document Outline. Then click and drag the plus arrow up to the View Controller.)
Finished
Here is what it looks like after adding constraints to center the Label in the cell and pinning the Collection View to the walls of the parent.
Making Improvements
The example above works but it is rather ugly. Here are a few things you can play with:
Background color
In the Interface Builder, go to your Collection View > Attributes Inspector > View > Background.
Cell spacing
Changing the minimum spacing between cells to a smaller value makes it look better. In the Interface Builder, go to your Collection View > Size Inspector > Min Spacing and make the values smaller. "For cells" is the horizontal distance and "For lines" is the vertical distance.
Cell shape
If you want rounded corners, a border, and the like, you can play around with the cell
layer
. Here is some sample code. You would put it directly aftercell.backgroundColor = UIColor.cyan
in code above.cell.layer.borderColor = UIColor.black.cgColor cell.layer.borderWidth = 1 cell.layer.cornerRadius = 8
See this answer for other things you can do with the layer (shadow, for example).
Changing the color when tapped
It makes for a better user experience when the cells respond visually to taps. One way to achieve this is to change the background color while the cell is being touched. To do that, add the following two methods to your
ViewController
class:// 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 }
Here is the updated look:
Further study
- A Simple UICollectionView Tutorial
- UICollectionView Tutorial Part 1: Getting Started
- UICollectionView Tutorial Part 2: Reusable Views and Cell Selection
UITableView version of this Q&A
这篇关于如何使用 Swift 创建一个简单的集合视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!