如何让我的单元格像 App Store 中一样圆润

Posted 2023-02-26

【中文标题】如何让我的单元格像 App Store 中一样圆润

【英文标题】：How can I make my cells rounded like in the App Store

【发布时间】：2019-07-03 22:19:15

【问题描述】：

我制作了 CollectionViewCells，我想要像 App Store 单元格一样的圆角。我为背景设置了不同的颜色以更好地查看它。也尝试对图像视图做同样的事情

在下面的代码中，我尝试将角变圆，但没有改变。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    // setup the cell and cast it to the custom cell created.
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.elementNameLabel.text = elemementName[indexPath.row]
    cell.elementDescriptionLabel.text = elementDescription[indexPath.row]
    cell.elementImage.image = elementImage[indexPath.row]

    // Create the shadows and modify the cards
    cell.contentView.layer.cornerRadius = 10.0
    cell.contentView.layer.borderWidth = 1.0
    cell.contentView.layer.borderColor = UIColor.clear.cgColor
    cell.contentView.layer.masksToBounds = false
    cell.layer.shadowColor = UIColor.gray.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 1.0)
    cell.layer.shadowRadius = 4.0
    cell.layer.shadowOpacity = 1.0
    cell.layer.masksToBounds = false
    cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds, cornerRadius: cell.contentView.layer.cornerRadius).cgPath

    return cell

【问题讨论】：

cell.layer.cornerRadius = 10

【参考方案1】：

一旦您在 cell.layer 上设置了cornerRadius（如您所愿），您只需将 maskToBounds 设置为 true，因为这就是告诉它遵守现在圆角的原因。 （也不需要在contentView上设置隐形边框）

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    // setup the cell and cast it to the custom cell created.
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    cell.elementNameLabel.text = elemementName[indexPath.row]
    cell.elementDescriptionLabel.text = elementDescription[indexPath.row]
    cell.elementImage.image = elementImage[indexPath.row]

    // Create the shadows and modify the cards
    cell.layer.shadowColor = UIColor.gray.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 1.0)
    cell.layer.shadowRadius = 4.0
    cell.layer.shadowOpacity = 1.0
    cell.layer.masksToBounds = true
    cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds, cornerRadius: cell.contentView.layer.cornerRadius).cgPath

    return cell

【参考方案2】：

您可以在单元格上添加一个圆形视图，然后在该视图上放置其他内容。