纵向和横向的 UICollectionView 单元格间距
Posted
技术标签:
【中文标题】纵向和横向的 UICollectionView 单元格间距【英文标题】：UICollectionView cell spacing for both portrait and landscape 【发布时间】：2019-05-13 05:36:16 【问题描述】：我的目标是使纵向和横向的单元格之间的间距相等。我可以为纵向而不是横向。我想通过拉伸图像的宽度和高度来缩小横向的差距。
我想要纵向视图每行 2 个单元格，横向视图每行 3 个单元格。
我的代码如下：
override func viewDidLoad()
super.viewDidLoad()
if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout
let itemsPerRow: CGFloat = 2
let padding: CGFloat = 5
let totalPadding = padding * (itemsPerRow - 1)
let individualPadding = totalPadding / itemsPerRow
let width = (collectionView?.frame.width)! / itemsPerRow - individualPadding
let height = width
flowLayout.itemSize = CGSize(width: width, height: height)
flowLayout.minimumInteritemSpacing = padding
flowLayout.minimumLineSpacing = padding
【问题讨论】：
***.com/questions/37152071/… 参考这可能对你有帮助 创建自定义 UICollectionviewFlowlayout 并在横向时更新项目大小。 【参考方案1】：试试这个：
override func viewDidLoad()
super.viewDidLoad()
collectionView.backgroundColor = .white
collectionView.alwaysBounceVertical = true
collectionView.contentInsetAdjustmentBehavior = .always
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return 5
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
cell.backgroundColor = .blue
return cell
var spacing: CGFloat = 8
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
return spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
return spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let safeFrame = view.safeAreaLayoutGuide.layoutFrame
let size = CGSize(width: safeFrame.width, height: safeFrame.height)
return setCollectionViewItemSize(size: size)
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator)
super.viewWillTransition(to: size, with: coordinator)
if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
layout.invalidateLayout()
func setCollectionViewItemSize(size: CGSize) -> CGSize
if UIApplication.shared.statusBarOrientation.isPortrait
let width = (size.width - 1 * spacing) / 2
return CGSize(width: width, height: width)
else
let width = (size.width - 2 * spacing) / 3
return CGSize(width: width, height: width)
结果是这样的：
【讨论】：
遵守UICollectionViewDelegateFlowLayout的提醒。希望这会有所帮助。【参考方案2】：
试试这个
确认UICollectionViewDelegateFlowLayout
例如
class yourViewController: UIViewController,UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let screeSize = UIScreen.main.bounds
let numOfCell:Int = 2 //Number of items you want
let spaceOfCell:CGFloat = (CGFloat((numOfCell + 1)*10)) //Space between Cells
let orientation = UIApplication.sharedApplication().statusBarOrientation
if(orientation == .LandscapeLeft || orientation == .LandscapeRight)
return CGSize(width: Int(screeSize.width - (spaceOfCell/2)) / (numOfCell + 1), height: Int(screeSize.width - spaceOfCell) / numOfCell+1)
else
return CGSize(width: Int(screeSize.width - (spaceOfCell)) / numOfCell, height: Int(screeSize.width - spaceOfCell) / numOfCell)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
return 10.00
//Verticle space between line
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
return 10.00 //Space Between Items You want
【讨论】：
我中间还有很大的垂直空间。 我希望横向排列 3 个单元格。 我已经编辑了我的旧答案，现在试试这个新的而不是旧的【参考方案3】：事不宜迟……
private var numberOfCellsPerRow: Int
return (UIApplication.shared.statusBarOrientation == .portrait) ? 2 : 3
private let spacing: CGFloat = 20
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return 24
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
return collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
override func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)
cell.backgroundColor = .orange
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
return .zero
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
return spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
return spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let availableWidth = collectionView.frame.width - CGFloat(numberOfCellsPerRow - 1) * spacing
let cellWidth = availableWidth / CGFloat(numberOfCellsPerRow)
return .init(width: cellWidth, height: cellWidth)
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator)
super.viewWillTransition(to: size, with: coordinator)
collectionView.collectionViewLayout.invalidateLayout()
【讨论】：
以上是关于纵向和横向的 UICollectionView 单元格间距的主要内容，如果未能解决你的问题，请参考以下文章
UICollectionView横向滚动，sectionHeader的问题