IOS Swift 卡片效果图被剪裁了

Posted 2023-02-24

【中文标题】IOS Swift 卡片效果图被剪裁了

【英文标题】：IOS Swift card effect image is getting clipped

【发布时间】：2020-01-16 08:46:56

【问题描述】：

以下是我创建 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 = true 后卡片高程和阴影缺失但拐角半径出现

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

也试过了

cellBgview.layer.masksToBounds = true

但它不起作用。

【问题讨论】：

你试过加MaskToBounds = true吗？

是的，但没有工作

试用建议的解决方案

【参考方案1】：

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

【参考方案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

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

【讨论】：

这就是我的回答，先生......如果有人在您发布我的请求之前已经有相同的答案，您需要鼓励:(

【参考方案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