1. 程式人生 > >巧用陰影實現模糊字型的UILabel

巧用陰影實現模糊字型的UILabel

最近,PM提出了一個新的需求,就是要把一個句子中的某些單詞給模糊掉,實現提示使用者的效果。要求如下圖所示:

需求圖片

我一下子能夠想到的辦法,就是利用UIVisualEffectView進行模糊,或者使用圖片進行替換。
首先說使用圖片的方式,也就是把要模糊的單詞做成圖片,然後使用NSAttributedString進行顯示,乍一看好像可行,實際做的時候發現,由於圖片的大小是固定的,在不同解析度的iPhone上,顯示效果並不一樣,在IPhone Plus系列中不能夠正確的進行顯示,而且每個單詞都需要生成一次圖片,工作量很大,所以該方案不可取;
再說使用UIVisualEffectView的方式,這種方式的主要問題在於查詢要遮蔽單詞的座標;由於Apple沒有提供對應的介面,我們就必須把UILabel

的繪製也給接管才能夠實現這種方案,實現起來比較複雜;不建議使用該方案,當然如果不趕時間的話,也是可以這麼做的。
由於上面兩種方法都不太好,所以就只能繼續尋找其他實現發的方式。
後來想到了利用陰影的方式來進行顯示,因為我們知道,字型的陰影本身就是模糊的,如果我們把字型本身隱藏,只顯示陰影的話,就會看到模糊的內容,也就是我們的需求。具體程式碼如下:

//生成正則表示式,查詢要模糊的關鍵字
let regex = try NSRegularExpression(pattern: "\(keyword)")
regex.enumerateMatches(in: text, options: NSRegularExpression.MatchingOptions.reportCompletion, range: NSMakeRange(0, text.count)) { checkingResult, flags, pointer in
    if let range = checkingResult?.range {
        // 設定文字陰影,實現模糊字型的顯示
        let shadow = NSShadow()
        shadow.shadowBlurRadius = 3
        shadow.shadowOffset = CGSize(width: 0, height: 0)
        shadow.shadowColor = ColorUtils.blackColor.withAlphaComponent(0.8)
        
        // 設定字型顏色和背景相同,隱藏文字本身
        attrResult.addAttributes([
            NSAttributedStringKey.backgroundColor: ColorUtils.whiteColor, 
            NSAttributedStringKey.foregroundColor: ColorUtils.whiteColor, 
            NSAttributedStringKey.shadow: shadow], 
                range: range)
    }
}             

這個樣子就利用陰影實現了文字內容的模糊,而不需要使用複雜的實現的。