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

时间:2017-01-03 23:19:31

标签: ios swift uicollectionview swift3

我有一个水平滚动的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中的检查器中)之后,我似乎无法弄清楚我需要设置什么以及我需要设置的位置它

这是我所需间距的示意图: enter image description here

3 个答案:

答案 0 :(得分:2)

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
  return CGSize(width: UIScreen.main.bounds.width - 40, height: yourCollectionViewHeight - 40)
}

左20 - 在{story Footer Size

的故事板中添加Header Sizewidth = 20

单元格之间的间距 - 在storyboard = 40

中添加Minimum Spacing

enter image description here

我本可以犯一些错误,你不会得到你的布局,但我希望你能得到这个想法。

答案 1 :(得分:0)

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
}

答案 2 :(得分:0)

  1. 如果您希望一次在屏幕上显示单个单元格,那么重要的是您应该启用 分页您的 CollectionView >。您可以按如下所示迅速进行操作:

    collectionView.isPagingEnabled = true

  2. 现在使ViewController类符合 UICollectionViewDelegateFlowLayout ,并实现其方法 sizeForItemAt indexPath ,该方法为您的collectionview单元格返回CGSize。例如:

    功能collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(宽度:200,高度:200) }