如何使 UICollectionViewCells 具有圆角和阴影? [英] How to make UICollectionViewCells have rounded corners and drop shadows?

问题描述

我看过类似问题的其他答案，但没有一个解决方案对我有用，即使进行了一些调整.

I've seen some other answers to similar questions, but none of the solutions have worked for me, even with some tweaking.

正如标题所暗示的，我希望我的 UICollectionViewCell 具有圆角和阴影(或除顶部之外的所有侧面的阴影).到目前为止我所做的是向我的 UICollectionViewCell - mainView 添加两个视图，它显示单元格的必要内容并具有圆角，以及 shadowView，有阴影.两个视图都不是另一个视图的子视图，它们一起存在于同一个单元格中.它们都是完全相同的尺寸，并且mainView明显显示在shadowView之上.这是我当前的代码实现:

As the title suggests, I would like my UICollectionViewCells to have rounded corners and drop shadows (or shadows on all sides except the top). What I have done so far is to add two views to my UICollectionViewCell - mainView, which displays the cell's necessary content and has rounded corners, and shadowView, which has the shadow. Neither view is a subview of the other, they exist together in the same cell. They are both the exact same dimensions, and mainView is obviously displayed on top of shadowView. Here is my current code implementation:

let mainView = cell.viewWithTag(1003) as! UIView       
mainView.layer.cornerRadius = 10.0
mainView.layer.borderWidth = 1.0
mainView.layer.borderColor = UIColor.clear.cgColor
mainView.layer.masksToBounds = true

let shadowView = cell.viewWithTag(1002) as! UIView
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOffset = CGSize(width: 0, height: 2.0)
shadowView.layer.shadowRadius = 2.0
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.masksToBounds = false
shadowView.layer.shadowPath = UIBezierPath(roundedRect: shadowView.bounds, cornerRadius: mainView.layer.cornerRadius).cgPath

这是这段代码产生的结果:有人会认为mainView的角不够圆，阴影不够大.

Here is what this code produces: One would think that mainView's corners aren't rounded enough, and that the shadow isn't big enough.

然而，在移除shadowView并将UICollectionView的背景设置为黑色后，您可以看到mainView的角落实际上相当四舍五入:

However, upon removing shadowView and setting the UICollectionView's background to black, you can see that mainView's corners are actually quite rounded:

所以这意味着问题出在 shadowView 的阴影大小上.但是，我尝试增加阴影偏移和阴影半径，但没有任何效果.大多数更改要么在 mainView 周围产生了很厚的阴影，要么进一步减少了 mainView 的四舍五入，要么什么也没做.

So this implies that the issue is with shadowView's shadow size. However, I have tried increasing the shadow offsets and the the shadow radius, which did nothing. Most changes either produced a very thick shadow around mainView, decreased mainView's rounding even more, or did nothing.

这是故事板中相关 UITableViewCell 的视图层次结构的图像:

Here is an image of the relevant UITableViewCell's view hierarchy in the Storyboard:

推荐答案

这是Cell代码:

class CollectionViewCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)


        layer.shadowColor = UIColor.lightGray.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 2.0)
        layer.shadowRadius = 5.0
        layer.shadowOpacity = 1.0
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath
        layer.backgroundColor = UIColor.clear.cgColor

        contentView.layer.masksToBounds = true
        layer.cornerRadius = 10
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

这是使用代码:

import UIKit

private let reuseIdentifier = "Cell"

class CollectionViewController: UICollectionViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.collectionView!.register(CollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
        (self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout).itemSize = CGSize(width: 100, height: 100)
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
        cell.backgroundColor = .white
        return cell
    }
}

结果如下:

这篇关于如何使 UICollectionViewCells 具有圆角和阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！