UIKitの新機能

UIKitの新機能

タブやドキュメントの起動時の体験、トランジション、テキストおよび入力に関する変更点など、UIKitの最新情報のすべてをご紹介します。また、これまで以上に向上した、アニメーションおよびジェスチャに関するUIKitとSwiftUIの相互運用性のほか、UIKit全体の全般的な改善点についても解説します。

関連する章
- 0:00 - Introduction
- 0:55 - Document launch experience
- 1:24 - Updated tab and sidebar
- 2:43 - Fluid transitions
- 3:35 - SwiftUI animations in UIKit
- 4:24 - Coordinated gesture recognizers
- 6:02 - Automatic trait tracking
- 7:44 - List improvements
- 11:18 - UIUpdateLink
- 12:55 - SF Symbol animations
- 14:36 - Sensory feedback
- 16:14 - Text improvements
- 18:14 - Menu actions
- 18:58 - Apple Pencil Pro and PencilKit
リソース
関連ビデオ

WWDC24
WWDC23
- アプリでシンボルをアニメーションする
WWDC21
- iPad Appを次のレベルに
ダウンロード

こんにちは「UIKitの最新情報」へようこそ UI Frameworksチームのマネージャ Dimaです
iOS 18ではUIKitに多くの機能強化が加えられていますこのセッションでは次の点について説明します新しい主な機能とUIの改善点同じアプリ内での UIKitとSwiftUIのさらなる統合一般的な機能強化とAPIの追加
UIKitにはユーザーインターフェイスを効率化しより快適に使用できるようにするための大きな改善が加えられています
ここでは主な機能を3つ紹介しますドキュメントの起動体験の改善タブとサイドバーの大幅なアップデートシステム全体での新しいスムーズなトランジションのサポートです
まずドキュメントベースアプリの起動時の体験が再設計されアプリの独自性を際立たせることができるようになりました起動時のビューのデザインを完全に制御しテンプレートからのドキュメント作成に対して優れたサポートを提供することで初めてドキュメントを作成するユーザーをスムーズにガイドしながら優れたブラウズ体験も維持できます詳細については関連するセッションの「Evolve your document launch experience」をご覧ください次にタブバーの外観が新しくなりサイドバー体験とカスタマイズ機能が新たに組み込まれました iPadOS 18ではタブバーがコンパクトな外観に一新され縦方向と横方向の空白が減りアプリのコンテンツが前面に表示されるようになりました既存のサイドバーアプリは新しいUITabBarController APIを採用してタブとサイドバーを組み合わせた体験を実現しています最小化するとサイドバーはタブバーに戻りますこれでアプリのコンテンツが常に目立つようになります
新しいバーではタブバーを使用してすばやく移動できると同時にサイドバーからアプリのより深いセクションにアクセスできます新しいバーにはカスタマイズ機能も備わっておりドラッグ＆ドロップでサイドバーとタブバーをパーソナライズできます
新しいUITab APIと UITabGroup APIを使うとアプリで構造を記述してタブバーとサイドバーを構築できます
さらに Mac CatalystとvisionOSの両方でネイティブ体験に適応します詳しくは「Elevate your tab and sidebar experience in iPadOS」をご覧ください iOSではトランジションを使用してアプリの様々な部分の視覚的なリンクとナビゲーションを実現します iOS 18には新しいズームトランジションがありますこれはナビゲーションとプレゼンテーションの両方で機能します見た目が新しいだけではありません常にインタラクティブな操作が可能でトランジションの最初からでも途中でもつかんでドラッグできますアプリ内で大きなセルからトランジションする場合ズームトランジションを使用するとトランジション全体で同じUI要素が画面上に表示されるためアプリの連続性が高まります iOS 18ではSwiftUIとUIKitの相互運用性が強化されアプリでそれらを簡単に交換して使用できるようになりました
2つの領域のアップデートについて説明しますアニメーションとジェスチャリコグナイザですまずはアニメーションに関する非常にエキサイティングなアップデートです SwiftUIアニメーションタイプを使用して UIKitビューをアニメーション化できますこれにより SwiftUIの CustomAnimationを含むすべての SwiftUIアニメーションタイプを使用して UIKitビューをアニメーション化できますさらに SwiftUIスプリングアニメーションを使って滑らかなジェスチャで動くアニメーションを簡単に作成できます
これを使用するにはジェスチャの変更時と終了時の両方でビューをアニメーション化しますこれによりアニメーションのインタラクティブ部分と非インタラクティブ部分にわたって連続速度がシームレスに維持されますこの素晴らしいアップデートのアニメーションの概要については Russellがわかりやすく解説している「Enhance your UI animations and transitions」をご覧ください通常アニメーションはジェスチャリコグナイザとペアになっていますが UIKitとSwiftUI間でジェスチャを調整するのも簡単になりましたジェスチャシステムは UIKitとSwiftUIで統一され一貫したルールに従うようになりました iOS 18では両方のフレームワークにわたってジェスチャ間の依存関係を指定できますこれはUIKit階層にネストされた SwiftUI階層の例ですここでUIKitのシングルタップジェスチャと SwiftUIのダブルタップジェスチャを共存させたいとします
ここではジェスチャが同時に認識されますこれを防ぐためにこれら2つのジェスチャリコグナイザの間に処理の失敗要件を設定しますまずSwiftUIジェスチャを設定するときに名前を指定します「SwiftUIDoubleTap」次にUIKitデリゲート内でもう一方のジェスチャリコグナイザの名前を確認して SwiftUIジェスチャに関連付けられているものを特定しますこれで UIKitからのシングルタップジェスチャリコグナイザは SwiftUIダブルタップジェスチャが失敗した場合にのみ起動し目的の効果を達成します iOS 18では既存のUIKitジェスチャリコグナイザを SwiftUI階層に直接追加できるようになりました新しい UIGestureRecognizerRepresentable プロトコルを使用します「What's new in SwiftUI」をご覧になり UIGestureRecognizerRepresentableをアプリに採用する方法をご確認ください最後に UIKitの一般的な機能強化について説明します
UIKitの特性システムはアプリの階層内のビューコントローラとビューにデータを送信します iOS 18では特性の使用と変更の処理がこれまで以上に簡単になりました UIKitはlayoutSubviewsや drawRectなどの一般的なビューとビューコントローラの更新メソッド内での自動特性トラッキングをサポートするようになりましたこれらのサポートされているメソッドのいずれかをUIKitが呼び出すとそのメソッド内でアクセスした特性が記録されますその後これらの特性のいずれかの値が変化すると UIKitは setNeedsLayoutや setNeedsDisplayなどそのメソッドに関連付けられた無効化処理を自動的に実行しますこの例では layoutSubviewsをオーバーライドする UIViewサブクラスがありますビューのtraitCollectionから horizontalSizeClass特性を読み取り使用するレイアウトの種類を決定します自動特性トラッキングが登場する前は horizontalSizeClass特性を手動で登録し変更されるたびにこのビューで setNeedsLayoutを呼び出す必要がありました iOS 18の自動特性トラッキングを使用すると手動による特性変更登録を完全に削除できますこれはlayoutSubviewsが呼び出されると horizontalSizeClass特性の使用が記録されるためです
またこのビューの特性が変更されると setNeedsLayoutを自動的に受け取り新しい値に更新します自動特性トラッキングは必要な特性依存関係のみを作成することで最大のパフォーマンスを実現しますこの新機能はサポートされている更新メソッド内で常に有効になっています
サポートされている全メソッドのリストは関連ドキュメントを参照してください次にコレクションとテーブルビューの APIが更新されより簡単にセルを更新できるようになりました UICollectionViewリストセクションと UITableViewのすべてのビューにリスト環境特性が設定されました
リスト環境はビューが含まれるリストのスタイルを記述しますこの特性を使用しどのリストでもセルが適切にスタイル設定されていることを確認します UIListContentConfigurationと UIBackgroundConfigurationはこの新しい特性を利用するようになりました
新しい状態に更新されると構成状態の特性コレクションのリスト環境に合わせてプロパティが調整されます
そのためセルの構成時にリストのスタイルを特定する必要がありません
代わりにセルの構成コードは表示されるコンテンツに必要なスタイルのみすなわち通常のセル　ヘッダフッタのスタイルだけを知っていればよいのです例としてファイルアプリのタブについて考えてみましょうここではUICollectionViewとコンポジションレイアウトを使用し場所お気に入りタグのリストをコンテキストに応じて 2つの異なるスタイルで表示します縦長モードではブラウズリストは insetGroupedの外観を使用します横長モードでは同じブラウズリストが Split View Controller のサイドバーに表示され UICollectionViewのコンポジションレイアウトを構成するときにサイドバーの外観が使用されますこれはブラウズリスト内の場所のコンテンツとバックグラウンド構成を生成するファイルアプリの関数です iOS 17ではこの関数はこのように実装されていました
ファイルの場所の構造体とリストの外観を引数として受け取りますまずリストの外観がサイドバースタイルかどうかを確認しその結果をローカル変数isSidebarに格納します次にisSidebar変数に基づいてコンテンツとバックグラウンド構成を手動で選択します構成は手動で作成されたためブラウズリストの外観が変更されたときはそれらを使用するセルを手動で再構成する必要がありますこの関数は更新された外観に対して再度実行されます
iOS 18ではこの関数を大幅に簡素化できるようになりましたファイルアプリではコンテンツ構成に cellコンストラクタを使用し backgroundConfigurationに新しいlistCellコンストラクタを使用します
構成がセルに適用されるとセルの構成状態に応じて更新されます新しいリスト環境特性は構成状態の特性コレクションにあるためこれらの構成はリストのスタイルに合わせてプロパティを自動的に更新するようになりました UIListContentConfigurationの場合既存のセルサブタイトルセル値セルの構成がリスト環境特性から外観を自動的に更新するようになりました
新しいヘッダとフッタの構成も同様です UIBackgroundConfigurationには 3つの新しいコンストラクタがあります listCell listHeader listFooterです
これらのバックグラウンド構成もリスト環境特性から外観を自動的に更新します
これらの新しい追加機能をすべて活用してコードを簡素化してください
UIUpdateLinkはiOS 18の新機能で定期的なUI更新を必要とする複雑なアニメーションの実装がさらに簡単になります CADisplayLinkを使ったことがあれば UIUpdateLinkに馴染みがあるでしょう
自動ビュートラッキングなどの機能が追加されビューが表示されているディスプレイに合わせてリンクが自動的に調整されるほか描画アプリケーション用にシステムをLow latencyモードにする機能もありますさらに高度な機能を使用することでパフォーマンスとバッテリー効率を向上させることができますこれは正弦関数を使用してビューを上下にアニメーション化するコード例です UIUpdateLinkの作成時に UIViewのインスタンスを指定しますビューが表示ウインドウに追加されると UIUpdateLinkが自動的にアクティブになりビューがウインドウから削除されると非アクティブになります update関数では更新のタイミングに updateInfoのmodelTimeを使用しますさらにrequiresContinousUpdatesを trueに設定して updateLinkが有効の間は継続的に実行されるようにします falseの場合ジェスチャやレイヤの変更など他の何かが更新された時のみ updateLinkが実行されます詳細情報とより高度なユースケースについては UIUpdateLinkのドキュメントページをご覧ください SF Symbolsはツールバーアイコンやナビゲーションバーなど UI要素の外観の一貫性を保証します UIKitのSF Symbolsに新しいシンボルアニメーションが追加されました UIImageViewとUIBarButtonItemには 3つの新しいアニメーションプリセットがあります .wiggleエフェクトはシンボルを任意の方向や角度に振動させて注目を集めます
.breatheエフェクトはシンボルをスムーズに拡大または縮小して進行中のアクティビティを示します .rotateエフェクトは指定したアンカーポイントの周りでシンボルの一部を回転させます新しい.periodic動作によりアプリは繰り返し回数と繰り返し間のカスタム遅延の両方を指定できます新しい.continuousオプションを使用するとアニメーション終了まで特定の効果がシームレスに繰り返しアニメーション化されますまた既存のプリセットの一部が新しい機能で強化されましたデフォルトの.replaceエフェクトではバッジとスラッシュをスムーズにアニメーション化する新しいマジック置換動作が優先されるようになりましたこの動作は必要に応じて自動的に標準の置換スタイルにフォールバックします例えばマジック置換はマイクとビデオのシンボルではサポートされていないためフォールバックとしてDownUp置換スタイルが自動的に使用されますフォールバックスタイルを明示的に指定するための新しいAPIもありますこの場合は.upUpスタイルです
シンボルのその他の新機能例えば更新されたSF Symbolsアプリや可変色のタイミングに関する新しい注釈バウンスエフェクト用の追加動作などを知りたい場合は「What’s new in SF Symbols 6」をご覧くださいシンボル効果を取り入れる方法を再確認するには「Animate symbols in your app」をご覧ください感覚フィードバックはiPhoneアプリを強化する素晴らしい方法です iPadOS 17.5ではこの機能が Apple Pencil ProとMagic Keyboardを搭載したiPadに拡張されました UIFeedbackGeneratorはこれらの新しいフィードバック提供方法をサポートしておりインタラクションとしてビューにアタッチできますフィードバックを提供する際アプリはフィードバックをトリガするアクションが発生したビュー内の場所を渡す必要があります新しい UICanvasFeedbackGeneratorもあります大きな描画ビューやアートボードビューを持つiPadアプリに最適ですこれらすべてがアプリ内でどのようにまとめられるかについて説明します図形をドラッグしてグリッドにスナップしたときフィードバックを提供する図形描画アプリを考えてみましょうこれはUICanvasFeedbackGeneratorの素晴らしい使い方ですフィードバックジェネレータが作成されたらそれをビューに関連付けます
フィードバックがトリガされたら場所を渡しますこの場合ドラッグされた図形の位置合わせをトリガしたのはジェスチャリコグナイザからの場所です
これで Apple Pencil Proを使って図形をドラッグしスナップガイドに合わせると Pencil Proが触覚フィードバックを返すようになりました
フィードバックジェネレータの役割は触覚だけではありませんプラットフォームと設定に応じて触覚とオーディオを個別に再生したり両方とも有効または無効にしたりできます
アプリは期待される効果に関係なくすべてのプラットフォームで常に同じジェネレータを使用する必要があります iOS 18ではテキストのフォーマット機能が拡張されています新しいテキストフォーマットパネルを活用するとテキストフォーマットオプションを提供するアプリで一貫性のあるカスタマイズ可能な体験を実現できますテキスト属性の編集を可能にする UITextViewには新しい編集メニューアクションがありデフォルトのオプションセットを含む新しいフォーマットパネルが表示されます
テキストのフォーマットではフォントやサイズの変更リストの追加や他の属性の変更を明確かつ簡単に行えます
フォーマットパネルは新しいテキストハイライト機能にも対応します
これは2つの新しい属性を適用することで機能しますハイライトするテキストの範囲を示す textHighlightStyleとハイライトのレンダリングに使用する色を表す textHighlightColorSchemeです
デフォルトに加えて 5つの定義済み配色がありますデフォルトでは淡色を使いますフォーマットパネルのコントロールとレイアウトをカスタマイズしますそれにはUITextViewの新しいtextFormattingConfiguration プロパティを使用してカスタム UITextFormattingView Controller.Configurationを設定しますこのプロパティをnilに設定することで新しい動作を無効にしますパネルの表示を調整するには新しい UITextFormattingViewControllerとそのデリゲートを使用します
Writing Toolsは高度なテキスト編集ができる優れた新機能です
UITextViewsにはデフォルトで Writing ToolsのUIが提供されます編集可能なテキストビューにはインライン編集のための完全な校正機能や作文機能のサポートが提供され編集不可能なテキストビューにはオーバーレイパネルが表示されます UITextViewにはこのユーザーインターフェイス体験を追跡および変更するための追加のAPIがありますこれにはデリゲート通知や動作を制限するプロパティなどが含まれますメニューアクションは macOSのメニューバーに加え iPadOSとvisionOSのキーボードショートカットメニューにあるアプリのすべのコマンドを提供します iOS 18では iPhone専用アプリでメニューアクションがより便利になります UICommand UIKeyCommand UIActionsを使用してアプリを準備し他のシステム呼び出しをサポートします UICommands UIKeyCommands UIActionsはシステムで呼び出してアプリを制御することができます例えばアプリがiPhoneミラーリングを介して使用される場合 UIKeyCommandsは Macキーボードから呼び出されますメインメニューシステムにコマンドを追加する方法については「Take your iPad apps to the next level」をご覧くださいここでUIKitとPencilKitへの追加について説明します Apple Pencil Proと描画体験を統合し少ないコードで豊富なツール選択体験を提供するためのものです iPadOS 17.5に新たに追加されたUIKitは Apple Pencil Proの素晴らしい新機能をすべてサポートしていますスクイーズジェスチャを使用するとツールをすばやく切り替えたり必要に応じてペンシルをホバーしている位置にピッカーを表示したりできます Apple Pencil Proに合わせてフィードバックジェネレータがアップデートされ描画や手書きの体験が向上しましたバレルロール角度を提供する UITouchと UIHoverGestureRecognizerによりアプリの描画ツールがさらに表現力豊かになります取り消しをサポートするすべてのアプリでは Apple Pencil Proをスクイーズすると取り消しスライダが表示され取り消し履歴を簡単に操作できます iPadOS 18とvisionOS 2の新機能である PKToolPickerでは利用可能なツールを定義できます PKToolPickerはPKCanvasViewや独自の描画キャンバスまたはその両方を組み合わせて使うことができますカスタム描画キャンバスのツールを PKToolPickerに組み込むための新しいAPIがあります Apple Pencil Proのサポートが強化された今ほど PKToolPickerの導入に適したタイミングはありません新しいApple Pencil APIについて詳しくは「Squeeze the most out of Apple Pencil」をご覧ください本当に沢山の改善点があります UIKitには様々な機能が備わっており一層パワーアップしています次のステップは iOS 18 SDKを使ってアプリをコンパイルする UIKitの新しい機能を導入するトランジションやアニメーションタブバー新しいドキュメント起動体験の改善点を活用することですそしてUIKitとSwiftUIの両方をアプリに統合する新しい方法を引き続き試してくださいありがとうございました

