UIKitの最新情報

UIKitの最新情報や改善点をはじめ、より優れたiPadOS、iOS、Mac Catalyst Appを構築する方法をご覧ください。UIの改良、生産性に関する最新情報、APIの向上などについて解説します。また、パフォーマンス、セキュリティ、プライバシーの改善点についても解説します。

リソース

関連ビデオ

WWDC22

WWDC21

UIKitのシートのカスタマイズとリサイズ

ダウンロード

iOS 16の「UIKitの新機能」へようこそ私DimaはUIKitチームの Engineering Managerです UIKitは Appの核となる強力なフレームワークです iOS 16の新機能をサポートするため更新しました

今回は生産性のためのUIの改善コントロールの強化 API の改良そして UIKitとSwiftUIを一緒に使用する新しい方法をお話します

UIKitでは新しいタイトルメニューや検索と置換編集のインタラクションが改良されたナビゲーションバーにより合理的で解明しやすいUIがさらに簡単に開発可能になりましたドキュメントベースのAppの強化もありますまずデスクトップクラスのツールバー機能サポートのためにアップデートしたナビゲーションバーについて

iOS 16ではドキュメントベースのAppのニーズをサポートするため UIKitはブラウザとエディタという2つの新しいナビゲーションスタイルを導入しています

ブラウザスタイルはナビゲーションに履歴やフォルダ構造を使用するAppを

エディターはドキュメント編集中心のUIを想定しています

iOS 16では様々なバーボタンがAppに追加できサブセットはナビゲーションバーの中央に表示されます

メニューの「ツールバーのカスタマイズ」をタップして項目を並べ替えることができます

新しい設定はAppを再起動しても維持されます

他のAppとサイドバイサイドのモードに移行する際はサイズ変更に対応するため入り切らない項目は自動的にオーバーフローメニューに格納されます

新しいナビゲーションスタイルに対応したタイトルメニューを追加し複製・移動・名称変更・書き出すプリント・複製などの標準機能をサポートしましたこれらは対応するデリゲートメソッドを実装するとメニューに表示されますタイトルメニューにカスタム項目も追加できます

さらにMac CatalystでビルドされたAppは NSToolbarとシームレスに統合することで追加コード無しで改良されたナビゲーションバーを活用できます

iOS 16では様々なAppで一貫してテキストを操作するための新しい方法を導入しています 1つ目は新しい検索と置換です写真やカレンダーなどのデータモデルオブジェクトを操作する高度なApp内検索とは異なります検索と置換は純粋にテキストに対してのみ動作するものです UITextViewやWKWebViewなど UIKitの組み込みビューではフラグ設定のみで機能を有効にできます

システムにオプトインした複数のビューやドキュメント間でもシームレスに動作します

次に編集メニューを大幅に改修しました入力方法によって表示が異なりますタッチ操作ではよりインタラクティブなメニューに生まれ変わります

ポインターを使用する場合はフル機能のコンテキストメニューが表示されます

これらをシームレスに提供するために UIMenuControllerと完全に置き換わる UIEditMenuInteractionを導入しました

テキストビューのメニューにアクションを挿入する

新しいAPIも用意しています詳しくはこちらのセッションをどうぞデスクトップクラスの編集操作を取り入れる

ひとつだけビジュアルUIのアップデートを紹介します iOS 16ではスライドオーバーモードでのサイドバーは追加のコードなしで自動的に鮮やかになります UIKitが一連のプライベートビューを管理するのです

カスタマイズ可能なナビゲーションバーや検索と置換編集インタラクションそして強力なタイトルメニューなどは UIKitの新しい生産性向上機能ですこれは序章に過ぎません詳しくは「デスクトップクラスiPadの紹介」や iOS 16のUIKit機能でサンプルAppを改良する「デスクトップクラスのiPad Appを構築する」をご覧ください

では今回追加した2つの新しいコントロールと UIPageControlの機能強化の紹介に移ります

UIDatePickerの埋め込み型のカレンダーが UICalendarViewという形でスタンドアロンのフル機能コンポーネントとして利用できます UICalendarViewは複数の日付選択だけでなく単一の日付を選択するなどさまざまな選択動作をサポートしますまた選択可能な日付の範囲に加えて個々の日付を選択から外すこともできます

