Swift 3 - 带有填充的 UICollectionView 中心单元

Posted

技术标签:

【中文标题】Swift 3 - 带有填充的 UICollectionView 中心单元【英文标题】:Swift 3 - UICollectionView Center Cell with Padding 【发布时间】:2017-01-03 23:19:30 【问题描述】:

我有一个水平滚动的 UICollectionView,我希望一次在屏幕上显示一个单元格。

我通过以下方法以编程方式设置单元格的宽度和高度:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath) as! Cell

    let width = collectionView.bounds.size.width - 40
    let height = collectionView.bounds.size.height - 40

    cell.bounds.size = CGSize(width: CGFloat(width), height: CGFloat(height))

    return cell

在努力弄清楚如何使用插入、间距、部分插入(以编程方式和在 XCode 中的检查器中)之后,我似乎无法弄清楚我需要设置什么以及需要在哪里设置它。

这是我想要的间距图:

【问题讨论】:

【参考方案1】:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize 
  return CGSize(width: UIScreen.main.bounds.width - 40, height: yourCollectionViewHeight - 40)

left 20 - 在情节提要中添加 Footer SizeHeader Sizewidth = 20

单元格之间的间距 - 在情节提要中添加 Minimum Spacing = 40

我可能会犯一些错误,您不会完全了解您的布局,但我希望您能理解。

【讨论】:

【参考方案2】:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    return CGSize(width: collectionView.frame.width * 0.7, height: 300)


func collectionView(_ collectionView: UICollectionView, layoucollectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets 
    let margin = collectionView.frame.width * 0.3
    return UIEdgeInsets(top: 10, left: margin / 2, bottom: 10, right: margin / 2)


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat 
    return 0


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat 
   return collectionView.frame.width * 0.3 / 2

【讨论】:

【参考方案3】:
    如果您希望一次在屏幕上显示单个单元格,那么重要的是您应该为您的 CollectionView启用 分页。您可以按以下方式快速完成:
collectionView.isPagingEnabled = true
    现在使您的 ViewController 类符合 UICollectionViewDelegateFlowLayout 并实现它的方法 sizeForItemAt indexPath,该方法为您的 collectionview 单元格返回 CGSize。例如:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize     
    return CGSize(width: 200, height: 200)

【讨论】:

以上是关于Swift 3 - 带有填充的 UICollectionView 中心单元的主要内容,如果未能解决你的问题,请参考以下文章

swift 带有Swift 4 ios应用程序填充的圆形视图

TableView reloadData() 不显示所有数据,即使带有值的数组已填充(swift)

Swift 3 - 自定义 UIButton 半径删除约束?

如何在 Swift 的 UIScrollView 中的视图之间添加填充? [关闭]

带有Swift的多个自定义单元格的UITableview

使用字典数据填充 UITableView (Swift)