相对于帧宽度和宽高比的动态UICollectionViewCell宽度 [英] Dynamic UICollectionViewCell width with respect to frame width and aspect ratio
问题描述
这是来自 UICollectionViewCell 4.4和5.5英寸的动态调整大小
虽然该解决方案非常棒,但我想生成一个动态数量的项目基于设备的宽度,宽高比以及我必须显示的总项目数量,UIVIewController内的单元格(kCellsPerRow)。我不知道如何计算kCellsPerRow的正确数量,以便一旦达到宽高比限制,它们就不会调整大小。
While that solution is great, I'd like to generate a dynamic amount of item cells (kCellsPerRow) within the UIVIewController based on the device's width, aspect ratio, and amount of total items I have to display. I just can't figure out how to calculate the right amount of kCellsPerRow so that they are not too resized once they hit an aspect ratio limit.
这是我所拥有的far:
Here's what I have so far:
var kCellsPerRow = ceil(global.TotalAmount) //Total Amount of Cells
var windowWidth = layout.collectionView!.frame.width // Device's Window Width
var dynamicWidth = windowWidth / CGFloat(kCellsPerRow) // Current Width of Each Cell
var dynamicHeight = windowWidth / CGFloat(kCellsPerRow) // Current Height of Each Cell
var limit = (Double(dynamicWidth) / Double(windowWidth))*(9/2) < (2/9) // Constraint/Threshold
if ( limit ) {
var newkCellsPerRow = CGFloat(kCellsPerRow * (2/9)) // Attempt
newkCellsPerRow = 9 // Fixed Size of 9 but what if we can dynamically figure out the perfect number such that its not so tiny!
dynamicWidth = layout.collectionView!.frame.width / newkCellsPerRow
dynamicHeight = layout.collectionView!.frame.width / newkCellsPerRow
}
// Create Cell
layout.itemSize = CGSize(width: dynamicWidth, height: dynamicHeight)
推荐答案
您需要指定的是单元格应该是最小的尺寸。细胞至少与该大小一样宽(高),并且可能更大。
All you need to specify is the smallest size a cell should be. Cells will be at least as wide (and high) as that size, and possibly larger.
方法:
这是一个方法,将根据其collectionView的宽度来计算适当的单元格大小:
Here's a method which will calculate the appropriate cell size based on the width of its collectionView:
// These variables are set in the Storyboard, but shown here for clarity
flowLayout.minimumInteritemSpacing = 10
flowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
let minimumSize: CGFloat = 90.0 // A cell's width or height won't ever be smaller than this
func cellWidthForViewWidth(viewWidth: CGFloat) -> CGFloat {
// Determine the largest number of cells that could possibly fit in a row, based on the cell's minimum size
var numberOfCellsPerRow = Int(viewWidth / minimumSize)
// Adjust for interitem spacing and section insets
let availableWidth = viewWidth - flowLayout.sectionInset.left - flowLayout.sectionInset.right - flowLayout.minimumInteritemSpacing * CGFloat(numberOfCellsPerRow - 1)
numberOfCellsPerRow = Int(availableWidth / minimumSize)
return availableWidth / CGFloat(numberOfCellsPerRow) // Make this an integral width if desired
}
处理非1:1宽高比
如果您的宽高比与1不同:1,您可以通过将计算出的宽度除以纵横比来简单地确定动态高度。
If your aspect ratio happened to be different from 1:1, you would simply determine the dynamic height by dividing the calculated width by the aspect ratio.
let aspectRatio: CGFloat = 3.0/2.0
let cellWidth = cellWidthForViewWidth(CGRectGetWidth(collectionView.frame))
let cellHeight = cellWidth / aspectRatio
设置项目尺寸:
由于您的宽高比为1:1,我们只需要计算单元格的宽度,然后将该值用于宽度和高度
Since your aspect ratio is 1:1, we only need to calculate the width for a cell, then use that value for both width and height.
根据计算的动态大小设置实际项目大小:
Set the actual item size based on the calculated dynamic size:
let actualCellSize = cellWidthForViewWidth(CGRectGetWidth(collectionView.frame))
flowLayout.itemSize = CGSize(width: actualCellSize, height: actualCellSize)
示例结果
这将让您了解单元格的大小,基于在各种容器宽度上:
This will give you an idea what size a cell would be, based on various container widths:
print(cellWidthForViewWidth(320.0)) // 93, 3 cells per row
print(cellWidthForViewWidth(400.0)) // 116, 3 cells per row
print(cellWidthForViewWidth(640.0)) // 93, 6 cells per row
print(cellWidthForViewWidth(800.0)) // 101, 7 cells per row
print(cellWidthForViewWidth(1024.0)) // 90, 10 cells per row
这篇关于相对于帧宽度和宽高比的动态UICollectionViewCell宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!