不同 iDevices 的自适应布局 UICollectionViewCell 大小

Posted

技术标签:

【中文标题】不同 iDevices 的自适应布局 UICollectionViewCell 大小【英文标题】:Adaptive Layout UICollectionViewCell Size for Different iDevices 【发布时间】:2015-02-11 06:25:08 【问题描述】:

我正在为不同的 iDevices 屏幕尺寸使用自适应布局,我在纵向显示两个单元格时遇到了问题。我设计了一个 130 x 210 的单元格,它在 iPhone 5 上看起来很完美,但是在 iPhone 6 中我们有更多的 30 px,为此我计算剩余空间并平均设置空间,但这看起来很难看

当我继续使用 iPhone 6+ 时,它看起来更奇怪,在 iPad 上会有更多数量的单元格,建议我一种处理这种情况的方法,或者我应该每次计算项目的大小和数量屏幕可以包含相应空间的项目。这就是我现在的计算方式

int space = self.view.frame.size.width;
space = space - 130 *2;
space = space/3;
UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc] init];
flow.minimumInteritemSpacing = space;
flow.minimumLineSpacing = space;
flow.scrollDirection = UICollectionViewScrollDirectionVertical;
flow.sectionInset = UIEdgeInsetsMake(space, space, space, space);
flow.itemSize = CGSizeMake(130, 210);
[self.collectionViewGames setCollectionViewLayout:flow];

【问题讨论】:

我认为最好在所有设备的单元格之间保持几乎恒定的空间,并且可以根据设备更改项目大小。 @sateesh 是的,它是一个更改单元格宽度的选项,可以说将空间固定为 20 像素,然后设置宽度。但是作为它的自适应布局,在 iPad 上它会因为那么宽的宽度而变得非常糟糕,虽然可以对 iPad 进行特殊检查,但是一些适当的解决方案! 【参考方案1】:

我在实现类似于照片应用的应用时遇到了同样的问题。我在这里所做的是我将间距的大小固定为一个恒定值。并根据剩余空间计算项目大小。

这是我案例中的代码

 var flowLayout = // your flow layout


        var itemWidth = self.view.frame.size.width / (5) // i am using 5 cells in a row
    flowLayout.itemSize = CGSizeMake(itemWidth - 2, itemWidth - 2)
    flowLayout.scrollDirection = UICollectionViewScrollDirection.Vertical
    flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 0 , bottom: 0, right: 0)
    flowLayout.minimumInteritemSpacing = 2
    flowLayout.minimumLineSpacing = 2

【讨论】:

这正是我的另一个解决方案,如果我找不到其他可能的解决方案,我将添加一个 iPad 的检查

以上是关于不同 iDevices 的自适应布局 UICollectionViewCell 大小的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 中的自适应布局(移动/桌面) - 首选方式是啥(内部示例)

利用@media screen实现网页布局的自适应

利用@media screen实现网页布局的自适应

响应式布局

页面的自适应方法总结

如何处理跨平台的自适应问题