【问题标题】:How to display CollectionViewCell in center in swift 4如何在 swift 4 中在中心显示 CollectionViewCell
【发布时间】:2019-07-07 09:32:40
【问题描述】:

Collectionview 单元格在一行中有两个项目,但 Collectionview 单元格不在我的设计中居中。

如何以中心对齐方式显示 collectionViewCell?我想像下面这样显示

我试了很多次,无法显示CollectionView的中心。请帮帮我!

【问题讨论】:

  • 尝试减少黑白细胞的细胞间距

标签: ios uicollectionview swift4 uicollectionviewcell uicollectionviewlayout


【解决方案1】:

进行以下更改:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    let numberOfItemsPerRow: CGFloat = 2.0
    let minimumCellSpacing: CGFloat = 10.0
    let totalSpacing = (numberOfItemsPerRow + 1)*minimumCellSpacing //left + right + in-between padding
    let width = (collectionView.frame.width - totalSpacing)/numberOfItemsPerRow
    return CGSize(width: width, height: width) 

}

一旦完成。

在主线程中重新加载您的集合视图,但会有一点延迟:

DispatchQueue.main.asyncAfter(deadline: .now() + 0.10) {
   self.myCollectionView.reloadData()
}

【讨论】:

  • 这个答案在与现有答案的比较中没有添加任何新内容。在某些情况下,延迟使用 reloadData 可能会有所帮助,但通常这意味着您做错了什么,也与此特定问题无关。
  • 你试过了吗?如果没有,请尝试一下,然后告诉我。
  • 没有asyncAfter 的原始答案对我有用
  • 嗯.. 在某些情况下它不起作用,除非我们使用“asyncAfter”。
【解决方案2】:

工作代码 Swift 4 |斯威夫特 5

你需要像这样使用UICollectionViewDelegateFlowLayout方法

class CardListViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    
    // UICollectionViewDelegateFlowLayout Delegate method

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        let leftAndRightPaddings: CGFloat = 45.0
        let numberOfItemsPerRow: CGFloat = 2.0
    
        let width = (collectionView.frame.width-leftAndRightPaddings)/numberOfItemsPerRow
        return CGSize(width: width, height: width) // You can change width and height here as pr your requirement
    
    }
}

输出:

【讨论】:

  • 在我的测试中,当 sizeForItemAt 委托方法运行时,collectionView.frame.width 给出的宽度不是实际的运行时宽度,但仍然是在设计时采用的宽度,来自 I 界面Buider。因此,它仅在您在 IB 中使用的同一设备上测试时才有效。当您在具有不同屏幕尺寸的不同设备上运行它时,事情就会停止工作。你注意到了吗?
  • @Nikunj Kumbhani 如果我想更改单元格之间的垂直间距该怎么办?
  • @pgokul 您可以从情节提要中设置单元格间距
  • 是的。但问题是,我以编程方式创建了集合视图单元。所以我不能改变故事板上的任何东西。但我确实找到了解决方案,我们可以更改minimumLineSpacingForSectionAtIndex 以获得适当的行间距。
  • @pgokul 您也可以通过编程方式进行设置
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-07-12
  • 1970-01-01
  • 1970-01-01
  • 2021-10-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多