iOS 14で変わるピッカーと、新しく登場したカラーピッカー

WWDC 2020の[Design with iOS pickers, menus and actions](https://developer.apple.com/videos/play/wwdc2020/10052/)を見たのでメモです。

※ここに出てくるスクリーンショットは、全て上記の動画のものです。

# 概要

iPhoneやiPadのアプリでiOS 14から使えるようになった3つのコンポーネントについての紹介。
![スクリーンショット 2020-06-25 7.52.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/0a451510-2bd9-c245-2b95-931d020082b8.png)

# Menu

## iOS 13まで

iPhoneはアクションシート、iPadの場合はポップオーバーを使ってメニューを表示していた。最近はiPhoneの画面が大きくなったりiPadの画面が高密度になってきたので、次のような欠点が見えてくるようになってきた。

* 背景が暗くなり、重苦しさがあった
* アクション名が短くても、シートは大きくなってしまう
* アクション内容が制限されている
* ボタンの位置とアクションシートの位置が離れることがあるので指の移動量が多くなることがある

## iOS 14 ~

どのボタンからもメニューを表示できるようになった。
![スクリーンショット 2020-06-25 7.58.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/8c80e701-0765-552c-23ef-19bf81e7135b.png)
ボタンをタップしたらすぐそばにメニューが表示される。複数行にも対応してるし、選択やナビゲーションの用途にも使える。
![スクリーンショット 2020-06-25 8.05.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/04963345-7d8d-5892-da63-f8455de4b73c.png)
表示はコンテキストメニューとよく似ている。各アクションの左側にラベルがあり、右側にはアイコンがついている。アイコンはSF Symbolかカスタム画像を入れることができる。タイトルを追加することも、セパレータを追加することもできる。
![スクリーンショット 2020-06-25 8.10.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/3580e164-7473-3b53-e572-fc22948e4bf2.png)

## 項目の選択とキャンセル

普通にタップして選択することもできるし、メニューが仕込まれたボタンをタップ、そのまま指を離さず、出てきたメニューの選択したい項目まで指をスライド、指を離してもボタンが選択されたことになる（動画の2:50-3:00くらいを見るといい）。メニューを消すにはメニュー外をタップすれば良い。そのため、キャンセルボタンを用意する必要はない。

## 特徴

新しいメニューには次のような特徴がある。

### 曖昧さを解消できる

メニューは選択の曖昧さを解消するのに役立つ。例えば写真アプリでは「＋」という追加ボタンがある。これをタップすると具体的に何を追加したいかを尋ねるメニューが出現する。
![スクリーンショット 2020-06-25 8.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/c8feb000-456a-d549-bdd5-7d99322b3f32.png)
![スクリーンショット 2020-06-25 8.24.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/90a264be-9f48-9aa2-7e9d-e99d92967112.png)

### ナビゲーションにもなる

メニューはナビゲーションにも使える。例えばSafariでは戻るボタンを長押しするとそのセッションで以前訪れたサイトのリストが表示される。
![スクリーンショット 2020-06-25 8.28.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/f6f277cb-835d-2e0b-4556-f06255845b63.png)

### 選択ができる

「もっと見る」ボタンもアクションメニューを表示させるうってつけの例。Fileアプリを例に取ると、iOS 13だとアクションがバラバラに配置されていたが、iOS 14だと一つにまとめられる。とはいえ、何でもかんでも「もっと見る」の中に隠すのは推奨してない。メインアクションとサブアクションをしっかり切り分けて考えて配置する必要がある。
![スクリーンショット 2020-06-25 8.34.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/88d70b44-a475-7c24-996b-c89d4ed1e1ac.png)

### セカンダリオプションが表示できる

Safariの場合、普通に右上のボタンをタップするとこうなるが…
![スクリーンショット 2020-06-25 8.39.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/5c318eff-a4e0-7a7f-002d-e7a1273b4c93.png)
長押しすると関連メニューが出てくるようになっている。
![スクリーンショット 2020-06-25 8.40.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/5239763e-9d12-e9c4-ab24-1dc79621cd1e.png)

## 破壊的なアクションの扱い

リマインダーアプリで削除を行う場合の例。破壊的なアクションは慎重に確認させるべきものなので、削除の確認アクションはメニューとは別の場所にあるべき。
![スクリーンショット 2020-06-25 8.43.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/3ef1d747-cc9c-37a4-b7df-e03dd4ca0954.png)
![スクリーンショット 2020-06-25 8.45.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/77457e37-ba57-2841-cf23-c157f746fb43.png)
これは新メニュー内に限らず、他の破壊的なアクションボタンの場合でも同様。
![スクリーンショット 2020-06-25 8.48.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/9214e657-5a24-62bf-b951-9e5bc51fc00c.png)

# 日付ピッカー

iOS 13までの日付、時間ピッカーはこのようなデザインだった。複数のホイールを動かさなければならなかった。
![スクリーンショット 2020-06-25 8.53.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/90bfb233-c84c-3800-0e56-20dfb8bd93f7.png)
iOS 14からはこのようなデザインになる。
![スクリーンショット 2020-06-25 8.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/47c64932-e854-1480-337b-56d50bc1ae90.png)
左右にスライドさせるだけで簡単に月を移動できる。年月の部分をタップするとホイールで選択することもできる。
![スクリーンショット 2020-06-25 8.56.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/3017fc5f-ad45-e76c-ab16-50f12bfae1fc.png)
時間は自分で入力することになる。
![スクリーンショット 2020-06-25 8.58.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/f8d1fd2b-3bc7-ce42-e0f2-01efad1b56af.png)
リマインダーの例のようにピッカーをインラインで表示できれば効果的だが、必ずしもそうできない場合もある。その場合はコンパクトモードを使う。UIKitに日付ピッカーをリクエストするとこのようなボタンが表示される。
![スクリーンショット 2020-06-25 14.13.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/1185acaf-fb4b-8bee-06dd-65cf9b4c5630.png)
ボタンをタップすると日付ピッカーが表示される。ピッカーの外側をタップすると決定になる。
![スクリーンショット 2020-06-25 14.13.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/dd1744c6-9b2f-5874-880a-03aa5e01725f.png)

# カラーピッカー

iOS 14では新しくカラーピッカーが導入されている。グリッド、スペクトル、RGBから色を選ぶことができる。
![スクリーンショット 2020-06-25 14.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/b95674f0-c435-d5e7-8a20-21bc59e329b7.png)
左上のピペットを使えば拡大鏡が出てくるので、例えば写真から色を選ぶこともできる。
![スクリーンショット 2020-06-25 14.26.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/42b1167f-dbcf-a48b-5ffe-213d71eaf01d.png)
また、どのアプリからでもアクセスできるパレットに色を保存することもできる。
![スクリーンショット 2020-06-25 14.28.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100736/6d2a3d83-44ad-cf74-b79d-6714e77aa055.png)