本文原本發(fā)布在我的個(gè)人博客里，由于工作原因長久未更新維護(hù)，遂將其重新整理后轉(zhuǎn)移至此。

給視圖添加陰影效果可以使用 CALayer 對象的 shadowColor、shadowOffset、shadowRadius 和 shadowOpactiy 屬性。它們指定了陰影的顏色，方位，模糊度和不透明度。不過這個(gè)陰影存在于 layer 外部，而我的需求則是創(chuàng)建一個(gè)具有內(nèi)陰影的圓（如下圖右側(cè)的圓）。

shadows.png

實(shí)現(xiàn)圓形很簡單，但這個(gè)內(nèi)陰影讓人有點(diǎn)頭疼，因?yàn)?Core Animation 并沒有為我們提供任何可行的 API 去直接設(shè)置 layer 的 inner shadow，所以只能自己實(shí)現(xiàn)相關(guān)操作。最開始的想法是建立一個(gè)長度為圓周長的 CAGradientLayer，設(shè)置它的漸變色（從 blackColor 到 clearColor），然后把它彎曲變形成一個(gè)圓。

不過這個(gè)方案太傻，把簡單的問題復(fù)雜化了，除了涉及漸變還要考慮圖形變形。那 Core Graphics 畫圖呢？我們是可以直接在 layer 上繪制圖形的。于是上 stackoverflow 搜尋相關(guān)問題，慶幸的是，這個(gè)問題給了我解決方向。

由于 layer 只負(fù)責(zé)顯示和動(dòng)畫，并不處理交互事件，而陰影只是單純地作為裝飾顯示在視圖中，那我們把 shadow 單獨(dú)作為一個(gè)圖層覆蓋在需要 inner shadow 的視圖上，這個(gè) inner shadow 尺寸需要足夠大，能夠滿足 offset 的正常需求（模擬光源位置不同產(chǎn)生的投影角度也不同），并且最重要的是它必須是中間鏤空的。

那么動(dòng)手實(shí)現(xiàn)它。子類化一個(gè) CAShapeLayer，命名為WLInnerShadow，在WLInnerShadow的drawInContext方法中設(shè)置陰影路徑。另外，我們還需要 4 個(gè)屬性記錄和監(jiān)聽陰影信息，比如陰影顏色，方位，不透明度和模糊度。

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) {
        // 設(shè)置 Context 屬性
        // 允許抗鋸齒
        CGContextSetAllowsAntialiasing(ctx, true);
        // 允許平滑
        CGContextSetShouldAntialias(ctx, true);
        // 設(shè)置插值質(zhì)量
        CGContextSetInterpolationQuality(ctx, .High);
        
        // 以下為核心代碼
        
        // 創(chuàng)建 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)
        }
        
        // 創(chuàng)建 inner shadow 的鏤空路徑
        let someInnerPath: CGPathRef = UIBezierPath(roundedRect: rect, cornerRadius: radius).CGPath
        CGContextAddPath(ctx, someInnerPath)
        CGContextClip(ctx)
        
        // 創(chuàng)建陰影填充區(qū)域，并鏤空中心
        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
        }
        
        // 根據(jù)顏色信息創(chuàng)建填充色
        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