UIButton 處理 Selected 和 Unselected 改變背景圖片的最好方式

如果想要達到同以下在點擊模擬器畫面正中央的按鈕時，切換其背景圖片，那我們該怎麼做呢？

原理很簡單，只要在按下按鈕的同時，判斷按鈕當下的狀態後，依其狀態來變更背景圖片即可。(有關於按鈕的狀態可參考 Apple 官方說明文字)。回到主題，如果我們要達到同模疑器上的按鈕效果，只要依循以下步驟即可。

1. 準備兩張背景圖片，選取/未選取的圖片各一張。
2. 設定按鈕的 outlet 和 action。
3. 撰寫在不同狀態時所要顯示的背景圖片的邏輯。
4. 撰寫點擊按鈕的邏輯。

在開始前，先來說說一般比較常想到的邏輯來撰寫，但這個做法不是不對，而是有更好的寫法，一般我們會這樣寫。

第 6 行 => 設定 1 個 flag 來表示當前按鈕的狀態。

第 7~8 行 => 當點選按鈕時，將 flag 設定為 false，並將背景圖改變為選取時的背景圖。

以上寫法並不是不好，而是有更好的寫法😀

準備兩張背景圖片，選取/未選取的圖片各一張

▼在 Assets.xcassets 放入兩張圖片(選取/未選取)

設定按鈕的 outlet 和 action

撰寫在不同狀態時所要顯示的背景圖片的邏輯

▼在 viewDidLoad 撰寫邏輯

第 6 行 => 設定按鈕預設的圖片，UIControl.State 設為 normal。

第 7 行 => 設定按鈕選取的圖片，UIControl.State 設為 selected。

撰寫點擊按鈕的邏輯

▼在按鈕的 action 下撰寫邏輯

第 6 行 => 點擊按鈕所偵測到的狀態(selected)。

第 7 行 => 真正改變按鈕背景圖的程式碼，此邏輯即會呼應在 viewDidload 所設定的狀態。

第 13 行 => 更精簡的寫法。

如果您喜歡我的文章，請多按幾下「拍手」給我鼓勵，或是按「follow」讓我持續提供好文章給您。