如何使用Swift创建一个简单的集合视图-Java 学习之路

139

我正在努力学习如何使用 UICollectionView . documentation有点难以理解，我发现的教程要么是在Objective C中，要么是在很复杂的项目中 .

当我学习如何使用 UITableView 时，我们❤Swift的How to make a simple tableview with iOS 8 and Swift有一个非常基本的设置和解释让我去 . UICollectionView 有这样的东西吗？

下面的答案是我试图学习如何做到这一点 .

5 回答

0
该项目已经过Xcode 10和Swift 4.2的测试 .

创建一个新项目

它可以只是一个单一视图应用程序 .

添加代码

创建一个新的Cocoa Touch类文件（文件>新建>文件...> iOS> Cocoa Touch类） . 将其命名为 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.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)!")
    }
}
```
Notes
- UICollectionViewDataSource 和 UICollectionViewDelegate 是集合视图遵循的协议 . 您还可以添加 UICollectionViewFlowLayout 协议以编程方式更改视图的大小，但这不是必需的 .
- 我们只是在网格中放入简单的字符串，但你以后肯定可以做图像 .
设置故事板

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

确保属性检查器中的默认值也是
- 项目：1
- 布局：流程
Collection View左上角的小方框是Collection View Cell . 我们将它用作我们的原型单元 . 将标签拖到单元格中并使其居中 . 您可以调整单元格边框的大小，并根据需要添加约束以使Label居中 .

在“集合视图单元”的“属性”检查器的“标识符”框中写入"cell"（不带引号） . 请注意，这与ViewController.swift中的 let reuseIdentifier = "cell" 相同 .

在单元格的Identity Inspector中，将类名设置为 MyCollectionViewCell ，即我们制作的自定义类 .

连接插座
- 将集合单元格中的Label挂钩到 MyCollectionViewCell 类中的 myLabel . （你可以Control-drag . ）
- 将集合视图 delegate 和 dataSource 挂钩到视图控制器 . （右键单击“文档大纲”中的“集合视图” . 然后单击并将加号向下拖动到视图控制器 . ）
完了

这是在添加约束以使Label在单元格中居中并将Collection View固定到父级墙壁之后的样子 .

进行改进

上面的例子有效，但它相当丑陋 . 以下是您可以使用的一些内容：

Background color

在Interface Builder中，转到 Collection View > Attributes Inspector > View > Background .

Cell spacing

将单元格之间的最小间距更改为较小的值会使其看起来更好 . 在Interface Builder中，转到 Collection View > Size Inspector > Min Spacing 并使值更小 . "For cells"是水平距离，"For lines"是垂直距离 .

Cell shape

如果你想要圆角，边框等，你可以玩单元格 layer . 这是一些示例代码 . 您可以在上面的代码中直接将其放在 cell.backgroundColor = UIColor.cyan 之后 .
```
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8
```
有关您可以对图层执行的其他操作（例如，阴影），请参阅this answer .

Changing the color when tapped

当细胞在视觉上对水龙头作出反应时，它可以提供更好的用户体验 . 实现此目的的一种方法是在触摸单元格时更改背景颜色 . 为此，请将以下两个方法添加到 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
}
```
Here is the updated look:

进一步研究
本问答的UITableView版本
- UITableView example for Swift
回复于 2024-05-02T15:00:59+08:00

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
}

回复于 2024-05-02T15:00:59+08:00

422

对于 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
}

回复于 2024-05-02T15:00:59+08:00

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)
    }

}

回复于 2024-05-02T15:00:59+08:00

2

UICollectionView与UITableView相同，但它为我们提供了简单创建网格视图的附加功能，这在UITableView中有点问题 . 这将是一个很长的帖子，我提到了一个link，你将从中获得一切简单的步骤 .

回复于 2024-05-02T15:00:59+08:00

如何使用Swift创建一个简单的集合视图

5 回答

创建一个新项目

添加代码

设置故事板

连接插座

完了

进行改进

进一步研究

本问答的UITableView版本

相关问题