iOS 無(wú)卡頓同時(shí)使用圓角、陰影和邊框的實(shí)現(xiàn)
在 iOS 開發(fā)中,最怕看到設(shè)計(jì)稿里圓角、陰影和邊框同時(shí)出現(xiàn),這三兄弟簡(jiǎn)直就是性能殺手。
優(yōu)化的方法百度一下有很多,雖然方法不同但是原理都一樣。
分享一個(gè)我自己一直使用的方法:在一個(gè) View 里只應(yīng)用一種效果,然后通過(guò)組合的方式達(dá)到效果。
override init(frame: CGRect) {
super.init(frame: frame)
imageView = UIImageView(image: UIImage(named: "img"))
imageView.layer.cornerRadius = 14
imageView.layer.masksToBounds = true
backgroundView = imageView
shadowView = ShadowView()
shadowView.layer.cornerRadius = 20
shadowView.applyShadow(.black, CGSize(width: 0, height: 15), 0.2, 40)
insertSubview(shadowView, belowSubview: imageView)
contentView.layer.cornerRadius = 14
contentView.layer.borderWidth = 1
contentView.layer.borderColor = UIColor.orange.cgColor
contentView.layer.masksToBounds = true
}

層次結(jié)構(gòu):
- contentView: 描繪邊框,放在最上層。
- imageView: 顯示圓角,放在中間,用于背景圖。
- shadowView: 顯示陰影,放在最底層。代碼很簡(jiǎn)單,只是封裝了一下陰影參數(shù):
class ShadowView: UIView {
private var shadowColor: UIColor?
private var shadowOpacity: CGFloat = 1
private var shadowOffset: CGSize = CGSize(width: 0, height: 3)
private var shadowBlur: CGFloat = 6
override func layoutSubviews() {
super.layoutSubviews()
updateShadow()
}
func applyShadow(_ color: UIColor?, _ offset: CGSize, _ opacity: CGFloat, _ blur: CGFloat) {
shadowColor = color
shadowOffset = offset
shadowOpacity = opacity
shadowBlur = blur
updateShadow()
}
private func updateShadow() {
layer.shadowColor = shadowColor?.cgColor
layer.shadowOffset = shadowOffset
layer.shadowOpacity = Float(shadowOpacity)
layer.shadowRadius = shadowBlur * 0.5
layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: layer.cornerRadius).cgPath
}
}
分開單獨(dú)繪制速度很快,使用 UICollectionView 進(jìn)行滾動(dòng)測(cè)試,生成的 Cell 數(shù)量是 1 萬(wàn)個(gè)。
測(cè)試機(jī)器是 5s + iOS 12.4.4,快速滑動(dòng)無(wú)任何卡頓。
給一個(gè)測(cè)試 demo 大家體驗(yàn)一下:
Github: shadow_view_demo
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入解析iOS應(yīng)用開發(fā)中對(duì)設(shè)計(jì)模式中的橋接模式的使用
這篇文章主要介紹了iOS應(yīng)用開發(fā)中對(duì)設(shè)計(jì)模式中的橋接模式的使用,bridge橋接模式中主張把抽象部分與實(shí)現(xiàn)部分分離,需要的朋友可以參考下2016-03-03
iOS實(shí)現(xiàn)步驟進(jìn)度條功能實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)步驟進(jìn)度條功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
ios的collection控件的自定義布局實(shí)現(xiàn)與設(shè)計(jì)
這篇文章主要介紹了mac、iOS端支持自定義布局的collection控件的實(shí)現(xiàn)與設(shè)計(jì),需要的朋友學(xué)習(xí)參考下吧。2017-12-12
關(guān)于iOS 11不能定位問(wèn)題的解決方法
最近在開發(fā)中遇到一個(gè)問(wèn)題,后來(lái)發(fā)現(xiàn)是蘋果新增一個(gè)權(quán)限,自己可查,下面這篇文章主要給大家介紹了關(guān)于iOS 11不能定位問(wèn)題的解決方法,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
ios 11和iphone x的相關(guān)適配問(wèn)題及解決方法
這篇文章主要介紹了ios 11和iphone x的相關(guān)適配,文中給大家提到了在ios 11中,tableView會(huì)莫名偏移問(wèn)題的解決方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11
IOS開發(fā)之判斷兩個(gè)數(shù)組中數(shù)據(jù)是否相同實(shí)例詳解
這篇文章主要介紹了IOS開發(fā)之判斷兩個(gè)數(shù)組中數(shù)據(jù)是否相同實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
objc方法聲明和實(shí)現(xiàn)由于參數(shù)類型不一致所引發(fā)的崩潰
這篇文章主要為大家介紹了objc方法聲明和實(shí)現(xiàn)由于參數(shù)類型不一致所引發(fā)的崩潰詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03