0:01 - Using SwiftUI to animate UIViews with gestures

switch gesture.state {
case .changed:
    UIView.animate(.interactiveSpring) {
        bead.center = gesture.translation
    }

case .ended:
    UIView.animate(.spring) {
        bead.center = endOfBracelet
    }
}

0:02 - Setting failure requirements between gestures

// Inner SwiftUI double tap gesture

Circle()
    .gesture(doubleTap, name: "SwiftUIDoubleTap")


// Outer UIKit single tap gesture

func gestureRecognizer(
    _ gestureRecognizer: UIGestureRecognizer, 
    shouldRequireFailureOf other: UIGestureRecognizer
) -> Bool {
    other.name == "SwiftUIDoubleTap"
}

0:03 - Responding to horizontalSizeClass trait

class MyView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        
        if traitCollection.horizontalSizeClass == .compact {
            // apply compact layout
        } else {
            // apply regular layout
        }
    }
}

0:04 - Using the new automatic content and background configurations

func configurations(for location: FileLocation) ->
    (UIListContentConfiguration, UIBackgroundConfiguration) {

    var contentConfiguration = UIListContentConfiguration.cell()
    let backgroundConfiguration = UIBackgroundConfiguration.listCell()

    contentConfiguration.text = location.title
    contentConfiguration.image = location.thumbnailImage

    return (contentConfiguration, backgroundConfiguration)
}

