WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in UIKit

What's new in UIKit

UIKitSwiftUIiPadOSiOS 16
元の動画を見る

ハイライト

iOS 16 ではデスクトップレベルのナビゲーションバーが UIKit に追加されます。UICalendarView、UIPasteControl、カスタムシートの戻り止め、自動サイズ変更セル、UIHostingConfigurationにより、iPad、iPhone、Mac Catalyst アプリがシステム API を使用して、より生産性の高いインターフェイスを完成できるようになります。

主要内容

iOS 16 の UIKit のテーマは明確です。これまでカスタム コントロール、手書きレイアウト、プラットフォーム ブランチが必要だった多くのタスクをシステム API に統合します。

ドキュメント アプリは、最初のカテゴリーの受益者です。ナビゲーション バーには、ブラウザとエディタの 2 つのスタイルが追加され、カスタマイズ可能な中央ツール項目、自動オーバーフロー メニュー、タイトル メニュー、および Mac Catalyst とNSToolbar(01:22) の自動統合。

テキスト編集もデスクトップエクスペリエンスに近くなります。内蔵UITextViewそしてWKWebViewフラグをオンにするだけで検索と置換が有効になります。古いUIMenuControllerキルトUIEditMenuInteraction代わりに、同じメカニズムを使用して、タッチ メニューとポインター コンテキスト メニューをオーバーレイします (03:29)。

コントロールレベルでは、Apple はインラインカレンダーをUIDatePicker独立して分割するUICalendarView。単一の選択、複数の選択、単一の日付と日付の装飾の無効化をサポートします。UIPageControlまた、現在のページと現在のページ以外のインジケーター画像のカスタマイズもサポートしており、方向を構成することもできます (06:13)。

日常のコードに影響を与える変更には他にも 2 つのタイプがあります。UISheetPresentationControllerカスタム戻り止めをサポートし、コンテンツの変更後にセルのサイズを自動的に再計算でき、UIKit セルを直接使用することもできます。UIHostingConfigurationSwiftUI コンテンツの作成 (12:03、[19:05](https://developer.apple.com/v ideos/play/wwdc2022/10068/?time=1145)、 21:25)。

詳細

UCalendarView を使用して複数選択可能なカレンダーを作成する

UICalendarView日付コンポーネントを使用するDateComponentsカレンダーの日付を時点と間違えないように日付を表​​現しますDate。これは重要な違いです。カレンダーの「6 月 10 日」を意味を持たせるには、特定のカレンダーと組み合わせる必要があります。したがって、セッションは、ビジネスでグレゴリオ暦が必要な場合は、明示的に設定することを通知します (07:00)。

// 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)
}

キーポイント:

  • UICalendarView()独立したカレンダー コントロールを作成し、インライン カレンダーをバインドしないようにします。UIDatePicker優れた。 -calendarView.delegate = self現在のオブジェクトに日付装飾などのコールバックを提供させます。 -calendarView.calendar = Calendar(identifier: .gregorian)ユーザーの現在のカレンダーの種類に依存しないようにするには、グレゴリオ暦を明示的に使用します。 -UICalendarSelectionMultiDate(delegate: self)複数の日付選択動作を作成します。 -selectedDatesデータ モデルから選択した日付を復元して、カレンダーの初期状態をビジネス データと一致させます。 -calendarView.selectionBehavior = multiDateSelection選択ルールをカレンダー コントロールにアタッチします。 -canSelectDate戻るfalseの場合、日付はグレー表示され、ユーザーは選択できません。

カレンダーの日付を装飾する

カレンダーは日付を選択するだけではありません。忙しい、旅行、集まりなど、その日のステータスも表示できます。アプローチは実現することですcalendarView(_:decorationFor:)、データモデルに従って異なる値を返しますUICalendarView.Decoration（09:07）。

// 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()
        }
    }
}

キーポイント:

  • decorationFor dateComponentsビジネス ステータスをクエリするには、日付コンポーネントを使用します。 -return nilこの日は装飾がないことを示します。 -.default()システムのデフォルトの灰色の点を表示します。 -.image(airplaneImage, color: .systemOrange)写真や色を使って旅行状況を表現します。 -.customView { MyPartyEmojiLabel() }特別な状態にカスタム ビューを提供します。
  • トランスクリプトには、カスタム装飾ビューはインタラクティブではなく、利用可能なスペースに合わせてトリミングされると明確に記載されています。

UIPageControl の方向とインジケーターをカスタマイズする

UIPageControliOS 16 は、これまで一般的だった 2 つのカスタマイズ要件をサポートしています。それは、垂直ページ インジケーター、および現在のページと現在のページ以外のページに異なる画像を使用することです (09:53)。

// Vertical page control with custom indicators

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

キーポイント:

  • direction = .topToBottomページ コントロールを変更して上から下に配置します。 -preferredIndicatorImage通常ページのインジケーター画像を設定します。 -preferredCurrentIndicatorImage現在のページのインジケーター画像を設定します。
  • SFシンボルを使用した例squareそしてsquare.fillの場合、自分でポイントを描画したり、選択した状態を維持したりする必要はありません。

カスタム戻り止めを使用してシートの高さを制御する

iOS 15 でのシート デテントの導入により、開発者はシステムの中型サイズと大型サイズを切り替えることができます。 iOS16が追加されました.custom戻り止めを使用する場合は、固定の高さを直接返すことも、最大の高さに基づいて比率を計算することもできます (12:03)。

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

キーポイント:

  • sheet.detentsシートをドッキングできる高さのセットを定義します。 -.large()システムの大きいサイズの状態を保存します。 -.custom { _ in 200.0 }200 ポイントの高カスタム ステートを追加します。
  • セッション リマインダー。クロージャの戻り値は下部の安全領域インセットを計算する必要はありません。システムはフローティング シートとエッジ接続シートの違いを処理します。

