为圆角添加阴影

为圆角添加阴影

可参考：UIView with rounded corners and drop shadow?中例子

通常在对layer做圆角的时候，会设置

layer.cornerRadius = 50

如果还需要对内容进行裁剪，还要设置

layer.masksToBounds = true

但此时如果再对layer设置阴影，如下：

layer.shadowOffset = CGSize(width: 4, height: 4)
layer.shadowOpacity = 0.3
layer.shadowRadius = 5.0

会发现阴影没有显示，原因是设置masksToBounds后，阴影被裁剪掉了

那如何对有圆角的layer设置阴影呢？

可以这样做，再添加一个layer来做阴影，此时就相当于有2个layer了，一个用来显示内容（如图片等），一个用来做阴影

如下的例子：

• sampleImageView - 用来显示图片
• imageLayer - 用来做圆角和阴影

class SamplesTableViewCell: UITableViewCell {
  @IBOutlet weak var sampleImageView: UIImageView!
  
  let imageLayer = CALayer()
  var sampleImage: UIImage?
  
  override func awakeFromNib() {
    super.awakeFromNib()
    sampleImageView.layer.addSublayer(imageLayer)
  }
  
  override func layoutSubviews() {
    super.layoutSubviews()
    let layer = sampleImageView.layer
    //圆角 border shadow
    layer.cornerRadius = 50
    //layer.masksToBounds = true
    //layer.borderColor = UIColor.gray.cgColor
    //layer.borderWidth = 2
    layer.shadowOffset = CGSize(width: 4, height: 4)
    layer.shadowOpacity = 0.3
    layer.shadowRadius = 5.0
    
    imageLayer.frame = layer.bounds
    imageLayer.contents = sampleImage?.cgImage
    imageLayer.cornerRadius = 50
    imageLayer.masksToBounds = true
  }
  
}

显示的效果如下：

maskedCorners

iOS11对圆角功能进行了改善，layer新增了maskedCorners属性：

@available(iOS 11.0, *)
open var maskedCorners: CACornerMask

CACornerMask是一个结构体类型：

typedef NS_OPTIONS (NSUInteger, CACornerMask)
{
  kCALayerMinXMinYCorner = 1U << 0,
  kCALayerMaxXMinYCorner = 1U << 1,
  kCALayerMinXMaxYCorner = 1U << 2,
  kCALayerMaxXMaxYCorner = 1U << 3,
};

用于定义哪个角显示圆角，对应关系如下：

上面的例子，添加如下的代码：

imageLayer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

显示效果：

参考文章：

• 利用 iOS 11 的 maskedCorners 設定圓角
• Masked And Animated Corners