Xcode 不寫一行代碼實現拉伸圖片功能

在項目開發中，咱們常常會遇到控件 icon 尺寸和實際控件尺寸不符的狀況。好比咱們從設計那拿到的是 64 x 64 的 icon 圖，以下圖。

原始圖片

但咱們要實現的效果是水平拉伸版的效果：

效果圖

一般，咱們會用下面的代碼來實現上述效果：

let edgeInsets = UIEdgeInsets(top: 16.0, left: 16.0, bottom: 16.0, right: 16.0)
let backgroundButtonImage = UIImage(named:"corner_rectangle")?.resizableImage(withCapInsets: edgeInsets)
stretchButton.setBackgroundImage(backgroundButtonImage, for: .normal)
複製代碼

但，如今咱們多了一個選擇。就是使用 Xcode 的 Show Slicing 去實現該效果，而不用寫一行代碼。

咱們經過下圖的步驟使用該功能。

使用步驟

點擊 Show Slicing 以後，咱們會看到下面的頁面：

Start Slicing

點擊 Start Slicing按鈕後，咱們會看到下面的頁面:

切割方向選擇頁面

由於咱們須要水平和垂直方向的拉伸，因此咱們選擇中間的按鈕：

切割視圖

經過上圖咱們能夠發現，Xcode 自動爲咱們畫出了不準改變的四個圓角部分，這樣就不須要咱們在手動的調整圓角的部分了。剩下的，就是咱們按需調整白色遮罩部分了。

咱們也能夠在 Show the attributes inspector 選項最底部，來設置具體的數值：

Slicing 設置數值頁面

好了，到這裏這篇文章就告一段落了，但願之後你們在實現圖片拉伸的時候可使用 Xcode 來實現，這樣既節約時間，又能夠保持代碼簡潔。

Have a good weekend 😏!

參考

• WWDC
• 4-xcode-asset-catalog-secrets-you-need-to-know