很多時候,我們都希望按鈕更符合 iOS 的設計風格,這樣會讓應用的界面看起來不那麼跳,就算設計的不好看,也不會顯的與系統格格不入。

“我不是設計師,我不知道怎麼設計好看——但盡可能貼近系統風格不是錯誤的選擇。 “ - 通過路由器

那麼對於 UI​​Button 來說,圓角+陰影應該是常態。

放一張圖片

顯然,這是最便宜的辦法——實際上也最昂貴。它需要你為每一個按鈕做一系列的圓角圖片,這樣雖然省去了用代碼實時渲染的苦處,卻需要你做大量的前期工作,比如默認情況下一個背景,高亮下又是一個背景……等等,還有不同的分辨率! (如果你做的是 universal 應用,那麼這個數量是要再翻倍的)。

另外一個缺點就是一點你用了自動佈局——而且按鈕又不是等比例縮放的時候,天都塌下來了。

所以說,這不是我的選擇。

用代碼實現

顯然,我們還是需要用代碼來做這件事情,然後把圓角交給 cpu 實時渲染。

常見版本

常見的圓角版本是這樣的:

這樣可以,但是你要知道,如果你給 button 添加了背景色,那 layer 就無能為力了。

—— layer 不對 subview 生效。

這時候,就要加上這句來讓圓角生效:

我們只要把多出的角切掉就好了。——接下來就麻煩了,你會發現添加的陰影是無效的,比如:

——因為我們把多出來的東西都切掉了!

有一種說法是在 iOS 7 以後不需要 layer.masksToBounds = true 也能圓角,但在特定的環境下還是有些不同,有時候需要,有時候就不需要,我自己用的時候 iOS 9 也還是需要這句才能顯示圓角的——但在 storyboard 裡直接設置運行時參數就不需要。

而且,如果你一個頁面 button 很多的話(30個以上),那麼由於 layer.masksToBounds = true 導致的離屏渲染會大大拖慢系統的運行速度,體現在系統動畫丟幀上。

層的的backgroundColor

其實 layer 自身也有個背景色,我們完全可以用它來做 button 的背景色,那麼這樣的話就可以同時實現圓角和陰影了!

這樣,陰影就不會被切掉了。

最後,我們還需要給 layer 光柵化,這樣才能讓 cpu 渲染的時候緩存已經渲染好的內容以便復用。這樣一來,就能大大提升系統動畫的運行效率,不再丟幀了。

——當然,如果你 button 本身數量就比較少,那大可不必理會。

 

由...出版 R0uter

如非聲明,本人所著文章均為原創手打,轉載請註明本頁面鏈接和我的名字。

發表評論

您的電子郵件地址不會被公開. 必填字段標 *