本文原本发布在我的个人博客里，由于工作原因长久未更新维护，遂将其重新整理后转移至此。
给视图添加阴影效果可以使用 CALayer 对象的 shadowColor、shadowOffset、shadowRadius 和 shadowOpactiy 属性。它们指定了阴影的颜色，方位，模糊度和不透明度。不过这个阴影存在于 layer 外部，而我的需求则是创建一个具有内阴影的圆（如下图右侧的圆）。
shadows.png
实现圆形很简单，但这个内阴影让人有点头疼，因为 Core Animation 并没有为我们提供任何可行的 API 去直接设置 layer 的 inner shadow，所以只能自己实现相关操作。最开始的想法是建立一个长度为圆周长的 CAGradientLayer，设置它的渐变色（从 blackColor 到 clearColor），然后把它弯曲变形成一个圆。
不过这个方案太傻，把简单的问题复杂化了，除了涉及渐变还要考虑图形变形。那 Core Graphics 画图呢？我们是可以直接在 layer 上绘制图形的。于是上 stackoverflow 搜寻相关问题，庆幸的是，这个问题给了我解决方向。
由于 layer 只负责显示和动画，并不处理交互事件，而阴影只是单纯地作为装饰显示在视图中，那我们把 shadow 单独作为一个图层覆盖在需要 inner shadow 的视图上，这个 inner shadow 尺寸需要足够大，能够满足 offset 的正常需求（模拟光源位置不同产生的投影角度也不同），并且最重要的是它必须是中间镂空的。
那么动手实现它。子类化一个 CAShapeLayer，命名为WLInnerShadow，在WLInnerShadow的drawInContext方法中设置阴影路径。另外，我们还需要 4 个属性记录和监听阴影信息，比如阴影颜色，方位，不透明度和模糊度。
import UIKit
class WLInnerShadow: CAShapeLayer {
var innerShadowColor: CGColor? = UIColor.blackColor().CGColor {
didSet { setNeedsDisplay() }
}
var innerShadowOffset: CGSize = CGSizeMake(0, 0) {
didSet { setNeedsDisplay() }
}
var innerShadowRadius: CGFloat = 8 {
didSet { setNeedsDisplay() }
}
var innerShadowOpacity: Float = 1 {
didSet { setNeedsDisplay() }
}
override init() {
super.init()
initialize()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initialize()
}
func initialize() {
self.masksToBounds = true
self.shouldRasterize = true
self.contentsScale = UIScreen.mainScreen().scale
self.rasterizationScale = UIScreen.mainScreen().scale
setNeedsDisplay()
}
override func drawInContext(ctx: CGContext) {
// 设置 Context 属性
// 允许抗锯齿
CGContextSetAllowsAntialiasing(ctx, true);
// 允许平滑
CGContextSetShouldAntialias(ctx, true);
// 设置插值质量
CGContextSetInterpolationQuality(ctx, .High);
// 以下为核心代码
// 创建 color space
let colorspace = CGColorSpaceCreateDeviceRGB();
var rect = self.bounds
var radius = self.cornerRadius
// 去除边框的大小
if self.borderWidth != 0 {
rect = CGRectInset(rect, self.borderWidth, self.borderWidth);
radius -= self.borderWidth
radius = max(radius, 0)
}
// 创建 inner shadow 的镂空路径
let someInnerPath: CGPathRef = UIBezierPath(roundedRect: rect, cornerRadius: radius).CGPath
CGContextAddPath(ctx, someInnerPath)
CGContextClip(ctx)
// 创建阴影填充区域，并镂空中心
let shadowPath = CGPathCreateMutable()
let shadowRect = CGRectInset(rect, -rect.size.width, -rect.size.width)
CGPathAddRect(shadowPath, nil, shadowRect)
CGPathAddPath(shadowPath, nil, someInnerPath);
CGPathCloseSubpath(shadowPath)
// 获取填充颜色信息
let oldComponents: UnsafePointer<CGFloat> = CGColorGetComponents(innerShadowColor)
var newComponents:[CGFloat] = [0, 0, 0, 0]
let numberOfComponents: Int = CGColorGetNumberOfComponents(innerShadowColor);
switch (numberOfComponents){
case 2:
// 灰度
newComponents[0] = oldComponents[0]
newComponents[1] = oldComponents[0]
newComponents[2] = oldComponents[0]
newComponents[3] = oldComponents[1] * CGFloat(innerShadowOpacity)
case 4:
// RGBA
newComponents[0] = oldComponents[0]
newComponents[1] = oldComponents[1]
newComponents[2] = oldComponents[2]
newComponents[3] = oldComponents[3] * CGFloat(innerShadowOpacity)
default: break
}
// 根据颜色信息创建填充色
let innerShadowColorWithMultipliedAlpha = CGColorCreate(colorspace, newComponents)
// 填充阴影
CGContextSetFillColorWithColor(ctx, innerShadowColorWithMultipliedAlpha)
CGContextSetShadowWithColor(ctx, innerShadowOffset, innerShadowRadius, innerShadowColorWithMultipliedAlpha)
CGContextAddPath(ctx, shadowPath)
CGContextEOFillPath(ctx)
}
}
用法很简单：
let myView = UIView(frame: CGRectMake(0, 0, 280, 280))
myView.layer.backgroundColor = UIColor.hexColor(0xeeeeee, alpha: 1).CGColor
myView.center = self.view.center
myView.layer.cornerRadius = myView.bounds.size.width / 2
myView.layer.shouldRasterize = true
myView.layer.contentsScale = UIScreen.mainScreen().scale
myView.layer.rasterizationScale = UIScreen.mainScreen().scale
let shadowLayer = WLInnerShadow()
shadowLayer.frame = myView.bounds
shadowLayer.cornerRadius = myView.layer.cornerRadius
shadowLayer.innerShadowOffset = CGSizeMake(4, 4)
shadowLayer.innerShadowOpacity = 0.5
shadowLayer.innerShadowRadius = 16
myView.layer.addSublayer(shadowLayer)
self.view.addSubview(myView)
看看效果图：
AirPlay_Screenshot_2016-03-14_06-24-37.png
