本文共 4328 字，大约阅读时间需要 14 分钟。

前言：

Android中的RecyclerView在软件开发已经占到了重要地位。类似地iOS中也有对应的控件–UICollectionView。有一点需要补充的是，网络上其它关于该控件的介绍使用时都没有提到类似RecyclerView的水平方向上的滚动（非九宫格布局），而本文将浅显地说明如何达到这一效果。在开始学习之前需要先要了解关于UICollection、cell、cell子项（cell内部我们要放入的控件）的概念。

一：导入图片到Assets.xcassets文件夹

这里为了方便演示用到了9张相同的图片，文件名称随意，但不要都相同

二：拖拽UICollectionView至StoryBoard并配置Identifier和Tag

1：拖拽UICollectionView至StoryBoard

4：设置cell子项控件的Tag。这里为方便演示仅设置了UIImageView的tag。如图所示，先单击要设定tag值的控件，再单击右侧"Tag"栏以设定Tag。这里的值为Int且唯一。

三：实现UICollectionViewDataSource, UICollectionViewDelegate这两个协议

实现完后系统会报错，选择自动修复就行了。之后会多出这两个方法：

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       }    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       }

第一个方法为待返回cell子项的数目，也就是要展示的数目；第二个方法为返回待创建的cell内容和其子项（包括数据源）

四：完成以上两个方法

这里代码有些长，但很简单。首先创建一个数组，里面存放的是一开始提到的资源图片的名称。这里为了演示没有写成泛型，实际上应该写成泛型的。

第二项内容就是上文提到的第一个待实现的方法，这里就返回创建的图片数组的数量。

第三项内容就是上文提到的创建cell内容的方法。这里先创建cell对象，let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath)这条语句第一个参数就是我们一开始设置cell的Identifier；接着创建label对象。let label = cell.viewWithTag(1002) as! UILabel这条语句通过 viewWithTag我们拿到了cell内部的一个对象，然后强制转型为UILabel类型。下面的UIImageView也是如此，不过多赘述。最后返回一个cell对象。

var images: Array = ["P1","P2","P3","P4","P5","P6","P7","P8","P9","P10","P11","P12"]        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
           return images.count    }        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
           let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath)                let label = cell.viewWithTag(1002) as! UILabel        label.text = "No.\(indexPath.item)"                let imageView = cell.viewWithTag(1001) as! UIImageView        let imageName = images[(indexPath as NSIndexPath).row]                imageView.image = UIImage(named: imageName)                return cell    }        func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
           let cell = collectionView.cellForItem(at: indexPath)                print("\(indexPath)")    }

五：设置代理、数据源

这里首先先创建UICollectionView的IBOutlet对象，然后在viewDidLoad()方法里面设置数据源、代理源为self即可。

import UIKitclass ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate{
           @IBOutlet weak var collection: UICollectionView!        var images: Array = ["P11","P12","P13","P14","P15","P16","P17","P18","P19"];        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
           return images.count;    }        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
           let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath);                let label = cell.viewWithTag(1002) as! UILabel;        label.text = "No.\(indexPath.item)";                let imageView = cell.viewWithTag(1001) as! UIImageView;        let imageName = images[(indexPath as NSIndexPath).row];        imageView.image = UIImage(named: imageName);                return cell;    }        func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
           let cell = collectionView.cellForItem(at: indexPath);                print("You clicked \(indexPath.item) item.");                let view = cell?.viewWithTag(1001);        view?.layer.opacity = 0.5;                let label = cell?.viewWithTag(1002) as! UILabel;        label.text = "OK.";    }        override func viewDidLoad() {
           super.viewDidLoad()        // Do any additional setup after loading the view.                self.collection.delegate = self        self.collection.dataSource = self    }}

六：效果图（横向滑动、竖直滑动设置）

七：cell子项与UICollectionView的布局关系

参考这篇文章：

转载地址：https://blog.csdn.net/kicinio/article/details/109906441 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！