0:05 - Using UIUpdateLink

let updateLink = UIUpdateLink(
    view: view,
    actionTarget: self,
    selector: #selector(update)
)
updateLink.requiresContinuousUpdates = true
updateLink.isEnabled = true

@objc func update(updateLink: UIUpdateLink,
                  updateInfo: UIUpdateInfo) {
    view.center.y = sin(updateInfo.modelTime)
        * 100 + view.bounds.midY
}

0:06 - An example of providing UICanvasFeedbackGenerator with additional context

@ViewLoading var feedbackGenerator: UICanvasFeedbackGenerator

override func viewDidLoad() {
    super.viewDidLoad()
    feedbackGenerator = UICanvasFeedbackGenerator(view: view)
}

func dragAligned(_ sender: UIPanGestureRecognizer) {
    feedbackGenerator.alignmentOccurred(at: sender.location(in: view))
}

0:07 - Using new attributes for highlight

var attributes = [NSAttributedString.Key: Any]()

// Highlight style
attributes[.textHighlightStyle] = 
NSAttributedString.TextHighlightStyle.default

// Highlight color scheme
attributes[.textHighlightColorScheme] =
NSAttributedString.TextHighlightColorScheme.default

0:08 - Customizing formatting panel

textView.textFormattingConfiguration = .init(groups: [
    .group([
        .component(.fontAttributes, .mini),
        .component(.fontPicker, .regular),
        .component(.textColor, .mini)
    ]),
    .group([
        .component(.fontPointSize, .mini),
        .component(.listStyles, .regular),
        .component(.highlight, .mini)
    ])
])

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

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC24

WWDC23

WWDC21