論優雅的實現描邊

最近使用了一下 IBAnimatable,這個庫對 IBInspectable 的使用真讓人嘆為觀止。突然意識到其實 IBInspectable 可以讓我們減少很多不必要的重復代碼。對一個 UIView 進行描邊是我們在開發過程中比較常用的,UI 設計師們希望通過描邊來增加界面的層次感。

常見的描邊實現

通過 UIView 實現描一條線

在剛開始做 iOS 開發時,我很喜歡使用這樣的方式。但后來發現這種實現用一下兩個缺點:

  1. 后期如果 UI 需要重新調整,會變得比較痛苦。
  2. 一般描邊都只需要1個像素的描邊,在使用 XibStoryBoard 的時候需要設置 0.5 這樣的值。XibStoryBoard 好像支持的不太好,經常會出現在 plus 上描邊的線看起來特別粗。

通過 CALayer 繪制描邊

這個方法實現描邊的效果很不錯。但還是有些缺點:

  1. 有些 UIView 其實在代碼中不需要體現,但因為需要描邊。我必須把它拖到代碼中。
  2. 代碼中到處出現,進行描邊的代碼,一定程度影響代碼的美觀和閱讀性(PS: 我有潔癖)。

對這些實現進行封裝的確是一個不錯的選擇。但我也許還有可能有更好的方案。

使用 IBInspectable

這里我只描述我的實現思路,不對 IBInspectable 進行介紹。畢竟 IBInspectable2014WWDC 的內容了(PS: 比我學習 iOS 還要早 = =),很多大神都有博客對其介紹。

思路如下:

  1. 可以使用 IBDesignable 將屬性定義到 IB 中,通過定義屬性,實現描邊。
  2. 我們可以統一在 layoutSubviews 中進行描邊處理。
  3. 我不希望為了實現描邊還去繼承一個類,所以我選擇對 UIView 通過 Category 實現描邊的功能。
  4. 我需要增加一下新的屬性來定義描邊,所以我需要使用 AssociatedObject 實現。對于 AssociatedObject 不了解的同學可以看南峰子的這篇博客 Objective-C Runtime 運行時之二:成員變量與屬性
  5. 由于我希望通過 Category 實現描邊,我還需要使用 Method Swizzling 實現。在每個 UIView 及其子類 在實現 layoutSubviews 去執行我的描邊代碼。不了解的同學可以看南峰子的這篇博客 Objective-C Runtime 運行時之四:Method Swizzling

最終實現效果

如圖,只需要在 IB 上配置上屬性,就可以實現描邊的功能。

這樣做還是有缺點的,IB 上的屬性有點多。。。

對于代碼感興趣的同學可以到https://github.com/bay2/IBViewExt,我在這里就不貼代碼了,代碼不多看 UIView+IB.m 文件就可以了。

IBInspectable 的局限

  1. BDesignableIBInspectable 無法在 Cocoa Touch Frameworks 中生效,詳細看這里,所以使用 Carthage 的時候,BDesignableIBInspectable 也無法正常工作, cocoapods 不會有次問題。
  2. BDesignable 無法再 categories/extensions 正常工作, stackoverflow 上也有提到這個問題
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,622評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,716評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,746評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,991評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,706評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,036評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,029評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,203評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,725評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,451評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,677評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,161評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,857評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,266評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,606評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,407評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,643評論 2 380

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • N0.141 7月11日 晴 臺風即將過境時,天空露出了水洗般迷人的藍。 抬頭看天,在葉子的縫隙間透著微藍,陽光...
    瑞和她的淺島繁花閱讀 401評論 0 1
  • 當礦山上的灰塵將我掩埋 當下坡的路把我的腸子顛出來 當我的腸子在烈日下暴曬 盤山公路一直繞到大海
    摩柯菠蘿閱讀 230評論 0 3
  • 王曉梅,改變思維最簡單的做法就是改變輸入。
    沙漏記得閱讀 205評論 0 0
  • 我怕黑。幾乎沒看過恐怖片兒,偶爾電影中有嚇人的場面,我都會堵上耳朵把頭窩起來。尤其不敢一個人在家里過夜,一丁點動靜...
    吾小桐閱讀 311評論 6 2