デコレーションで注釈を入れることも可能です

UICalendarViewがUIDatePickerと大きく違う点は日付をNSDateではなく NSDateComponentsで表示している点です NSDateが時点の表現であるのに対し NSDateコンポーネントはより優れた正しい日付の表示となります

NSDateComponentsは多くの柔軟性を備えるためどのNSCalendarでコンポーネントを表現しているかを明確にする必要があります

またカレンダーの種類を正しく設定しましょうグレゴリオ暦が必要な場合は明示的にグレゴリオ暦を指定します

先ほどのようなカレンダービューを設定するにはビューの作成後デリゲートを設定しますカレンダーがグレゴリオ暦の設定になるように calendarViewのcalendarプロパティを Gregorian NSCalendarに設定します

次にマルチデイト選択を設定しましょう UICalendarSelectionMultiDate オブジェクトを作成し選択オブジェクトの選択した日付のプロパティにデータモデルから取得した既存の日付を設定し Calendarビューに表示するようにします

選択オブジェクトをカレンダービューの

選択動作に設定しますカレンダーで個別の日付を選択不可にするにはカレンダー選択のデリゲート multiDateSelection:canSelectDate: メソッドを実装して選択できる日付を制御します

選択できない日付は灰色で表示されます

個々の日付を装飾するにはカレンダーデリゲートの calendarView:decorationForDateComponents メソッドを実装します

装飾がない場合は単にnilを返しデフォルトの

グレーの円についてはデフォルトの装飾を返します

画像の装飾の作成と色のカスタマイズも可能ですさらに必要なら customView デコレーションを使いビュープロバイダーでビューを返します

カスタムビューの装飾はインタラクションを許可せず利用可能なスペースにクリップされます

ページコントロールも改善しました現在のページのカスタムインジケータにサポートを追加したので選択されたページか否かによって異なる画像が選択可能になりました

ページコントロールの向きと方向も完全にカスタマイズ可能です

現在のページと違うページでインジケータが変わる垂直ページコントロールを設定した一例です

ページコントロールの方向を上から下に設定し好きなインジケータ画像と現在のインジケータ画像を設定すれば完了です！

Appleはプライバシーとセキュリティの保護に努めています iOS 15では Appがプログラムによってペーストボードにアクセスした場合そのことを示すバナーが表示されることがありました

iOS 16ではシステムの動作を変更しました今後はバナーの代わりにペーストボードの使用許可を求めるアラートを表示します

ユーザーが操作するシステムペーストインタフェースはペーストボードへの暗黙のアクセスを提供し警告を回避できます

カスタムのペーストコントロールがある場合新しいUIPasteControlに置き換えることができ塗りつぶされたUIButtonのように見え動作します

ペーストボードがペースト先と互換性のあるコンテンツを取得するたび有効になります

つまりこれらはUIPageControlを改良して UIPasteControlセキュリティを重視した新しい強力なUICalendarViewなのですどうぞ試してみてください私たちが行ったAPIの改良の説明に移ります

iOS 15ではシートにディテントを追加し柔軟でダイナミックなUIが構築可能になりました iOS 16ではカスタムデテントをサポートし任意の大きさのシートが作れるようになりました

利用するには「.custom」デテントを使用しシートの停止位置の高さを指定します定数値または最大ディテント高に対するパーセンテージを返すことができます

カスタムデテントを他のAPIから参照する場合例えばカスタムデテントの上部を暗くするのを無効にするために識別子を付与することができます

カスタムブロックから返される値についてセーフエリアは範囲外でフローティングシートもエッジアタッチメントも同じ計算にするためです

システムデテントなどの詳細は UIKit動画のシートのカスタマイズとリサイズをご覧くださいこの動画のサンプルコードにも新しいカスタムディテントAPIが表示されます

UIKitのSF Symbolsに新しい機能を追加しましたシンボルはモノクロ・マルチカラー階層型・パレットの 4つのレンダリングモードに対応していますシンボルが異なるレンダリングモードの設定でない限り UIKitはモノクロを使用します iOS 16ではレンダリングモードの指定がない場合モノクロモード以外でレンダリングするケースがあります

例えばこんなデバイスのシンボルの場合 iOS15以前ではレンダリングモードの指定がない場合はシンボルはモノクロレンダリングを使用します

