設定 button 顯示的圖片

iOS 15 新版做法

iOS 15 更容易客製的 UIButton — plain，gray，tinted & filled 四種樣式

利用 iOS 15 的 UIButton.Configuration 實現圖片維持比例的 button，圓形 button & 點選時變色

舊版做法

顯示圖片，當圖片的尺寸小於或等於 button 的框框時

比方以下的 button 顯示彼得潘的圖片，當圖片原本的尺寸小於 button 的框框時，圖片將維持原來的大小置中顯示。

圖片和文字並排

如果加上文字，圖片將排在文字的左邊，然後圖文一起置中。

若想調整 button 裡圖片和文字的位置，可參考以下連結的說明。

置入上下左右隱形空間的 inset

變形的圖片，當圖片的尺寸大於 button 的框框時

當原本的圖片尺寸大於 button 的框框時，它將直接變形縮放至 button 元件的尺寸。如下圖所示，原本身材黃金比例的彼得潘變形變胖了 !

讓圖片維持比例

想讓 button 的圖片維持比例其實是可以的，只是無法從 storyboard 設定，一定要寫程式，調整 button 的 imageView 的 contentMode。

方法 1

將 contentMode 設為 .scaleAspectFit，圖片將維持比例，左右或上下留白。

class ViewController: UIViewController {
   @IBOutlet weak var button: UIButton!

   override func viewDidLoad() {
      super.viewDidLoad()
      button.imageView?.contentMode = .scaleAspectFit
   }
}

方法 2

將 contentMode 設為 .scaleAspectFill，圖片將維持比例佔滿 button，超出的部分則被切除。

class ViewController: UIViewController {
   @IBOutlet weak var button: UIButton!

   override func viewDidLoad() {
      super.viewDidLoad()
      button.imageView?.contentMode = .scaleAspectFill
   }
}

方法 3

自訂 Button 類別，比方 ImageButton。當元件從 storyboard 或 xib 生成時，將執行 awakeFromNib，我們在裡面將圖片的 contentMode 設為 scaleAspectFit 或 scaleAspectFill。

class ImageButton: UIButton {
   
    override func awakeFromNib() {
        super.awakeFromNib()
        imageView?.contentMode = .scaleAspectFit
    }
}

ps: 如果透過 button 元件的 Background 欄位設定背景圖片，很遺憾的，我們將無法改變它，它只會傻傻地變形縮放成 button 的尺寸。