高さをコンテナのスペースに関連付ける必要がある場合は、次のように読むことができます。context.maximumDetentValue（12:38）。

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

キーポイント:

  • context現在の環境での最大の戻り止め高さを提供します。 -0.3 * context.maximumDetentValueカスタム戻り止めが最大高さの 30% を使用することを示します。
  • この書き込み方法は、固定点よりも水平および垂直の画面切り替えや異なるデバイス サイズに適しています。

他の API からデテントを参照する必要がある場合は、最初に識別子を定義してから、それを に渡します。.custom（12:42）。

// 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

キーポイント:

  • 拡大UISheetPresentationController.Detent.Identifier、カスタム戻り止めに安定した名前を付けます。 -.custom(identifier: .small)参照できるカスタム戻り止めを作成します。 -largestUndimmedDetentIdentifier = .smallシートの後ろの内容を隠さずに、小さい状態以下でシートを止めてください。

コンテンツの変更に応じてセルの高さを自動的に調整します。

以前は、動的高さのセルに関する問題は更新後に発生していました。コンテンツが変更された場合、セルは必ずしもすぐに高さを再計算するとは限りません。 iOS16では、UICollectionViewそしてUITableViewセルは自己サイズ変更をサポートしています。表示されているセルの内部コンテンツが変更されると、コンテナは自動的にサイズの更新をトリガーできます (19:05)。

セッションのこの部分では完全なコード スニペットは提供されませんが、API エントリが明確に提供されます。

collectionView.selfSizingInvalidation = .enabled

cell.contentView.invalidateIntrinsicContentSize()

キーポイント:

  • selfSizingInvalidationはいUICollectionViewそしてUITableView新しい属性 on は、セルの内容が変更された後のサイズ無効化動作を制御するために使用されます。
  • 使用UIListContentConfigurationセルを構成する場合、構成の変更により自動的に無効化がトリガーされます。
  • 他のシナリオはセルまたはcontentView電話をかけるinvalidateIntrinsicContentSize()。
  • 自動レイアウトを使用する場合は、選択できますenabledIncludingConstraints, そのため、コンテンツ ビューの内部制約の変更によってもサイズの更新がトリガーされます。
  • アニメーションを使用せずに更新する必要がある場合は、無効化呼び出しをラップします。performWithoutAnimation真ん中。

UIKit セルに SwiftUI を直接書き込む

UIKit と SwiftUI が混在する場合、これまではホスティング コントローラーまたはホスティング ビューをプラグインするのが一般的でした。 iOS16が追加されましたUIHostingConfiguration、コレクション ビューとテーブル ビューのセルで SwiftUI を使用してコンテンツを直接記述できるようになります (21:43)。

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

キーポイント:

  • cell.contentConfiguration = UIHostingConfiguration { ... }SwiftUI コンテンツをセルのコンテンツ構成として使用します。 -VStackアイコンとテキストの垂直方向の配置を担当します。 -Image(systemName: "wand.and.stars")SFシンボルを使用します。 -.font(.title)アイコンのフォントサイズを設定します。 -Text("Like magic!")テキストを表示します。 -.font(.title2).bold()テキストスタイルを設定します。 -.foregroundStyle(Color.purple)SwiftUI コンテンツ全体に紫の前景スタイルを設定します。
  • トランスクリプトでは、このアプローチには追加のビューやビュー コントローラーが必要ないことを強調しています。

重要ポイント

  • 対処方法: デスクトップ レベルのタイトル メニューをドキュメント編集アプリに追加します。 実行する価値がある理由: iOS 16 のナビゲーション タイトル メニューには、複製、移動、名前変更、エクスポート、印刷などの標準項目が自動的に表示されます。 開始方法: ブラウザーまたはエディターのナビゲーション スタイルを使用し、対応するデリゲート メソッドを実装します。追加のコマンドが必要な場合は、カスタム メニュー項目を追加します。

  • やるべきこと: 複数の利用可能な日付を選択できるスケジュール インターフェイスを作成します。 実行する価値がある理由:UICalendarView複数の選択をサポートし、単一の日付と日付の装飾を無効にします。 開始方法: 作成するUICalendarSelectionMultiDate、使用canSelectDate使用前に在庫切れ日をフィルタリングするdecorationFor忙しい、旅行、または特別なイベントにマークを付けます。

  • やるべきこと: 底部シートを高さ 30% の軽量コントロール パネルにします。 実行する価値がある理由: カスタム戻り止めは最大高さに基づいて計算できるため、システムの中型および大型に限定されなくなりました。 開始方法: を使用します.custom { context in 0.3 * context.maximumDetentValue }戻り止めを作成し、必要に応じてその識別子を定義します。

  • 対処方法: コメント、リッチテキスト、または設定項目のセルが、内容が変更された後に自動的に縦長になるようにします。 実行する価値がある理由: iOS 16 のセルの自動サイズ変更は、サイズ無効化リクエストをマージし、必要に応じてテーブル ビューまたはコレクション ビューを更新します。 開始方法: 確認してくださいselfSizingInvalidation、使用UIListContentConfiguration自動無効化に依存することが優先されます。カスタムコンテンツが変更されたときに呼び出されますinvalidateIntrinsicContentSize()。

  • やるべきこと: SwiftUI セルを既存の UIKit リストに徐々に導入します。 実行する価値がある理由:UIHostingConfiguration追加のホスティング コントローラーを必要とせずに、セルのコンテンツ構成として直接使用できます。 開始方法: 視覚的に独立したセルから開始し、cell.contentConfigurationと置き換えますUIHostingConfiguration { ... }。

関連セッション

コメント

GitHub Issues · utterances