iOS 16ではデフォルトは階層型レンダリングです

シンボルのデフォルトのレンダリングモードはシンボルを表示する望ましい方法ですですからこの場合はデフォルトの階層型レンダリングを有効にしてください新しいUIImage.SymbolConfiguration . preferringMonochrome() APIでモノクロも要求できます

UIKitは0から1までの値に基づいてシンボルのバリエーションが表示できる可変シンボルにも対応するようになりました Appが現在の音量レベルをシンボルで表したいときは可変レンダリングに対応するために更新した speaker.3.wave.fillシンボルが使用できます値0ではスピーカーの波がフェードアウトし音量が最小であることを示します値が1まで増加するときはスピーカーの波が徐々に加わっていき音量が大きくなることを示します

シンボルが可変レンダリングをサポートしている場合Appは0と1の間の値を反映したシンボルのバージョンを要求できます

変数記号の使い方は簡単です UIImage の標準的なSF Symbols API で通常の非変数バージョンのシンボルが取得できます

特定の変数値を持つシンボルのバージョン取得時は variableValueパラメータを追加します

他のレンダリングモードをミックスしてさらにスタイリッシュにすることも可能です

多くのシステムシンボルが可変レンダリングに対応し Appがカスタムシンボルを更新します

カスタム変数シンボルの作成方法は「SF Symbolsにおける可変カラーの採用」と「SF Symbols 4の新機能」をご覧ください

UIImageやUIColorなどの不変の型を Sendableに適合させるなど Swiftの新しいConcurrency機能で動作するようにUIKit を近代化しましたこれによりコンパイラの警告なしに MainActorとカスタムアクタ間で送信可能になりました

例えば Processorというカスタムアクターと MainActorにバインドされたImageViewerというビューコントローラーを用意します sendImageForProcessing メソッドでは ImageViewerが Processorアクタに画像を送って加工しキラキラや虹で華やかに仕上げています UIImageは不変でProcessorは虹やキラキラを追加するために新しいコピーの作成が必要なので安全です

元の画像を参照しているコードにはこれらの変更は行われないため共有状態は安全でない可変 unsafe-mutedとはなりません

UIBezierPathは可変のため Sendableではないので対照的です

これまでドキュメントでしか表現できなかったものがコンパイラでチェックできるなんてクールですよね

詳細はこの２つのセッションをご覧ください Swift並行処理を使ってデータ競合を排除する Swift並行処理を可視化して最適化する

iOS 16は外部ディスプレイを新たに強力にサポートします古いUIScreen APIを使用していない限り利用のために Appの更新は必要はありません

もう Appがメイン画面にある前提はやめましょう必要な情報を得るにはトレイルコレクションやUIScene APIなどより具体的なAPIに委ねましょうまだUIScene未使用のAppをアップグレードしてマルチウィンドウ対応にしたくなりましたね

UICollectionViewとUITableViewのセルフ-サイズセルも大幅に更新しました今やセルもセルフ-リサイズできます！ iOS 16では可視セル内のコンテンツが変更されるとそれに合わせてセルが自動的にリサイズされます

この動作はデフォルトで有効になっており UICollectionViewとUITableViewにはそれぞれ新しいselfSizingInvalidation プロパティがありこの新機能を制御します

以下はその仕組みです

selfSizingInvalidationが有効な場合それを含むコレクションまたはテーブル・ビューによってサイズ変更を要求できます

UIListContentConfigurationを使ってセルを構成している場合構成が変更されるたび自動的に無効化を行います

それ以外の場合はセルまたはそのcontentViewに対し invalidateIntrinsicContentSize メソッドを呼び出してセルのサイズ変更ができます

デフォルトではアニメーション付きで performWithoutAnimationでラップするとアニメーションなしでリサイズできます UICollectionViewとUITableViewはセルからのサイズ無効化を最適なタイミングで実行される一回の更新に統合します

セルにAuto Layoutを使用している場合 enabledIncludingConstraintsを選択するとさらに包括的な動作が選べますセルがそのcontentView内の自動レイアウトを検出すると invalidateIntrinsicContentSizeを呼び出しコレクションまたはテーブル・ビューがサイズ変更できるということですこれによりコンテンツやレイアウト更新に応じて自動的にサイズを調整するセルを簡単に作成できます

