小开

最佳答案

这个项目已经用Xcode 10和Swift 4.2进行了测试。

创建一个新项目

它可以只是一个单视图应用。

添加代码

创建一个新的Cocoa Touch Class文件(file >新比;文件…>iOS祝辞可可触摸类)。命名为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协议以编程方式改变视图的大小，但这不是必要的。
我们只是在网格中放入简单的字符串，但你以后当然可以做图像。

设置故事板

将集合视图拖到故事板中的视图控制器。如果您愿意，您可以添加约束，使其填充父视图。

确保属性检查器中的默认值也是

项目:1
布局:流

集合视图左上方的小框是一个集合视图单元格。我们将使用它作为我们的原型单元格。将标签拖到单元格中并居中。如果您愿意，可以调整单元格边框的大小，并添加约束以使Label居中。

写“cell"(不带引号)在集合视图单元格的属性检查器的标识符框中。注意，这与ViewController.swift中的let reuseIdentifier = "cell"值相同。

在单元格的身份检查器中，将类名设置为MyCollectionViewCell，这是我们创建的自定义类。

连接插座

将集合单元格中的Label与MyCollectionViewCell类中的myLabel挂钩。(你可以control - drag。)
将集合视图delegate和dataSource绑定到视图控制器。(右键单击文档大纲中的集合视图。然后点击并拖动加号箭头到视图控制器。)

完成了

下面是添加约束以使标签位于单元格的中心，并将集合视图固定到父元素的墙壁之后的样子。

做出改进

上面的例子是可行的，但它相当难看。这里有一些你可以玩的东西:

背景颜色

在接口构建器中，转到收藏视图>属性检查>视图比;背景。

单元格间距

将单元格之间的最小间距更改为较小的值可以使其看起来更好。在接口构建器中，转到收藏视图>尺寸检验员;最小间距并使值变小。“cells"为水平距离，“为线”;是垂直距离。

细胞形状

如果你想要圆角、边框等，你可以使用单元格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
}

这是更新后的外观:

进一步的研究

这个问答的UITableView版本

UITableView的Swift示例

小开

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
}

小开

UICollectionView和UITableView是一样的，但是它给了我们额外的功能，简单地创建一个网格视图，这在UITableView中有点问题。这将是一个非常长的帖子，我提到了链接，从那里你可以用简单的步骤得到一切。

小开

UICollectionView的实现非常有趣。您可以使用简单的源代码，并使用这些链接观看视频教程:

https://github.com/Ady901/Demo02CollectionView.git

https://www.youtube.com/watch?v=5SrgvZF67Yw

extension ViewController : UICollectionViewDataSource {


func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return nameArr.count
}


func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DummyCollectionCell", for: indexPath) as! DummyCollectionCell
cell.titleLabel.text = nameArr[indexPath.row]
cell.userImageView.backgroundColor = .blue
return cell
}


}


extension ViewController : UICollectionViewDelegate {


func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let alert = UIAlertController(title: "Hi", message: "\(nameArr[indexPath.row])", preferredStyle: .alert)
let action = UIAlertAction(title: "OK", style: .default, handler: nil)
alert.addAction(action)
self.present(alert, animated: true, completion: nil)
}


}

小开

对于swift 4.2——

//MARK: UICollectionViewDataSource


func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1     //return number of sections in collection view
}


func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10    //return number of rows in section
}


func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath as IndexPath)
configureCell(cell: cell, forItemAtIndexPath: indexPath)
return cell      //return your cell
}


func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
cell.backgroundColor = UIColor.black




//Customise your cell


}


func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
let view =  collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", for: indexPath as IndexPath) as UICollectionReusableView
return view
}


//MARK: UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// When user selects the cell
}


func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
// When user deselects the cell
}

如何用Swift制作一个简单的集合视图