iOS 顯示 X 圖示的 close button

從 iOS 13 開始，iOS SDK 內建 close button，方便我們快速做出顯示 X 圖示的 button。而且在 iOS 15 搭配多種 Style，我們可以輕易地調整它的背景顏色跟圓角弧度。

接下來我們分別說明 iOS 15 & iOS 15 之前的 close button。

iOS 15 的 close button

• Type 選擇 Close，Style 選擇 Plain

產生無背景的 close button。

ps: 從程式產生 close button 的方法如下。

UIButton(type: .close)

• 從 Tint 設定顏色

• Style 選擇 Gray，Tinted & Filled

產生有圓角背景的 button。

• 調整圓角弧度

Corner Style 選擇 Capsule。當 button 的大小為正方形時，button 的背景將變成圓形。

Background 選擇 Custom，從 Corner Radius 可自訂圓角弧度。

• 搭配文字的 close button

iOS 15 之前的 close button

Type 選擇 Close，Style 選擇 Default，產生有圓角的 close button。當 button 的大小為正方形時，button 的背景將變成圓形。

參考連結

Buttons - Controls - iOS - Human Interface Guidelines - Apple Developer