在iPhone13 pro真机和测试机上CollectionView Cell 换行情况

场景描述(踩空过程)

本来是CollectionView两列展示的布局,在模拟器(xcode模拟器是iPhone15)上开发过程显示很正常、很符合预期。之后换iPhone13真机测试两列变一列,回过头用iPhone13的模拟器也是一样效果。打印计算出来的数值对比都是正确的,真让人头秃啊!

后来在StackOverflow上搜到有人遇到,他解决方法是计算出来的item宽度用floor下取整。但到我这里没有直接取到效果,再把间距调小才重新显示两列。

ε=(´ο`*)))唉,汗颜~ 过程让人头秃~

其实总体思路是给横向水平上计算的值比设计长度短点,给间距minimumInteritemSpacing多留空间,这样可以从间距调小和item调小两个方面入手。

解决方案

以下是遇到情况的代码(其他代码部分就是平常的CollectionView写法):

ini 复制代码
// settingCollectionviewItem()方法在viewDidload中调用的
func settingCollectionviewItem() {

    let columnCount = 2

    let horizontalMargin: CGFloat = 14
    let verticolMargin: CGFloat = 14

    let flowLayout = UICollectionViewFlowLayout()
        
    flowLayout.minimumLineSpacing = verticolMargin
    flowLayout.minimumInteritemSpacing = horizontalMargin
        
    flowLayout.sectionInset = UIEdgeInsets(top: verticolMargin, left: horizontalMargin, bottom: verticolMargin, right: horizontalMargin)

    let colloctionWidth = myrCollectionView.frame.width

    let itemWidth = (colloctionWidth - (CGFloat(columnCount - 1) * horizontalMargin + flowLayout.sectionInset.left + flowLayout.sectionInset.right)) / CGFloat(columnCount)

    // Item宽高比152:220
    let itemHeight = itemWidth * (220 / 152)

    flowLayout.itemSize = CGSize(width: itemWidth, height: itemHeight)

    myrCollectionView.collectionViewLayout = flowLayout
}
    

以下是采取的措施 (有更好的处理方法望评论区告知,还有知道为什么这个机型显示有问题也麻烦告知,不胜感激!):

ini 复制代码
func settingCollectionviewItem() {

    let columnCount = 2

    let horizontalMargin: CGFloat = 14
    let verticolMargin: CGFloat = 14

    let flowLayout = UICollectionViewFlowLayout()

    flowLayout.minimumLineSpacing = verticolMargin
    flowLayout.minimumInteritemSpacing = horizontalMargin - 2

    flowLayout.sectionInset = UIEdgeInsets(top: verticolMargin, left: horizontalMargin, bottom: verticolMargin, right: horizontalMargin)

    let colloctionWidth = myCollectionView.frame.width

    let itemWidth = floor((colloctionWidth - (CGFloat(columnCount - 1) * horizontalMargin + flowLayout.sectionInset.left + flowLayout.sectionInset.right)) / CGFloat(columnCount))

    // Item宽高比152:220
    let itemHeight = itemWidth * (220 / 152)

    flowLayout.itemSize = CGSize(width: itemWidth, height: itemHeight)

    myCollectionView.collectionViewLayout = flowLayout
}

参考文章

CollectionViewCells not displaying in middle on iPhone 13 Pro only

相关推荐
传奇开心果编程4 小时前
【Flutter踩坑排雷】第7课:巨型 build 函数坑|全部 UI 写在同一个 build,维护难、隐性异常
android·flutter·ios·移动开发·跨平台·dart·声明式ui
瓦瓦gogo9 小时前
第一次了解 iOS 开发:从 Swift、SwiftUI 到公共组件
ios·swiftui·swift
Liben12 小时前
Weex开发踩坑记录
android·前端·ios
season_zhu14 小时前
Skills For Real Engineers 系列之三:需求聊清楚了,怎么一步步走主流程,做到交付?
ios·ai编程
茶底世界之下15 小时前
窗边花瓶太暗?用 Awaking 看提亮室内的代价
ios
2501_9159090615 小时前
Windows 上用 VS Code 调试 iPhone 真机 App,KXBuild 断点、崩溃定位实操
ide·windows·vscode·ios·iphone·个人开发·敏捷流程
2501_916007471 天前
抓包工具功能对比,TraceEagle、Charles、Fiddler、Wireshark、mitmproxy 差别
前端·网络协议·ios·adb·https·fiddler·wireshark
2501_915106321 天前
Windows 上开发 Unity iOS,使用 KXBuild 进行真机调试、性能采样与打包 ipa
windows·vscode·unity·ios·个人开发·swift·敏捷流程
柚鸥ASO优化2 天前
iOS 27.2 更新后,App Store 广告展示逻辑出现新变化
ios
美狐美颜SDK开放平台2 天前
视频美颜SDK如何应对快速转头与大幅度面部动作?
android·人工智能·ios·音视频·直播美颜sdk·视频美颜sdk