如何居中对齐 UICollectionView 的单元格?

2023-12-04

我目前正在使用UICollectionView对于用户界面网格,它工作得很好。但是,我想启用水平滚动。网格支持每页 8 个项目,当项目总数为 4 时,这就是启用水平滚动方向的情况下项目的排列方式:

0 0 x x
0 0 x x

这里 0 -> 收藏品 和 x -> 空单元格

有没有办法让它们居中对齐,例如:

x 0 0 x
x 0 0 x

这样内容看起来更干净?

另外下面的安排也可能是我期待的解决方案。

0 0 0 0
x x x x

对于那些寻找中心对齐解决方案的人来说,动态宽度collectionview 单元格,就像我一样,我最终修改了 Angel 的答案左对齐版本创建一个中心对齐的子类UICollectionViewFlowLayout.

中心对齐CollectionViewFlowLayout

// NOTE: Doesn't work for horizontal layout!
class CenterAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let superAttributes = super.layoutAttributesForElements(in: rect) else { return nil }
        // Copy each item to prevent "UICollectionViewFlowLayout has cached frame mismatch" warning
        guard let attributes = NSArray(array: superAttributes, copyItems: true) as? [UICollectionViewLayoutAttributes] else { return nil }
        
        // Constants
        let leftPadding: CGFloat = 8
        let interItemSpacing = minimumInteritemSpacing
        
        // Tracking values
        var leftMargin: CGFloat = leftPadding // Modified to determine origin.x for each item
        var maxY: CGFloat = -1.0 // Modified to determine origin.y for each item
        var rowSizes: [[CGFloat]] = [] // Tracks the starting and ending x-values for the first and last item in the row
        var currentRow: Int = 0 // Tracks the current row
        attributes.forEach { layoutAttribute in
            
            // Each layoutAttribute represents its own item
            if layoutAttribute.frame.origin.y >= maxY {
                
                // This layoutAttribute represents the left-most item in the row
                leftMargin = leftPadding
                
                // Register its origin.x in rowSizes for use later
                if rowSizes.count == 0 {
                    // Add to first row
                    rowSizes = [[leftMargin, 0]]
                } else {
                    // Append a new row
                    rowSizes.append([leftMargin, 0])
                    currentRow += 1
                }
            }
            
            layoutAttribute.frame.origin.x = leftMargin
            
            leftMargin += layoutAttribute.frame.width + interItemSpacing
            maxY = max(layoutAttribute.frame.maxY, maxY)
            
            // Add right-most x value for last item in the row
            rowSizes[currentRow][1] = leftMargin - interItemSpacing
        }
        
        // At this point, all cells are left aligned
        // Reset tracking values and add extra left padding to center align entire row
        leftMargin = leftPadding
        maxY = -1.0
        currentRow = 0
        attributes.forEach { layoutAttribute in
            
            // Each layoutAttribute is its own item
            if layoutAttribute.frame.origin.y >= maxY {
                
                // This layoutAttribute represents the left-most item in the row
                leftMargin = leftPadding
                
                // Need to bump it up by an appended margin
                let rowWidth = rowSizes[currentRow][1] - rowSizes[currentRow][0] // last.x - first.x
                let appendedMargin = (collectionView!.frame.width - leftPadding  - rowWidth - leftPadding) / 2
                leftMargin += appendedMargin
                
                currentRow += 1
            }
            
            layoutAttribute.frame.origin.x = leftMargin
            
            leftMargin += layoutAttribute.frame.width + interItemSpacing
            maxY = max(layoutAttribute.frame.maxY, maxY)
        }
        
        return attributes
    }
}

CenterAlignedCollectionViewFlowLayout

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何居中对齐 UICollectionView 的单元格? 的相关文章

