Build with iOS pickers, menus and actions

ハイライト

iOS 14 では、UIKit のページコントロール、カラーピッカー、日付ピッカー、メニュー、UIAction に新しいシステムレベルの動作が導入され、開発者は既製のコントロールを使用して色の選択、コンパクトな日付入力、非同期メニュー、および統合イベントコールバックを処理できるようになります。

主要内容

このセッションは、非常に一般的なインターフェイスの問題を解決します。アプリには小さなインタラクションが多数あり、開発者自身がそれに取り組むことがよくあります。ページングインジケーターは多くのページをサポートする必要があり、色の選択はスポイトとお気に入りの色をサポートする必要があり、日付入力はフォームに挿入する必要があり、一連のコンテキストアクションをボタンの横にハングする必要があります。これらの機能を自分で実行する場合、インタラクションの詳細、アクセシビリティ、ポインタ入力、および Catalyst の外観を見逃しがちです。 (00:24)

Apple は、これらのインタラクションを iOS 14 の UIKit コントロールに組み込みました。 UIPageControl 固定幅内の無制限のページとカスタムインジケーター画像をサポートします。 UIColorPickerViewController カラーグリッド、スペクトル、RGB、16 進数、コレクションカラー、スポイトを担当します。 UIDatePicker コンパクトなインラインスタイルが追加され、フォームと大きな画面の両方で同じ API セットを使用できます。 (03:20)

後半ではメニューとアクションに焦点が当てられます。 iOS14でできること UIMenu 直接取り付けられる UIButton そして UIBarButtonItemを長押しまたはタッチすると開きます。 UIDeferredMenuElement メニュー項目を非同期的に生成できます。 updateVisibleMenu 表示されているメニューを更新できます。 UIAction ボタン、バーボタン項目、およびセグメント化されたコントロールのイベント処理をコントロールが作成される場所に配置し、散在するターゲットアクションコードを削減します。 (11:15)

これらの機能は iPad および Mac Catalyst にも役立ちます。講演の中で何度も言及されたのは、最適化された Catalyst アプリでは標準コントロールが macOS に近い外観を採用するということです。日付ピッカーのコンパクトなスタイルは、ポインター入力にも適しています。開発者が作成するカスタムコントロールの量が減り、アプリはシステムプラットフォームの違いに容易に対応できるようになります。 (01:38)

詳細

ページコントロールは、固定スペースでより多くのページをホストできます

(04:34) 新しい外観 UIPageControl コントロールが固定サイズ内の任意の数のページをサポートできるようにします。スペースが不十分な場合、ユーザーはページポイント間をスクラブしたりスクロールしたりできます。また、ブックマークページやコレクションページなどの特別な意味を持つページに適した、インジケーターの画像と背景スタイルのカスタマイズも追加されます。

let pageControl = UIPageControl()
pageControl.numberOfPages = 5

pageControl.backgroundStyle = .prominent

pageControl.preferredIndicatorImage =
    UIImage(systemName: "bookmark.fill")

pageControl.setIndicatorImage(
    UIImage(systemName: "heart.fill"), forPage: 0)

キーポイント:

numberOfPages は引き続き元の API を使用しており、移行コストは低くなっています。
backgroundStyle = .prominent 背景領域を継続的に表示できるため、ページコントロールをメインコントロールとして使用するインターフェイスに適しています。
preferredIndicatorImage すべてのページのデフォルト画像を設定します。
setIndicatorImage(_:forPage:) 特定のページに別のアイコンを設定できます。スピーチでは、0 ページにハートの形を使用して収集を示します。

カラーピッカーは完全な色選択プロセスを担当します

(06:56) UIColorPickerViewController シートまたはポップオーバーとして表示できるビューコントローラーです。ユーザーは、グリッド、スペクトル、RGB、16 進値から色を選択したり、頻繁に使用する色を保存したりできます。 iPadOS のスポイトは画面上のどこからでも色を選択でき、Mac Catalyst では標準の macOS カラーパネルが使用されます。

var color = UIColor.blue
var colorPicker = UIColorPickerViewController()

func pickColor() {
    colorPicker.supportsAlpha = true
    colorPicker.selectedColor = color
    self.present(colorPicker,
        animated: true,
      completion: nil)
}

func colorPickerViewControllerDidSelectColor(_
  viewController: UIColorPickerViewController) {
    color = viewController.selectedColor
}

func colorPickerViewControllerDidFinish(_
  viewController: UIColorPickerViewController) {
    // Do nothing
}

キーポイント:

