iOS Swift版 UICollectionView的使用
发布日期:2021-05-27 02:41:56 浏览次数:3 分类:技术文章

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

前言:

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

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

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

在这里插入图片描述

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

1:拖拽UICollectionView至StoryBoard

在这里插入图片描述
2:在cell内部放入控件,这里以UILabelUIImageView为例(如果cell过小不足以放下控件,可以使cell变大、待放入的控件变小以达到要求)

在这里插入图片描述

3:设置cell的Identifier。如图所示,先点击左侧区域,再点击右侧区域设置。这里的值为String类型且唯一
在这里插入图片描述

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

六:效果图(横向滑动、竖直滑动设置)

在这里插入图片描述

如何设置滑动方向?
在这里插入图片描述
如图所示,先单击左侧UICollectionView部分,然后选择右侧“Scroll Direction”即可。如果要展示的效果像RecyclerView那样不带九宫格(即默认全部水平滚动或上下滚动),注意设置cell的高度与UICollectionView的高度一致即可(实际上只要UICollectionView的高度不超过cell高度两倍,那么最终将不会显示九宫格形式)。

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

参考这篇文章:

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

上一篇:UICollectionView cell子项布局的分析
下一篇:iOS 基于SPM使用第三方库Toast-Swift

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2023年11月20日 01时48分24秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章