UICollectionView一个section只有一个item的时候它会出现在屏幕中间的bug

最新推荐文章于 2024-06-10 17:19:28 发布
转载 最新推荐文章于 2024-06-10 17:19:28 发布 · 7.6k 阅读 · 0
文章标签：

#UICollectionView

本文介绍如何使用UICollectionViewFlowLayout的自定义方法解决特定布局需求，即首行单元素显示，后续行双元素左对齐的问题。

需求：为实现第一行显示一个，第二行以后显示两个

方案1：用系统自带的流布局，实现的效果是，若第二行只有一个，则系统默认会居中显示，不是左对齐（如下图），不符合项目要求。

方案2：自定义系统的UICollectionViewFLowLayout，主要代码如下， 只要继承super的layoutAttributes，修改section=0,row=1的Item的X 为0即可

（之前走了很多弯路，

自定义collectionView,最后一行的居中
Nina_03的博客
12-27 3632
collectionView 都是从第一位开始的,想要达到居中的效果就要自定义一个瀑布流.一个小 demo, 和大家分享一下. 在 viewcontroller 里面 #import "ViewController.h" #import "CustomFlowLayout.h" #define ScreenWidth [UIScreen mainScreen].bounds
swift collecttionView, cell居中
weixin_43899955的博客
11-06 474
【代码】swift collecttionView, cell居中。
UICollectionView如果在数据不够一屏时上下滚动
startexcel的专栏
07-07 1万+
当数据不多，collectionView.contentSize小于collectionView.frame.size的时候，UICollectionView是不会滚动的  self.Cov.alwaysBounceVertical = YES; 就可以了
iOS-UICollectionView一行可以居左或居中，居右自适应宽度显示多个Item
MinggeQingchun的博客
06-04 7419
近来需要做一个需求，就是可以输入新建多个标签，标签高度固定，但宽度不固定且个数不固定，效果图如下： 因此初步设想：使用UICollectionView的item自适应宽度，方法如下： #import "TestCollectionCell.h" @interface TestCollectionCell() @property(nonatomic,weak)UILabel *yard...
如何居中对齐一个UICollectionView的 item (虽然略看了一下，但是代码是有效果的)
春风得意，马蹄仍急；少年豪情，一笑难回。
08-18 7458
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{          NSInteger numberOfItem
【IOS-Debug】UICollectionView在进行cell左对齐布局时候出现一根分割线
sinat_41533458的博客
12-07 666
思考过是不是因为左对齐导致Cell位移的问题，今天换了一个左对齐布局还是不对，后面突然想到是不是View添加的问题，去掉了第二组视图上唯一的View，果然不见了。后面尝试把这个View的白色背景去掉，只留。在开发过程中因为同一组cell的大小不一致，有一行两个的，也有一行一个的。上的白色背景，果然问题解决了。这，都是白色的背景，竟然出现了灰色的线，也是想不到的。记录下这个奇怪的bug。为了满足，选择了向左对齐的布局，但是出现了第二组上面有一根灰色的线（图3），非代码添加的。
UICollectionView 的研究之二 ：自定义 UICollectionViewFlowLayout
u013410274的专栏
04-18 1万+
UICollectionView 实现各式复杂布局核心在于 UICollectionViewLayout，需要我们去自定义实现。通过各种layout 的自定义实现，以及它们之间的切换。可以实现一些酷炫的布局，例如（图片选自：http://www.cnblogs.com/markstray/p/5822262.html）Cover Flow 布局堆叠布局圆形布局关于需要重写方法的描述自定义布局需要重...
UICollectionView双分区自定义拖动排序实现方案
例如，当一个元素从section 0的第2行拖到section 1的末尾时，需先从原数组移除，再插入目标数组相应位置，同时通知collectionView执行`moveItem(at:to:)`动画以保持UI一致性。 此外，项目还强调了“**自动滑动**”...
UICollectionView实现水流滚动效果案例解析
UICollectionViewLayout是一个抽象类，开发者需要继承这个类，并且实现其方法来定义布局。例如，开发者可以定义item的位置，大小，间距，以及section的头部和尾部。 5.UICollectionView的重用机制: ...
从0开始实现一个直播礼物系统
Keep_Dream的博客
04-12 4055
前段时间公司APP要对直播间的礼物系统进行改版,由于以前直播的收入不在于礼物分成,所以以前的礼物系统是很简单的一个展示而已.为适应主流直播间的礼物效果,特由此改版! 1. 所有直播间的礼物系统,第一步用户看到的无外乎都是礼物的列表界面 纵观主流直播间的礼物列表应该都是使用UICollectionView实现的,所以我也不例外,下面就是各种撸代码.效果如下 看着效果还不错吧....
import UIKit import SnapKit // MARK: - DeviceListNewViewController class DeviceListNewViewController: SurveillanceCommonTableController { // MARK: - 子视图声明 private lazy var tabScrollView: UIScrollView = { let scrollView = UIScrollView() scrollView.showsHorizontalScrollIndicator = false scrollView.backgroundColor = UIColor(white: 0.95, alpha: 1.0) scrollView.translatesAutoresizingMaskIntoConstraints = false return scrollView }() private let tabButtonTitles = ["所有设备", "收藏页面", "站点选择"] private var selectedTabIndex = 0 private var tabButtons: [UIButton] = [] private var collectionView: UICollectionView! // 新增：固定头部视图（始终在最上方） private lazy var stickyHeader: UIView = { let header = UIView() header.backgroundColor = .tpbBackground header.layer.cornerRadius = 0 header.clipsToBounds = false return header }() private lazy var backButton: UIButton = { let btn = UIButton(type: .custom) btn.setTitle("1", for: .normal) btn.setTitleColor(.systemBlue, for: .normal) btn.contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8) btn.addTarget(self, action: #selector(onBackTapped), for: .touchUpInside) return btn }() private lazy var locationButton: UIButton = { let btn = UIButton(type: .custom) btn.setTitle("2", for: .normal) btn.setTitleColor(.systemBlue, for: .normal) btn.contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8) btn.addTarget(self, action: #selector(onLocationTapped), for: .touchUpInside) return btn }() private lazy var titleLabel: UILabel = { let label = UILabel() label.text = "设备列表" label.font = UIFont.systemFont(ofSize: 18, weight: .medium) label.textColor = .tpbTextPrimary label.textAlignment = .center return label }() private lazy var searchButton: UIButton = { let btn = UIButton(type: .custom) btn.setTitle("3", for: .normal) btn.setTitleColor(.systemBlue, for: .normal) btn.contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8) btn.addTarget(self, action: #selector(onSearchTapped), for: .touchUpInside) return btn }() // MARK: - 生命周期 override func viewDidLoad() { super.viewDidLoad() self.tableView.contentInsetAdjustmentBehavior = .never } override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) navigationController?.setNavigationBarHidden(true, animated: false) } override func tpbSetupSubviews() { super.tpbSetupSubviews() // 添加吸顶栏 view.addSubview(stickyHeader) stickyHeader.addSubview(backButton) stickyHeader.addSubview(locationButton) stickyHeader.addSubview(titleLabel) stickyHeader.addSubview(searchButton) setupCollectionView() createTabButtons() reloadData() } override func tpbMakeConstraint() { // super.tpbMakeConstraint() // 布局 stickyHeader stickyHeader.snp.makeConstraints { make in make.top.equalTo(view.safeAreaLayoutGuide.snp.top) make.leading.trailing.equalToSuperview() make.height.equalTo(50) } backButton.snp.remakeConstraints { make in make.leading.equalTo(stickyHeader).offset(16) make.centerY.equalTo(stickyHeader) make.width.greaterThanOrEqualTo(30) } locationButton.snp.remakeConstraints { make in make.leading.equalTo(backButton.snp.trailing).offset(8) make.centerY.equalTo(backButton) make.size.equalTo(30) // 正方形按钮 } titleLabel.snp.remakeConstraints { make in make.centerX.equalToSuperview() make.centerY.equalTo(backButton) } searchButton.snp.remakeConstraints { make in make.trailing.equalTo(stickyHeader).offset(-16) make.centerY.equalTo(backButton) make.width.greaterThanOrEqualTo(30) } // tableView 紧贴 stickyHeader 下方 tableView.snp.remakeConstraints { make in make.top.equalTo(stickyHeader.snp.bottom).offset(10) make.leading.trailing.bottom.equalToSuperview() } } // MARK: - 创建 Tab 按钮 private func createTabButtons() { tabButtons = tabButtonTitles.enumerated().map { index, title in let btn = UIButton(type: .custom) btn.tag = index btn.setTitle(title, for: .normal) btn.titleLabel?.font = UIFont.systemFont(ofSize: 14) btn.setTitleColor(UIColor(white: 0.4, alpha: 1.0), for: .normal) btn.setTitleColor(.systemBlue, for: .selected) btn.layer.borderWidth = 1 btn.layer.borderColor = UIColor(white: 0.85, alpha: 1.0).cgColor btn.layer.cornerRadius = 20 btn.contentEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16) btn.addTarget(self, action: #selector(onTabTapped(_:)), for: .touchUpInside) _ = btn.intrinsicContentSize return btn } updateTabSelection(index: selectedTabIndex) } @objc private func onTabTapped(_ sender: UIButton) { guard sender.tag != selectedTabIndex else { return } tabButtons[selectedTabIndex].isSelected = false selectedTabIndex = sender.tag sender.isSelected = true collectionView.reloadData() } private func updateTabSelection(index: Int) { for (i, btn) in tabButtons.enumerated() { btn.isSelected = (i == index) } } // MARK: - 构建独立的 View 组件 /// 构建“设备数量”View private func createDeviceCountView() -> UIView { let view = UIView() view.backgroundColor = UIColor.yellow.withAlphaComponent(0.2) view.layer.cornerRadius = 8 view.clipsToBounds = true let label = UILabel() label.text = "设备总数：32 台" label.font = UIFont.systemFont(ofSize: 16, weight: .medium) label.textColor = .black label.textAlignment = .center view.addSubview(label) label.snp.makeConstraints { make in make.edges.equalTo(view).inset(12) } return view } /// 构建“存储空间”View private func createStorageUsageView() -> UIView { let view = UIView() view.backgroundColor = UIColor.orange.withAlphaComponent(0.2) view.layer.cornerRadius = 8 view.clipsToBounds = true let label = UILabel() label.text = "已用存储：1.2 TB / 5 TB" label.font = UIFont.systemFont(ofSize: 16, weight: .medium) label.textColor = .blue label.textAlignment = .center view.addSubview(label) label.snp.makeConstraints { make in make.edges.equalTo(view).inset(12) } return view } /// 构建 tabScrollView 的容器 View（替代原来的 tableHeaderView） private func createTabScrollContainerView() -> UIView { let container = UIView() container.backgroundColor = .clear container.addSubview(tabScrollView) tabScrollView.snp.makeConstraints { make in make.top.equalTo(container).offset(16) make.leading.trailing.equalToSuperview().inset(8) make.height.equalTo(40) make.bottom.equalTo(container).offset(-16) } layoutTabButtonsInScrollView() // 背景装饰 tabScrollView.backgroundColor = UIColor.yellow.withAlphaComponent(0.2) tabScrollView.layer.cornerRadius = 8 tabScrollView.clipsToBounds = true return container } /// 初始化 CollectionView private func setupCollectionView() { let layout = UICollectionViewFlowLayout() layout.scrollDirection = .vertical layout.minimumLineSpacing = 10 layout.minimumInteritemSpacing = 10 layout.sectionInset = UIEdgeInsets(top: 10, left: 16, bottom: 10, right: 16) collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout) collectionView.backgroundColor = .white collectionView.alwaysBounceVertical = false collectionView.showsVerticalScrollIndicator = false collectionView.translatesAutoresizingMaskIntoConstraints = false collectionView.dataSource = self collectionView.delegate = self // 用于 layout 回调 collectionView.register(DeviceListCell.self, forCellWithReuseIdentifier: "DeviceListCell") } // MARK: - 加载数据（核心：全部改为 Cell） private func reloadData() { var sectionArray = [TPBTableSectionModel]() let section = TPBTableSectionModel() var cellModels = [TPBBaseTableCellModel]() // 设备数量 Cell let deviceCountCellModel = TPBBaseTableCellModel.customContent(with: createDeviceCountView()) deviceCountCellModel.height = .customHeight(60) cellModels.append(deviceCountCellModel) // 存储空间 Cell let storageCellModel = TPBBaseTableCellModel.customContent(with: createStorageUsageView()) storageCellModel.height = .customHeight(60) cellModels.append(storageCellModel) // tabScrollView 区域 let tabScrollCellModel = TPBBaseTableCellModel.customContent(with: createTabScrollContainerView()) tabScrollCellModel.height = .customHeight(72) cellModels.append(tabScrollCellModel) // collectionView Cell let collectionCellModel = TPBBaseTableCellModel.customContent(with: collectionView) collectionCellModel.height = .customHeight(800) cellModels.append(collectionCellModel) section.cellModelArray = cellModels sectionArray.append(section) self.sectionArray = sectionArray tableView.reloadData() } // MARK: - Action 回调 @objc private func onBackTapped() { print("返回") navigationController?.popViewController(animated: true) } @objc private func onLocationTapped() { print("定位") } @objc private func onSearchTapped() { print("搜索") } // MARK: - 布局 Tab 按钮到 ScrollView private func layoutTabButtonsInScrollView() { // 先清空 scrollView 内容 tabScrollView.subviews.forEach { $0.removeFromSuperview() } var previousButton: UIButton? for button in tabButtons { tabScrollView.addSubview(button) button.snp.makeConstraints { make in make.centerY.equalToSuperview() make.height.equalTo(36) if let prev = previousButton { make.leading.equalTo(prev.snp.trailing).offset(8) } else { make.leading.equalTo(tabScrollView).offset(16) } make.width.greaterThanOrEqualTo(90) make.width.equalTo(button.titleLabel!.snp.width).offset(32).priority(.low) } previousButton = button } // 最后一个按钮约束到底部右边 previousButton?.snp.makeConstraints { make in make.trailing.equalTo(tabScrollView).offset(-16) } // 强制刷新布局 tabScrollView.layoutIfNeeded() } } // MARK: - UICollectionViewDataSource extension DeviceListNewViewController: UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 30 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DeviceListCell", for: indexPath) as! DeviceListCell cell.configure(with: "设备 \(indexPath.item + 1)") return cell } } // MARK: - UICollectionViewDelegateFlowLayout extension DeviceListNewViewController: UICollectionViewDelegateFlowLayout { func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let inset: CGFloat = 16 * 2 // 左右 sectionInset let spacing: CGFloat = 10 // item 间距 let width = (collectionView.bounds.width - inset - spacing) / 2 return CGSize(width: width, height: 80) // 固定高度 80，整齐划一 } } // MARK: - DeviceListCell (极简蓝色双列方格) class DeviceListCell: UICollectionViewCell { private let titleLabel = UILabel() override init(frame: CGRect) { super.init(frame: frame) setupUI() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) setupUI() } private func setupUI() { // 背景设置：浅蓝底色 + 蓝色边框 + 圆角 backgroundColor = UIColor.systemBlue.withAlphaComponent(0.1) layer.borderColor = UIColor.systemBlue.cgColor layer.borderWidth = 1 layer.cornerRadius = 8 clipsToBounds = true // 标题居中显示 titleLabel.font = UIFont.systemFont(ofSize: 16, weight: .medium) titleLabel.textColor = .systemBlue titleLabel.textAlignment = .center titleLabel.numberOfLines = 1 contentView.addSubview(titleLabel) titleLabel.translatesAutoresizingMaskIntoConstraints = false titleLabel.snp.makeConstraints { make in make.center.equalToSuperview() make.leading.trailing.greaterThanOrEqualToSuperview().inset(8) } } func configure(with title: String) { titleLabel.text = title } override func prepareForReuse() { super.prepareForReuse() titleLabel.text = nil } }我这个里面的滚动区域相关的是怎么个情况
最新发布
12-03
效果：整个页面只有一个 `UITableView` 负责滚动，流畅稳定。 --- ### ✅ 方案二：保留 `UICollectionView`，但允许其自由滚动 > 思路：让 `collectionView` 自己处理纵向滚动，`tableView` 不再滚动 collection...
iOS Collectionview滚动到指定项
小怪獸丶的糖的专栏
02-19 1793
cvUserInfo.ScrollToItem(Foundation.NSIndexPath.FromRowSection(index,0),UICollectionViewScrollPosition.CenteredHorizontally,false);
当我们使用多层级uitableView和UICollectionView的时候许要注意的
lfl18326162160的博客
05-25 882
记住要关闭一些滑动，要不然会导致滑动不了问题。（特别是iOS 10）
iOS UICollectionView 在滚动时停在某个item位置上
C_calary的博客
12-25 4677
方法一：实现UIScrollView的代理，然后实现下面这个方法#pragma mark - UIScrollViewDelegate //预计出大概位置，经过精确定位获得准备位置 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffse
UICollectionView 实现，自动滚动、一屏横向显示3个view
weixin_34418883的博客
05-21 1852
前言 实现UICollectionView的自动滚动，以及一屏下，中间显示一个view，两边显示半个view的效果，如图： 自动滚动实现逻辑 自动滚动是使用Timer实现，每个一段时间让UICollectionView自动滚动下即可。 定义一个Timer //自动滚动计时器 var autoScrollTimer:Timer? 定义一个...
UICollectionView解决item之间的间隙问题
iOS开发专栏
05-18 1万+
UICollectionView解决item之间的间隙问题 在项目中需要使用网格组件来显示列表信息，因此封装了一个iOS的网格组件GridView，demo地址： GitHub 在实现过程中发现一个问题，在iPhone8中，UICollectionView 展示的item之间总有间隙，即使设置了item等宽，也设置了UICollectionViewFlowLayout 的 minimumInt...
iOS调整collectionViewCell顺序
liubo的博客
06-10 906
就是设置collectionView调整顺序的代理方法，这里要注意一点调整过代理方法之后，一定要修改数据源，否则导致错乱。还有就是在collectionView上面添加一个长按手势，在长按手势的不同阶段，调用collectionView 调整顺序的系统方法 beginInteractiveMovementForItemAtIndexPath等等。
UICollectionViewCell重用注意要点（解决视图重叠问题）
热门推荐
damon2989的专栏
03-27 2万+
刚接触√，总会遇到很多莫名其妙的困难， 最容易造成bug的是，我总以为UICollectionView和UITableView是差不多的，就先入为主基本就照抄uitableview的东西去做，以为只是把几个数据源方法和代理方法改个名字而已，这就是bug不断的根源！！ 第一个问题：起码要显示点东西吧：     创建UICollectionViewFlowLayout并注册! 跟uitablev
UICollectionView 刷新布局错乱如何解决
qq_21455683的博客
09-09 1619
UICollectionView 刷新布局错乱如何解决 大家好，是不是很多小白和萌新在开发过程中遇到这样的问题,UITableView 刷新用 [_tableView reloadData];好好的，UICollectionView就不是那么回事了，尤其是item的宽度不一样的时候，整个界面惨不忍睹。网上看了很多人都说是cell的服用问题，用这种方式解决： NSString *identifier=[NSString stringWithFormat:@“cell%ld”,indexPath.row];
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值