supportsAlpha 透明性を許可するかどうかを制御します。
selectedColor 表示する前に現在の色を書き込み、ユーザーはそれを開いた後に既存の値を確認できます。
present システムのカラーピッカーを表示する役割を果たします。アプリ自体でスポイトやコレクションの色を実装する必要はありません。
colorPickerViewControllerDidSelectColor 読む selectedColor ユーザーが色を選択した後。
ユーザーのキャンセルを処理する必要はありません。の DidFinish 講義の例では、空の実装を明示的に選択しました。

日付ピッカーは同じ API を使用してコンパクトスタイルとインラインスタイルを切り替えます

(10:04) UIDatePicker iOS 14 および iPadOS 14 では、コンパクトなスタイルが追加されました。日付と時刻がフィールドとして表示され、日付をクリックするとカレンダーが開き、時刻をクリックするとキーボード入力が開きます。表形式またはフォームでのコンパクトなレイアウトに適しています。インラインスタイルは、日付の選択がインターフェイスの主なタスクであるシナリオに適しています。講演では、新しいスタイルによって基礎となる API が変更されないことが強調されています。 UIDatePicker。

let datePicker = UIDatePicker()
datePicker.date = Date(timeIntervalSinceReferenceDate:
                       timeInterval)

datePicker.preferredDatePickerStyle = .compact

datePicker.calendar = Calendar(identifier: .japanese)
datePicker.datePickerMode = .date

datePicker.addTarget(self,
             action: #selector(dateSet),
                for: .valueChanged)

キーポイント:

date は、引き続き元の方法を使用して初期値を設定します。
preferredDatePickerStyle = .compact 表示が変わるだけです。
calendar を和暦などの暦法に変更すると、対応した内容が新しいスタイルで表示されます。
datePickerMode = .date 選択を日付に制限し、無関係な時間入力を非表示にします。
addTarget(_:action:for:) まだそれをとして扱います UIControl 値の変更をリッスンします。

メニューは非同期的に生成したり、表示されているコンテンツを更新したりできます。

(14:20) iOS 14 では次のことが可能です UIButton そして UIBarButtonItem サポートする menu 直接。デフォルトでは長押しするとメニューが表示されます。 UIButton タッチするとすぐに表示できます showsMenuAsPrimaryAction; UIBarButtonItem メニューがあり、主要なアクションがない場合は、タッチ時にも表示されます。複雑なメニューは、次を使用して遅延生成できます。 UIDeferredMenuElement。

button.menu = UIMenu(title: "", children: [
    UIMenu(title: "", options: .displayInline, children: (1...2).map { UIAction(title: "Static Item \($0)") { action in }}),
    UIDeferredMenuElement({ completion in
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            completion([UIMenu(title: "", options: .displayInline, children: (1...2).map { UIAction(title: "Dynamic Item \($0)") { action in }})])
        }
    }),
])

キーポイント:

button.menu メニューをボタンに直接ハングし、UIKit がメニューを表示します。
最初 UIMenu 静的なアイテムを保持します。 options: .displayInline インラインで表示させます。
の閉鎖 UIDeferredMenuElement 電話をかける completion 非同期で、メニュー項目を追加する前にデータの準備ができるのを待つのに適しています。
UIKit は待機期間中に標準の読み込み UI を表示し、生成されたアイテムを後続の表示でキャッシュします。

(14:50) 開いているメニューも更新できます。 updateVisibleMenu の UIContextMenuInteraction 現在のメニューのコピーを渡し、現在の表示コンテンツを置き換える新しいメニューを返します。

self.contextMenuInteraction.updateVisibleMenu { currentMenu -> UIMenu in
    currentMenu.children.forEach { element in
        guard let action = element as? UIAction else { return }

        action.state = Bool.random() ? .off : .on
        action.attributes = Bool.random() ? [.hidden] : []
    }
    return currentMenu
}

キーポイント:

updateVisibleMenu ユーザーに表示されているメニューのみを処理します。
currentMenu.children 現在のメニュー項目を移動できます。
例は更新のみです UIAction、その他のメニュー要素は直接スキップされます。
state 選択状態を切り替えることができます。 attributes アイテムを非表示にすることができます。
UIMenu iOS 14 では、子を不変にすることは強制されなくなったので、受信メニューを更新して直接戻ることができます。

UIAction はイベント処理をコントロール作成サイトに戻します

(16:05) UIAction iOS 13 で導入され、iOS 14 ではさらに多くのコントロールに拡張されました。 UIBarButtonItem 新しいイニシャライザを追加します。これにより、アクションを実行するだけのボタン、メニューを表示するだけのボタン、またはタップアクションと長押しメニューの両方をサポートするボタンを作成できます。