随机推荐

  • 如何将一种热编码的结果加入到数据帧中?

    我想在人口普查数据集中执行 one hot 编码 https archive ics uci edu ml datasets census venue 我想要执行的列位于国家 地区列中 因此我做了以下操作 import pandas as
  • 我怎样才能让 ruby​​-debug-ide 工作?

    我无法让我的 ruby debug ide 正常工作 我有一个基本的 Rails 应用程序 我想在 RubyMine 中进行调试 在启动 RubyMine 之前 我需要在我的 vagrant VM 中启用 rdebug ide 当我导航到我
  • 需要一种好方法让用户选择“收件人”来发送电子邮件

    我有一个网站 用户可以从中发送电子邮件 我有一种模仿基本形式 To
  • 客户端从哪里获取尚未添加到注册表的远程类的定义?

    我已经成功地创建了一个 RMI 应用程序 该应用程序非常成功地完成了我需要它完成的任务 但是我在了解客户端获取远程对象定义的位置时遇到了一些麻烦 例如 我有一个向 rmiregistry 注册自身的服务器 允许客户端调用其上的方法 Unic
  • 到达字符串中的特定单词

    嗨 我有一个像这样的字符串 word1 to word2 tab word3 tab word4 tab word5 tab word6 我需要从字符串中提取第三个单词 我想逐个字符地阅读并在阅读第二个选项卡后获取单词 但我想这效率很低 您
  • 浮动元素在包含块之外?

    我是 HTML CSS 的初学者 只是一些关于浮动元素的问题 下面是代码 section border 1px solid blue div margin 5px width 200px height 50px left float lef
  • Firebase 静态加密

    我真的很喜欢使用 Firebase 我想在新应用程序中使用它 但该应用程序会让用户上传敏感信息 我知道 Firebase 使用 https 但环顾四周 Firebase 似乎尚未提供静态加密 有没有办法解决这个问题 例如使用 Firebas
  • 转储 x86 CPU 的 TLB 缓冲区内容

    是否可以从 TLB 翻译后备缓冲区 这是 CPU 中的特殊缓存 获取翻译列表 从虚拟页到物理页 我的意思是现代 x86 或 x86 64 我想以编程方式完成此操作 而不是使用 JTAG 并将所有 TLB 条目移出 Linux内核没有这样的转
  • 收到警报 此评论尚未发布到 Facebook。发表评论

    我正在使用 Facebook 评论插件 当我尝试写评论时 它总是给我以下消息 该评论尚未发布到 Facebook 发表评论 我怎样才能删除它 您的链接网址已列入黑名单 Facebook 要求向用户证明其墙上的帖子
  • 如何使用SQL查询Microsoft Office Access中的元数据?像 SQL Server sys.tables、sys.columns 等

    我对 Access 完全陌生 但对 SQL Server 很熟悉 我想知道是否可以使用 SQL 查询 Microsoft Office Access 中的元数据 就像 SQL Server 的 sys tables sys columns
  • 从xsd获取html表单

    我有一个相当复杂的 xsd 文件 它描述了一些对象 这并不重要 但它是 DATEX II 标准 您知道是否有一种自动方法来创建 html 表单 就像 向导 一样指导用户创建 xsd 中描述的 xml 对象 这个问题的答案取决于目标用户群 您
  • QuartusII 14.1.0 Debian Linux 崩溃

    我无法在 64 位计算机上将 Quartus 14 1 0 与 Linux Debian wheezy 和 Jessie 一起使用 如果我在控制台上启动它 我会收到以下消息 user fpgaformation opt altera 14
  • 在同一个应用程序中从右到左和从左到右语言?

    据我了解 苹果不允许应用程序商店上有两个不同语言的相同应用程序 但是如果一种语言是从左到右 另一种语言是从右到左怎么办 这意味着不同的菜单 不同的项目定位 不同的用户界面等 甚至连 Segue 也不同 显然我不能为此使用常规本地化 有没有解
  • FindWindow 查找窗口Ex

    我编写了一个程序 用于在另一个程序中查找一个框并将焦点设置到它 完成此操作后 它将发送密钥并保存到此框中 I am using Findwindow and FindwindowEx to locate the box but I have
  • 无法获取存储锁定文件上的锁定

    我正在构建一个带有嵌入式 Neo4j 和 Spring Data 的项目 并且我遇到文件锁定问题 我收到异常 Caused by org neo4j kernel StoreLockException Unable to obtain lo
  • Spring boot在配置类中注入EntityManagerFactory

    我正在使用 Spring Boot 我想将 Spring 与 Hibernate 集成 我想制作一个会话工厂 bean 供进一步使用 但我无法自动装配 EntityManagerFactory 我无法仅在配置类中自动装配它 在其他类中它可以
  • 如何使用 MySQL 查询查找文本字段中的第一个数字?

    我喜欢只返回存储在数据库表列中的文本的第一个数字 用户已将页面范围放入 p 2 5 或 第 2 至 5 页 或 2 5 等字段中 我对这里的 2 感兴趣 我尝试过了 SELECT SUBSTR the field LOCATE 2 the
  • 获取未定义索引:REQUEST_URI - 在 Laravel 中运行 Artisan 命令时

    每次我尝试在 Laravel 上运行 artisan 命令时 我都会收到以下错误 我位于项目目录中 例如 我运行这个命令 php artisan make migration create stats table 我收到此错误 ErrorE
  • 从 C# 调用 Excel 宏时出错

    我正在尝试使用以下命令从 Excel 文件调用宏C 4 5 我的Excel版本是2010 当我尝试调用宏时 出现以下错误 Cannot run the macro MacroName The macro may not be availab
  • 如何居中对齐 UICollectionView 的单元格?

    我目前正在使用UICollectionView对于用户界面网格 它工作得很好 但是 我想启用水平滚动 网格支持每页 8 个项目 当项目总数为 4 时 这就是启用水平滚动方向的情况下项目的排列方式 0 0 x x 0 0 x x 这里 0 g