UIKitはパワフルで柔軟性がありますまた SwiftUIを使ったUIの実装ではその表現力の高さが生かされます同じAppに両方簡単に組み込めます

iOS 16では SwiftUIでコレクションとテーブルビューのセルを構築する新しい方法があります

UIHostingConfigurationという新しいコンテンツ構成タイプで実現しますたった1行のコードでセルの中で SwiftUIを書き始めることができます追加のビューやビューコントローラーは必要ありません

UIHostingConfigurationを使って SwiftUIで書いたシンプルなカスタムセルを紹介しますこのセルを作るのは簡単です

AppにSwiftUIを統合するきっかけとなるだけでなく SwiftUIの表現力は UIKitでカスタムセルを構築するのにこれ以上の方法はないことがわかりますこのトピックは他にもたくさんあるのでぜひ「UIKitでSwiftUIを使用する」で詳細をご確認ください

小さいですが重要な変更点が複数ありますユーザーが個人を特定されるのを防ぐため UIDevice.nameはユーザーのカスタムデバイス名でなくモデル名を報告するようになりましたカスタマイズした名前を使うには資格の取得が必要です

UIDevice.orientationの設定は非対応になりました preferredInterfaceOrientationなどの UIViewController APIで意図するインターフェイスの向きを表現します

次にどうするか？ iOS 16 SDKを使ってAppをコンパイルしますテキスト編集メニューや検索・置換などの新機能をお試しください新しい UIKit APIを採用し強化された新しいコントロールと生産性機能が使用できますそして UIKitAppにSwiftUIを組み込む新しいエキサイティングな方法を試しましょう

7:51 - Configuring a UICalendarView with multi-date selection

// Configuring a calendar view with multi-date selection

let calendarView = UICalendarView()
calendarView.delegate = self
calendarView.calendar = Calendar(identifier: .gregorian)
view.addSubview(calendarView)

let multiDateSelection = UICalendarSelectionMultiDate(delegate: self)
multiDateSelection.selectedDates = myDatabase.selectedDates()
calendarView.selectionBehavior = multiDateSelection

func multiDateSelection(
    _ selection: UICalendarSelectionMultiDate,
    canSelectDate dateComponents: DateComponents
) -> Bool {
    return myDatabase.hasAvailabilities(for: dateComponents)
}

9:07 - Configure UICalendarView decorations.

// Configuring Decorations
func calendarView(
    _ calendarView: UICalendarView, 
    decorationFor dateComponents: DateComponents
) -> UICalendarView.Decoration? {
    switch myDatabase.eventType(on: dateComponents) {
    case .none:
        return nil
    case .busy:
        return .default()
    case .travel:
        return .image(airplaneImage, color: .systemOrange)
    case .party:
        return .customView {
            MyPartyEmojiLabel()
        }
    }
}

10:16 - Setting up a vertical UIPageControl with custom indicators

// Vertical page control with custom indicators

pageControl.direction = .topToBottom
pageControl.preferredIndicatorImage = UIImage(systemNamed: "square")
pageControl.preferredCurrentIndicatorImage = UIImage(systemNamed: "square.fill")

12:21 - Creating a custom sheet detent

// Create a custom detent
sheet.detents = [
    .large(),
    .custom { _ in
        200.0
    }
]

12:38 - Creating a custom sheet detent using a percentage of maximum detent height

// Create a custom detent
sheet.detents = [
    .large(),
    .custom { context in
        0.3 * context.maximumDetentValue
    }
]

12:42 - Assigning identifiers to custom sheet detents

// Define a custom identifier
extension UISheetPresentationController.Detent.Identifier {
    static let small = UISheetPresentationController.Detent.Identifier("small")
}

// Assign identifier to custom detent
sheet.detents = [
    .large(),
    .custom (identifier: .small) { context in
        0.3 * context.maximumDetentValue
    }
]

// Disable dimming above the custom detent
sheet.largestUndimmedDetentIdentifier = .small

22:16 - UIHostingConfiguration example

cell.contentConfiguration = UIHostingConfiguration {
    VStack {
        Image(systemName: "wand.and.stars")
            .font(.title)
        Text("Like magic!")
            .font(.title2).bold()
    }
    .foregroundStyle(Color.purple)
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。