let saveAction = UIAction(title: "") { action in }
let saveMenu = UIMenu(title: "", children: [
    UIAction(title: "Copy", image: UIImage(systemName: "doc.on.doc")) { action in },
    UIAction(title: "Rename", image: UIImage(systemName: "pencil")) { action in },
    UIAction(title: "Duplicate", image: UIImage(systemName: "plus.square.on.square")) { action in },
    UIAction(title: "Move", image: UIImage(systemName: "folder")) { action in },
])
let optionsImage = UIImage(systemName: "ellipsis.circle")
let optionsMenu = UIMenu(title: "", children: [
    UIAction(title: "Info", image: UIImage(systemName: "info.circle")) { action in },
    UIAction(title: "Share", image: UIImage(systemName: "square.and.arrow.up")) { action in },
    UIAction(title: "Collaborate", image: UIImage(systemName: "person.crop.circle.badge.plus")) { action in },
])
let revertAction = UIAction(title: "Revert") { action in }
self.toolbarItems = [
    UIBarButtonItem(systemItem: .save, primaryAction: saveAction, menu: saveMenu),
    .fixedSpace(width:20.0),
    UIBarButtonItem(image: optionsImage, menu: optionsMenu),
    .flexibleSpace(),
    UIBarButtonItem(primaryAction: revertAction),
]

キーポイント:

primaryAction クリックを処理し、 menu より多くのアクションを処理します。
UIAction メニュー項目としても、バーボタン項目のメインアクションとしても使用できます。
画像とメニューがあるが主なアクションがないバーボタン項目は、タッチするとメニューが表示されます。
.fixedSpace(width:) そして .flexibleSpace() は、スピーチで示された新しいツールバー項目の構成方法です。
同じツールバーで、保存、その他のオプション、および元に戻す操作を混在させることができます。

(17:41) UISegmentedControl によって作成されたセグメントもサポートします UIAction。各セグメントのハンドラーは設定された位置の近くにあり、ユーザーがセグメントを選択すると、対応するアクションのみが呼び出されます。講演では、ケースが追加されたときに構成と応答ロジックが一緒に更新されるように、列挙型を使用してアクションを生成することを提案しました。

重要ポイント

ブランドカラーをサポートするエディター設定ページを作成します: を使用します UIColorPickerViewController ユーザーがテーマの色を選択できるようにします。すでにグリッド、スペクトル、RGB、16 進数、コレクションカラー、スポイトを処理しています。実装のエントリポイントは、ピッカーを表示することです。 selectedColorをクリックし、選択内容をデリゲートコールバックに保存します。
フォームの日付フィールドを再加工: スペースを消費するスクロールホイールを次のように変更します。 UIDatePicker コンパクトなスタイル。テーブルビューまたは複数フィールドのフォームに適しています。実装エントリは設定することです preferredDatePickerStyle = .compact、そして使用します datePickerMode 日付または時刻のみの選択を制限します。
長押しメニューをツールバーボタンに追加: 保存、詳細、共有などのボタンには、主要なアクションとメニューを同時に含めることができます。実装エントリは使用します UIBarButtonItem(systemItem:primaryAction:menu:) または UIBarButtonItem(image:menu:) 共通アクションと拡張アクションを整理します。
ネットワークデータを必要とするメニューを遅延読み込みに変更します: フォルダー、プロジェクトリスト、コラボレーターリストなどのメニュー項目は、次を使用して生成できます。 UIDeferredMenuElement。ユーザーがメニューを開いた後、最初にシステムの読み込み UI が表示されます。データ返却後、 completion メニューを設定するために呼び出されます。
セグメント化された制御オプションと処理ロジックを統合: を使用します。 UIAction 各セグメントを作成し、使用を避けるには selectedSegmentIndex スイッチを書きます。エントリポイントは、列挙型を使用して一連のアクションを生成し、それらを新しいイニシャライザに渡すことです。 UISegmentedControl。

Build with iOS pickers, menus and actions

ハイライト

主要内容

詳細

ページコントロールは、固定スペースでより多くのページをホストできます

カラーピッカーは完全な色選択プロセスを担当します

日付ピッカーは同じ API を使用してコンパクトスタイルとインラインスタイルを切り替えます

メニューは非同期的に生成したり、表示されているコンテンツを更新したりできます。

UIAction はイベント処理をコントロール作成サイトに戻します

重要ポイント

関連セッション

コメント

ハイライト

主要内容

詳細

ページ コントロールは、固定スペースでより多くのページをホストできます

カラーピッカーは完全な色選択プロセスを担当します

日付ピッカーは同じ API を使用してコンパクト スタイルとインライン スタイルを切り替えます

メニューは非同期的に生成したり、表示されているコンテンツを更新したりできます。

UIAction はイベント処理をコントロール作成サイトに戻します

重要ポイント

関連セッション

コメント

ページコントロールは、固定スペースでより多くのページをホストできます

日付ピッカーは同じ API を使用してコンパクトスタイルとインラインスタイルを切り替えます