o13/???? WWDC | 不一樣的按鈕
本文整理自 WWDC 21 《Meet the UIKit button system》,以后寫按鈕可以更輕松了
按鈕,在我們的應用程序中是最常見不過了,大的小的、有圖像的沒圖像的、有背景的沒背景的、紅的藍的綠的,基本上承載了用戶交互的大部分工作。
而 iOS 15 的 UIKit 又為我們帶來更多按鈕樣式。以下是新的 UIKit 提供的四種基本樣式,

除了樣式外,新的 UIKit 為我們帶來更強大的按鈕,像支持動態(tài)類型、內置多行文本支持。有了這些新功能,我們可以更靈活地定制按鈕,讓按鈕更加炫目。
接下來,讓我們一起看看如何使用新的按鈕。
UIButtonConfiguration
一切得從 UIButtonConfiguration 開始。我們先來看看 UIButtonConfiguration 的文檔
You can configure and update a button with a UIButtonConfiguration. A button configuration contains all the customization options available with other methods, such as setTitle:forState:, and can serve as a replacement for those methods. Alternatively, you can use a configuration in combination with these other methods and adopt new button behaviors and appearance without rewriting your customized UIButton code.
也就是說,我們可以使用這個類來配置按鈕的行為和外觀,而無需重新自定義一個 UIButton 來實現(xiàn)我們想要的效果。
這個類使用起來也很簡單,幾行代碼就可以搞定。下面是一個最簡單的例子,設置按鈕的 configuration 屬性,就可以看到 Sign In 按鈕的變化。


我們也可以單獨定義 UIButtonConfiguration 實例,并設置一些諸如文本、圖片等屬性值,再使用這個實例來創(chuàng)建按鈕,如下面的 Add to Card 按鈕


另外,我們還可以設置按鈕的 configurationUpdateHandler,讓按鈕在狀態(tài)發(fā)生改變時自動去執(zhí)行一些操作

不過,我們需要在某個節(jié)點調用按鈕的 setNeedsUpdateConfiguration 方法

如果需要在按鈕中顯示菊花,只需要設置 showsActivityIndicator 為 true 即可,也可以自己更改加載器的圖片

要調整按鈕布局也很方便,只需要修改一些屬性值即可

我們還可以配置許多其它屬性,像 baseBackgroundColor、baseForegroundColor、cornerStyle 和 buttonSize 等等。

Toggle 按鈕
切換按鈕(UISwitch)非常適合做開關。而很多場景下的按鈕,也有類似 UISwitch 的需求,像日歷頂部 UIBarButtonItems,這個是啟用和禁用日期詳細信息的按鈕,它也可以有一個 selected 屬性。

為了讓一個按鈕變成切換按鈕,只需要設置按鈕的 changesSelectionAsPrimaryAction 值為 true。

很簡單吧。
Pop-up 按鈕
如果我們需要更多選項,則可以使用彈出按鈕。彈出按鈕更像是下拉按鈕的延伸,不過它能確保選擇一個且僅選擇一個菜單元素。創(chuàng)建起來也很方便,類似于以后效果

實現(xiàn)上只需要給按鈕分配一個菜單,設置按鈕的 showsMenuAsPrimaryAction 為 true,讓按鈕成為一個菜單按鈕,然后再設置 changesSelectionAsPrimaryAction 為 true 即可

Mac Catalyst
新按鈕最牛的一點是可以自適應 Mac,包括下拉、彈出和切換按鈕,例如以下效果是 iOS 上的

而在 Mac Catalyst 的顯示效果如下

不需要做任何修改,即可無縫切換。
UIMenu
UIMenu 與 UIButton 和 UIBarButtonItem 能很好地搭配在一起,可以進行很多很棒的交互。菜單在新系統(tǒng)中也得到了改進,允許在菜單中創(chuàng)建層次結構,而按鈕的功能也從這些改進中獲益。

例如以下代碼,topMenu 中有一個子菜單 sortMenu,這個子菜單只允許選中一個元素

小結
以上就是如何在應用中更好地使用新版的按鈕,通過配置 UIButtonConfiguration,可以解鎖更豐富的按鈕樣式,我們不再需要去自己實現(xiàn) UIButton 子類,就可以做很多事情了。
? oo?/???? WWDC | 初識 Xcode Cloud
? oo?/???? WWDC | 性能優(yōu)化終極生存指南
? o1o/???? WWDC | 8 分鐘優(yōu)化你的 App Store 產(chǎn)品頁
? o11/???? WWDC | App Clips 新特性
就差您點一下了 ??????
