[專題開發]UIStackView 內的 UIButton Image 沒有正確顯示?!

資策會 APP Developer 行動開發工程師養成班

▍UIButton Image 無法正確顯示在 iPhone 上

在實作錄音以及變聲功能的時候，在 UIStackView 內添加 UIButton，並透過 Storyboard 設定 button image，遇到問題如下：

在 Mac 模擬器執行的時候，ViewController 上的畫面、功能都能順利執行
此時，安裝到 iPhone 執行的時候，卻發生白屏的狀況，但仍然可以點選 Button，並播放出聲音 XD

關鍵原因：UIButton iOS 14, 15 支援的功能設定不同

▍Storyboard test 1

設定細節：

1. Button Type- System
2. Button Style- Plain

實測結果：在模擬器 iOS 15 可以順利執行， iPhone iOS 14 無畫面，仍可以點擊按鈕、播放出變聲後的聲音

原因：誤選 iOS 15 UIButton Style — Plain, Gray, Tinted, Filled

Button 設定：System + Plain

▍Storyboard test 2

設定細節：

1. Button Type- System
2. Button Style- Default

實測結果：

1. 蝸牛圖示：選 Custom, Default 就可以順利顯示在 iPhone iOS 14 上！
2. 其他圖案：選 System, Default 都無法顯示

Button Type 選擇 system，實機執行的時候無法正確顯示圖片

▍Storyboard test 3

設定細節：

1. Button Type- Custom
2. Button Style- Default

實測結果：在 iPhone iOS 14 執行，全部按鈕的圖片均正常顯示

Button Type 選擇 custom，實機就可以順利顯示所有圖片！

恭喜 Debug 成功！

繼續跟 UIButton 的詳細設定變得更熟 ~