给我两分钟的时间:微博风格九宫格:UICollectionView实现
2023-04-18 15:21:30 时间
引言
UICollectionView 是 iOS 平台上一种强大的视图布局工具,能够很好地实现网格布局,列表布局等多种布局方式。
首先讲下今天的目标,我们将要使用 UICollectionView 来创建仿微博的九宫格内容。首先,目标行数为3,每行显示3张图片,总共显示9张图片。
实现方式
我们往界面上添加一个 UICollectionView,并创建一个 UICollectionViewFlowLayout 布局类,这里的实现为懒加载的方式:
- (UICollectionView *)collectionView {
if (!_collectionView) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
_collectionView.scrollEnabled = NO; // 设置不让滑动
[self.view addSubview:_collectionView];
}
return _collectionView;
}
为自定义 cell 注册到 UICollectionView 中:
[_collectionView registerClass:[GCImageGridCell class] forCellWithReuseIdentifier:kGCImageGridCell];
然后,我们设置 UICollectionView 的数据源协议:
_collectionView.dataSource = self;
接着实现 UICollectionView 的协议内容:
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.datas.count;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
GCImageGridCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kGCImageGridCell forIndexPath:indexPath];
NSString *imgName = self.datas[indexPath.row];
cell.imgView.image = [UIImage imageNamed:imgName];
return cell;
}
接着,设置前面的 UICollectionViewFlowLayout 的属性,将滑动的方向设置为纵向滑动:
layout.scrollDirection = UICollectionViewScrollDirectionVertical; //设置布局方式为纵向布局
接下来,计算每个 item 的大小、item 之间的间距和行距、每个分组之间的间距:
CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;
CGFloat horizontal = 16; // 左右边距
CGFloat itemSpace = 6; // item 的间距
CGFloat itemSize = (screenWidth - horizontal * 2 - itemSpace * 2) / 3; // 计算每个 item 的大小
layout.minimumLineSpacing = itemSpace;
layout.minimumInteritemSpacing = itemSpace;
layout.sectionInset = UIEdgeInsetsMake(0, horizontal, 0, horizontal);
layout.itemSize = CGSizeMake(floor(itemSize), floor(itemSize));
注意:计算item大小时使用到了floor函数向下取整,这是防止每行的 item 有超出屏幕而导致换行的问题
效果呈现
总结
在这篇文章中,我们学习了如何用 UICollectionView 来制作九宫格布局。希望这篇文章能为大家带来帮助,快来关注我,让我们一起努力!
关于作者
博文作者:GarveyCalvin
公众号:凡人程序猿
微博:https://weibo.com/feiyueharia
博客园:https://www.cnblogs.com/GarveyCalvin
本文版权归作者所有,欢迎转载,但必须保留此段声明,并给出原文链接,谢谢合作!
相关文章
- 怎样暂停jupyter的运行?
- pycharm怎么返回(代码跳转回退)
- 雷军称小米成为电动汽车前五才能成功、微软被曝泄露2.4TB客户敏感数据、Meta已开发出无文字语言AI翻译系统 | T资讯
- 无线系统复杂性增加,AI 成克服挑战的关键
- Meta 开源首个 AI 语音翻译系统,闽南话和英语可以直接语音互译!
- 微软宣布Power Platform将为企业用户提供AI新功能
- python UDP编程是什么意思?
- 静态分配ip和动态分配ip 的定义是什么
- pycharm怎么格式化代码
- 助力企业数字化升级,火山引擎发布云上增长解决方案
- Web 3.0世界中的嬉皮士、先知与造物主
- 五款经典代码阅读器的使用方案对比
- 思迈特软件Smartbi完成C轮融资,推动国产BI加速进入智能化时代
- 是什么让 Flutter 与众不同
- 2022年软件开发的趋势
- Windows环境安装Flutter
- macOS 环境安装Flutter
- 代理服务器软件如何理解?
- linux 环境安装Flutter
- Vue 3.0 有哪些新特性值得我们提前了解