IOS Swift 卡片效果图像被剪裁

Question

以下是我创建 CardView 并添加阴影效果的代码

 override func awakeFromNib() {
    super.awakeFromNib()
    self.layoutIfNeeded()
    cellBgview.layer.cornerRadius = 15.0
    cellBgview.layer.borderWidth = 1.0
    cellBgview.layer.borderColor = UIColor.clear.cgColor
    cellBgview.layer.shadowColor = UIColor.gray.cgColor
    cellBgview.layer.shadowRadius = 14.0
    cellBgview.layer.shadowOpacity = 0.5
    cellBgview.layer.shadowPath = UIBezierPath(roundedRect: cellBgview.bounds, cornerRadius: cellBgview.layer.cornerRadius).cgPath
    // In
}

看起来像这样

在这种情况下角半径不起作用我添加了以下代码

cellBgview.clipsToBounds = true

添加上面的代码后，它看起来像这样

注意添加后 cellBgview.clipsToBounds = 真卡高程和阴影丢失但角半径出现

如何在没有图像获取剪辑的情况下制作带有圆角半径和阴影的卡片视图。

也试过

cellBgview.layer.masksToBounds = true

但它不起作用。

Answer 1

在您的单元格中添加另一个 UIView，并在 UIView 中添加 imageView...将 corner radius 应用于 imageView。将阴影应用于持有 imageView 的 UIView。将 clipsToBounds 添加到 imageView 而不是 UIView 因为 clipsToBounds 剪辑边界外的任何东西也可以是阴影。将解决您的问题

Answer 2

在您的单元格中添加一个 uiview，我们称之为内容视图。在此视图中添加另一个 uiview，您将在其中添加图像视图和底部标签。所以实际的层次结构看起来像这样

--Cell
  ---UIView //add shadow on this view, also make its backgroundColor to clear color
       ---UIView //add corner radius to this view and clipsToBounds = true for this view
             ---UIImageView
             ---Bottom Labels / Another UIView / Stack View

此层次结构将帮助您仅在顶部实现图像圆角并在底部内容上查看圆角

Answer 3

试试这个在一个视图中实现阴影、圆角半径、边框。

cellBgview.backgroundColor = UIColor.white
let cellBgViewLayer = cellBgview.layer()
cellBgViewLayer?.masksToBounds = false
cellBgViewLayer?.shadowColor = UIColor.lightGray.cgColor
cellBgViewLayer?.shadowOpacity = 1.0
cellBgViewLayer?.shadowRadius = 6.0
cellBgViewLayer?.shadowOffset = CGSize(width: 0, height: 0)
cellBgViewLayer?.shouldRasterize = true
cellBgViewLayer?.cornerRadius = 5.0
cellBgViewLayer?.borderColor = UIColor.lightGray.cgColor
cellBgViewLayer?.borderWidth = 1.0
cellBgViewLayer?.shadowPath = UIBezierPath(rect: cellBgview.bounds).cgPath

IOS Swift 卡片效果图像被剪裁

IOS Swift card effect image is getting clipped

ios

swift

uitableview

cornerradius