WWDC2020 Build with iOS pickers, menus and actions を見た感想

今日はWWDC2020 のBuild with iOS pickers, menus and actionsを見た感想を書きます。2つビデオセッションを紹介しますが、このビデオでiOS14 でどんな新しいUIが提供されたのかわかるようにまとめました。

Build with iOS pickers, menus and actions - WWDC 2020 - Videos - Apple Developer

こちらのビデオは実践編で、iOS14 でピッカーがどう変わったのかの概要のビデオは別にあります。

Design with iOS pickers, menus and actions - WWDC20 - Videos - Apple Developer

こちらが理論編です。

iOS 14 からピッカーコンポーネントが強力でエレガントなUI を標準提供するようになりました。今まではAppleのこのUIを使いたいと思っていてもAppleがAPIを提供していなかったので自作でライブラリを作るか外部のライブラリを使うしかありませんでした。

iOS 14 から新しいコンポーネントとして

UIColorPicker (正式名称はUIColorPickerViewControllerです)

 を使えるようになります。(*1)

ColorPicker でカラーピッカーが標準コンポーネントで提供されるのは非常に驚き。今まではXcode でしかColorPicker を見なかったけど、これがUIデザインで見れるようになったらペイント系アプリが作りやすくなる。Picker 自体はSwiftでライブラリがありそうだけど、これはさすがに面倒であるｗ。

UIMenu と UISlider と UIProgressView
これは既存でもあったコンポーネント。目新しいものはない。

UIActivityIndicatorView
インジケーターのコンポーネント。これは今までにも SVProgressHUD などライブラリが充実していた。

UIPickerView
UIPageControl
使い方は下のとおりです。新しいプロパティが追加されていることの紹介で挙げていた。

let pageControl = UIPageControl()
pageControl.numberOfPages = 5  // 全ページは5
pageControl.backgroundStyle = .prominent
pageControl.preferredIndicatorImage = UIImage(systemName: "bookmark.fill")
pageControl.setIndicatorImage(UIImage(systemName: "heart.fill"), forPage:0) // 0がアクティブのときの画像を指定

そして、iOS 14 で使えるようになったカラーピッカーコンポーネント UIColorPickerViewController
ViewController 扱いらしい。。。

UIColorPickerViewController
New view controller for picking colors
アクションシートみたいな感じで出てくるらしい

特徴
Eyedropper
Favorites (お気に入りのカラーを登録できる)
Hexadecimal specification (16進数で指定できる？)

各アプリの設定画面で背景色を変更できる機能を追加してきそう。

var color = UIColor.blue
var colorPicker UIColorPickerViewController()
func pickColor() {
 colorPikcer.supportsAlpha = true
 colorPicker.selectedColor = color
 self.present(colorPikcer, animated: true, completion: nil)
}
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPikcerViewController) {
 color = viewController.selectedColor
}
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
  // Do nothing
}

UIDatePicker
日付のUIコンポーネントがiOS 14で変更されるようです。見た目がApple標準のカレンダーに酷似しています。

let datePikcer = UIDatePicker()
datePicker.date = Date(timeIntervalSinceReferenceDate: timeInterval)
datePicker.preferredDatePickerStyle = .compact
datePikcer.calendar = Calendar(identifier: .japanese)
datePicker.datePickerMode = .date

日本のカレンダーを代表に出してくれるのなにげに嬉しい。
iPhone の新しいUIDatePicker は何気に格好いいですね。

UIMenu
気にしたほうがいいのですが、割とメニュー系はライブラリでもカバーしていたので特段インパクトがあるようには見えませんでした。そのため、詳細は頭に入りませんでした。

UIBarButtonItem
イニシャライザが地味に追加されたみたいです。

init(systemItem: primaryAction: menu:)
init(title: image: primaryAction: menu:)

self.toolbarItems = [
   UIBarButtonItem(systemItem: .save, primaryAction: saveAction, menu: saveMenu),
   .fixedSpace(width: 20.0),
   UIBarButtonItem(image: optionsImage, menu: optionsMenu),
   .flexibleSpace(),
   UIBarButtonItem(primaryAction: revertAction),
]

というふうにSwiftUI でいうところのSpacer() が入れられるようになりました。 -> もともとSpacerありました。(*2)

UIButton
新しいAPI(イニシャライザ)が追加されていました。

UISegmentedController
も新しいAPIが追加されていました。

以上でビデオのセッションは終了です。

ビデオの時間が理論+実践で合わせて30分ぐらいの超大作でしたのでメモを取るのが大変でした。iOS 14からUI周りが大きくパワーアップしているのが凄い分かります。特にiPad にインパクトを与える新機能が多いように感じられました。

今回の新しいコンポーネントだけで作れるアプリも閃きます。これだけ標準UIが提供されたらほとんどUIライブラリは使わなくてもアプリ開発を進められそうな気がしてます。

そんな感じで長文になりましたが初のWWDCの勉強記事を投稿してみました。

(補足)
*1 序盤に新しいUIコンポーネントにUIMenuとUIDatePickerとUITimerPickerの3つが追加されました。と書きましたが、もともとありましたので削除しました。
*2 SwiftUI でいうところのSpacer() が入れられるようになりました、と書きましたがSpacer() はもともとありました。