本文原本發(fā)布在我的個(gè)人博客里进萄,由于工作原因長久未更新維護(hù),遂將其重新整理后轉(zhuǎn)移至此。
給視圖添加陰影效果可以使用 CALayer 對象的 shadowColor
、shadowOffset
嘶伟、shadowRadius
和 shadowOpactiy
屬性怎憋。它們指定了陰影的顏色又碌,方位,模糊度和不透明度绊袋。不過這個(gè)陰影存在于 layer 外部毕匀,而我的需求則是創(chuàng)建一個(gè)具有內(nèi)陰影的圓(如下圖右側(cè)的圓)。
實(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)
看看效果圖: