iPadOSのタブとサイドバーの利用体験を向上

iPadOS 18では、タブバーとサイドバーのどちらを使用するかをユーザーが柔軟に選択できる新しいナビゲーションシステムが導入されます。デザインが一新されたタブバーでは、コンテンツやその他の機能により広いスペースが割り当てられています。SwiftUIとUIKitを使用して、タブの追加、削除、並べ替えなど、カスタマイズのための機能を実装し、アプリの操作性を高める方法を確認しましょう。

リソース

関連ビデオ

WWDC22

iOSナビゲーションデザインの探求

WWDC20

iPadのためのデザイン

ダウンロード

「Elevate your tab and sidebar experience in iPadOS」へようこそ UIKitエンジニアのAndyですこのセッションではタブバーとサイドバーの機能強化について説明しますこの機能強化はアプリの利用体験を向上させアプリ内でコンテンツを際立たせる上で役立ちますタブバーは登場以来 iPhoneとiPadの主要なナビゲーションのパターンですタブによりアプリのコンテンツを複数のセクションに分類できます

タブバーを使うことでそれぞれのタブ内の状態を維持したままタブ間を素早く切り替えて表示できます例えば時計アプリではタブバーに4種類のタブがあります世界時計アラームストップウォッチそしてタイマーです

iPadOS 18ではタブバーが一新され新しいコンパクトな外観になりました使用されていない縦方向および横方向のスペースを減らしより多くのコンテンツを前面に出しています

バーがアプリの上部に配置されほかのナビゲーションコントロールと近くなったことでアクセスしやすくなっていますまた上部のバーと同じ領域に表示されるためアプリのコンテンツの表示領域がさらに広がります

タブは iPhoneとiPadの間で統一されている必要がありますそれによりユーザーは使用するデバイスを問わず簡単に操作できますタブは増やしすぎないようにしましょう選択肢が多すぎるとアプリ内の情報を見つけにくくなります

タブバーと同様にサイドバーもアプリ内のナビゲーションに役立ちますサイドバーによりトップレベルの領域にすばやくアクセスできますフォルダやプレイリストなどコンテンツのトップレベルのコレクションを目立つ場所にまとめて表示して効率的なナビゲーションを実現できます iPadOS 17以前のサイドバーでは Split Viewが使用され先頭の列がアウトラインビューになっていました

iPadOS 18では新機能としてオプションでタブバーをサイドバーとして表示できるほか各種の機能強化によりこれまで以上に優れたサイドバーを実現できます

サイドバーが非表示になるとタブバーに戻るアニメーションが表示されタブで表示されているコンテンツにフォーカスが戻ります

再度サイドバーを開くことなくタブバーでナビゲーション操作ができます

タブバーにはアプリのトップレベルのセクションを表示しサイドバーには同じ階層構造のもとでより多くのセクションを表示できますタブバーとサイドバーの採用は詳細な階層構造を持つコンテンツ重視のアプリに適していますタブバーによるナビゲーションのベストプラクティスは「Explore navigation design on iOS」をご確認くださいサイドバーの詳細は「Designed for iPad」をご覧ください

コンテンツが充実したアプリにはパワフルさに加えパーソナルな操作性も求められます新しいサイドバーはカスタマイズ機能をサポートしており個々のタブの表示と非表示の切り替えや並べ替えができます

タブバーではドラッグ＆ドロップでお気に入りのタブを追加できますこれにより画面の表示を簡単にパーソナライズできます

既存のサイドバーにタブバーを導入することで両方の長所を組み合わせて新しい方法でアプリのカスタマイズやパーソナライズを実現できますまず新しいタブバーとサイドバーの機能と導入時の考慮事項について説明します

次にアプリをより高度にパーソナライズするためのユーザーによるカスタマイズのサポートについて説明します

最後に各種プラットフォームでこれらの機能がどのように動作するか説明しまたマルチプラットフォーム対応のアプリを構築する際の考慮事項をご紹介します

まずはタブバーとサイドバーの説明です iPadOS 18 SDKでコンパイルすると既存のタブバーを備えたアプリはコードの変更なしで新しい外観に更新されます更新された外観ではタブバーとナビゲーションバーが同じセーフエリアに表示され画面のまとまりが向上しています

ナビゲーションバーのツールバー項目をタブバーと並べて表示するスペースが十分にない場合ツールバー項目は自動的にオーバーフローに移動されます

iOS 18の新機能として SwiftUIのTabViewには新しい構文が導入されておりビルド時によくあるエラーの検出が向上していますタイトル画像コンテンツビューを指定して Tab構造体を宣言するようになりました

必要に応じて Tabにselection値を含めることでプログラムによる選択も実装できますこの新しい構文ではすべてのTabが同じselectionの型を持ち TabView自体の型とも一致しています

iOS 18の新機能として UIKitにUITabBarControllerのアプリ階層の記述を改善する新しいAPIが追加されました

アプリのトップレベルのセクションごとに UITabを作成し tabBarControllerの tabsプロパティに割り当てます UITabインスタンスに加えられた変更はタブの表示箇所に即座に反映されます

タブバーには塗りつぶしグリフがサイドバーにはアウトライングリフが適していますタブにシンボル画像を使用する場合はアウトラインのバリアントを使用します

画像がタブバーに表示される場合システムにより自動的に塗りつぶしのバリアントが選択されます例えばMusicアプリではに square.grid.2x2 のシンボル画像を使用していますがこれはアウトライン化されたグリフですタブバーでは別の画像を指定しなければ塗りつぶしのバリアントが表示されます

検索はどのアプリにも共通の機能であり虫眼鏡のシンボルですぐにわかります

SwiftUIのsearch roleタブまたはUIKitのUISearchTabを使用するとシステムによりタブのデフォルトのタイトルおよび画像やピンで固定された配置が設定されますピンで固定された配置ではタブバーの末尾にそのタブが必ず表示されます

iPadアプリに詳細な階層構造がありコンテンツのコレクションが多数表示される場合サイドバーが適しています

アプリで新しいタブとUIタブのAPIを使用するとタブバーとサイドバーの両方に対応したアプリの構造を構築できます

SwiftUIのTabViewでサイドバーを有効にするにはまず tabViewStyleに sidebarAdaptableを設定します

次に TabSectionを使用してサイドバー内のグループを作成します

タブは宣言された順序でタブバーに表示されますサイドバーでは個別のタブの後にセクションが並びますこの例の場合サイドバーでは 2つのTabSectionの前に検索が表示されます

UIKitで UITabBar Controllerを使用してサイドバーを有効にするには tabBarControllerのmodeに tabSidebarを設定します TabSectionsと似ていますがこちらでは UITabGroupを使用して 1つのグループに属する子タブのコレクションを指定します

動的コンテンツのあるグループはグループの子を直接変更すると更新されます

またサイドバーのセクションにアクションを追加するとよく使う機能に迅速にアクセスできるようになりますこの例ではポッドキャストの新規ステーションの作成を追加しています

タブはドロップ先としても使用できますコレクションに写真を追加する場合などにドラッグ＆ドロップでサイドバーやタブバーのタブに直接追加することができます

SwiftUIでタブへのドロップをサポートするには Tabに対してレシーバーの型を指定して dropDestination モディファイアを使います

UIKitで UITabへのドロップをサポートするには UITabBarController デリゲートの2つのメソッドを実装しますまずタブへのドロップに対して有効な処理が operationForAccepting ItemsFromの DropSessionから返されるようにします

次にデータを受信するために acceptItemsFromの dropSessionからドロップセッションのデータを読み込みますアクションやドロップ先以外にも様々な新しいAPIを使用してサイドバーをカスタマイズできますサイドバーのヘッダとフッタをカスタマイズできるほかタブにスワイプアクションやコンテキストメニューも追加できますまたタブからポップオーバーが出るようにしてタブの場所に関わらずタブと一緒に表示するようにできますタブでアプリを詳細に構成するのは最初のステップに過ぎません次はユーザーによるアプリのパーソナライズを可能にするカスタマイズ機能の追加方法を説明します

カスタマイズを有効にするとユーザーが自身に固有のニーズに基づきサイドバーを構成できるようになります重要でないタブの非表示化やサイドバーのグループの配置の変更などがその例です順番や表示／非表示に関するカスタマイズは自動的に保持されます

タブバーのカスタマイズは iPadOS 16で導入されたツールバーのカスタマイズ機能に似ています

タブバーの項目はドラッグ＆ドロップでカスタマイズできますサイドバーから追加するかタブバーの外にドラッグして削除します

タブにはカスタマイズや表示／非表示を設定する際に参照できる推奨の配置があります

タブバーには3つのセクションがあります

固定のセクションはアプリのユーザーがよくアクセスする重要な領域に使用しますほかのアイテムより前に表示されカスタマイズすることはできません

カスタマイズ可能なセクションの項目は並べ替えできますサイドバーからドラッグ＆ドロップで項目を追加することもできます

検索のようにピンで固定されたセクションは常にタブバーの末尾に表示されます

サイドバーのみの配置を使用するとタブをタブバーに追加することを禁止してサイドバーからのみアクセス可能にすることができます

SwiftUIでユーザーによる TabViewのカスタマイズを可能にするにはまず TabViewCustomizationを TabViewにアタッチしますこれにより TabView内のタブで様々なカスタマイズ機能が使用可能になります

ほかのUIについてもサイドバーのカスタマイズを反映させる必要がある場合は TabViewCustomizationから読み取ってカスタマイズされたデータを追跡させます

カスタマイズの内容を保持するために AppStorageにIDを指定して TabViewCustomizationに追加します

次に customizationIDを関連づけてそのタブをカスタマイズの対象にします

これでカスタマイズが有効になったのでやといったアプリ内で特に重要なタブの表示を固定し常に表示されるようにしたいと思います

個別のタブについてカスタマイズを無効にするには customizationBehavior モディファイアを使用しますこのモディファイアを使用するとサイドバーおよびタブバーにおけるタブの動作を制御できますタブはこのアプリの機能において重要ですそのためサイドバーとタブバーの両方でカスタマイズを無効にします

カスタマイズできないタブには customizationIDは必要ありません

同様にタブを非表示にすることもできアプリ内のどの領域をデフォルト表示するかを柔軟に指定できます defaultVisibility モディファイアでタブをサイドバーやタブバーで非表示にできます

これでとのカスタマイズが無効になったのでアプリにおける重要なタブとカスタマイズ可能なタブが明確に区別されました

UIKitでタブのカスタマイズを有効にする場合 allowsHidingにtrueを設定すると重要でないタブを非表示にできます

現在の表示／非表示の設定は

UITabのisHiddenプロパティで決まります

タブがtabBarControllerに割り当てられると保存されているカスタマイズ内容が適用されます

preferredPlacementプロパティを使用してタブのカスタマイズの動作とタブバーにおける表示を制御できます

グループ内でタブを並べ替えられるようにするには allowsReorderingを trueに設定しますカスタマイズ後の順番を決めるのは displayOrderIdentifiersプロパティです

カスタマイズが完了すると UIKitはこれら2つの UITabBarControllerDelegateメソッドを呼び出してカスタマイズによるタブの表示と順番の変更をユーザーに通知します

カスタマイズによりユーザーはお気に入りのコンテンツへのショートカットを簡単に作成しサイドバーとタブバーを自分のニーズに合わせて調整できますこれらのAPIは各種Appleプラットフォーム対応のタブビューアプリの構築を容易にします次にプラットフォームに関する考慮事項と各プラットフォームで優れた体験を実現するための調整について説明します macOS Sequoiaでは TabViewやTabBarControllerがサイドバーをサポートしている場合標準のMacのサイドバーの外観が適用されますサイドバーのタブは iPadの場合と同様にドラッグ＆ドロップで並べ替えできます

visionOS 2ではタブバーはルートタブ用のウインドウの先頭部分にあるオーナメントに表示されます新しいタブとUIタブのAPIを使用するとシンボルがタブバーに表示される場合はシステムにより自動的に塗りつぶしのバリアントが選択されます iOSと同様です

TabSectionまたは UITabGroupを使用するとサイドバーも追加されグループ内のセカンダリナビゲーション用のグループのコンテンツと並んで表示されます

tvOS 18では SwiftUIアプリで TabViewとTabSection APIを使用して折りたたみ可能な新しいサイドバーを導入できます

タブとUIタブのAPIにより Appleプラットフォーム全体で操作しやすくコンテンツが豊富で高品質なアプリを従来以上に簡単に構築できます次のステップとして新しいタブバーを取り入れて素晴らしいアプリを構築しましょう新しいサイドバーによりアプリがどう向上するか試してみましょうアプリの高度なパーソナライズを可能にするユーザーによるカスタマイズの機能を導入しましょうご視聴ありがとうございましたタブとスペースのどちらが好みかをぜひコメントをお寄せください

4:27 - TabView updates in SwiftUI

TabView {
    Tab("Watch Now", systemImage: "play") {
        WatchNowView()
    }
    Tab("Library", systemImage: "books.vertical") {
        LibraryView()
    }
    // ...
}

4:58 - UITabBarController updates in UIKIt

tabBarController.tabs = [
    UITab(title: "Watch Now", image: UIImage(systemName: "play"), identifier: "Tabs.watchNow") { _ in
       WatchNowViewController()
    },
    UITab(title: "Library", image: UIImage(systemName: "books.vertical"), identifier: "Tabs.library") { _ in
       LibraryViewController()
    },
    // ...
]

5:58 - Search tab

// SwiftUI
Tab(role: .search) {
    SearchView()
}

// UIKit
let searchTab = UISearchTab {
    SearchViewController()
}

6:41 - Adding a sidebar in SwiftUI

TabView {
    Tab("Watch Now", systemImage: "play") {
        // ...
    }
    Tab("Library", systemImage: "books.vertical") {
        // ...
    }
    // ...
    TabSection("Collections") {
        Tab("Cinematic Shots", systemImage: "list.and.film") {
            // ...
        }
        Tab("Forest Life", systemImage: "list.and.film") {
            // ...
        }
        // ...
    }
    TabSection("Animations") {
        // ...
    }
    Tab(role: .search) {
        // ...
    }
}
.tabViewStyle(.sidebarAdaptable)

7:16 - Adding a sidebar in UIKit

let collectionsGroup = UITabGroup(
    title: "Collections",
    image: UIImage(systemName: "folder"),
    identifier: "Tabs.CollectionsGroup"
    children: self.collectionsTabs()) { _ in
        // ...
}

tabBarController.mode = .tabSidebar
tabBarController.tabs = [
    UITab(title: "Watch Now", ...) { _ in
        // ...
    },
    UITab(title: "Library", ...) { _ in
        // ...
    },
    // ...
    collectionsGroup,
    UITabGroup(title: "Animations", ...) { _ in
        // ...
    },
    UISearchTab { _ in
        // ...
    },
]

7:35 - Updating a tab group in UIKit

let collectionsGroup = UITabGroup(
    title: "Collections",
    image: UIImage(systemName: "folder"),
    identifier: "Tabs.CollectionsGroup"
    children: self.collectionsTabs()) { _ in
        // ...
}


let newCollection = UITab(...)
collectionsGroup.children.append(newCollection)

7:45 - Sidebar actions

TabSection(...) {
    // ...
}
.sectionActions {
    Button("New Station", ...) {
        // action
    }
}

// UIKit

let tabGroup = UITabGroup(...)
tabGroup.sidebarActions = [
    UIAction(title: "New Station", ...) { _ in
        // action
    },
]

8:12 - Drop destinations in SwiftUI

Tab(collection.name, image: collection.image) {
    CollectionDetailView(collection)
}
.dropDestination(for: Photo.self) { photos in
    // Add 'photos' to the specified collection
}

8:24 - Drop destinations in UIKit

func tabBarController(
    _ tabBarController: UITabBarController,
    tab: UITab, operationForAcceptingItemsFrom dropSession: any UIDropSession
) -> UIDropOperation {
    session.canLoadObjects(ofClass: Photo.self) ? .copy : .cancel
}

func tabBarController(
    _ tabBarController: UITabBarController,
    tab: UITab, acceptItemsFrom dropSession: any UIDropSession) {
    session.loadObjects(ofClass: Photo.self) { photos in
        // Add 'photos' to the specified collection
    }
}

10:45 - TabView customization in SwiftUI

@AppStorage("MyTabViewCustomization")
private var customization: TabViewCustomization

TabView {
    Tab("Watch Now", systemImage: "play", value: .watchNow) {
        // ...
    }
    .customizationID("Tab.watchNow")
    // ...
    TabSection("Collections") {
        ForEach(MyCollectionsTab.allCases) { tab in
            Tab(...) {
                // ...
            }
            .customizationID(tab.customizationID)
        }
    }
    .customizationID("Tab.collections")
    // ...
}
.tabViewCustomization($customization)

11:40 - Customization behavior and visibility in SwiftUI

Tab("Watch Now", systemImage: "play", value: .watchNow) {
    // ...
}
.customizationBehavior(.disabled, for: .sidebar, .tabBar)


Tab("Optional Tab", ...) {
    // ...
}
.customizationID("Tab.example.optional")
.defaultVisibility(.hidden, for: .tabBar)

12:38 - Tab customization in UIKit

let myTab = UITab(...)
myTab.allowsHiding = true
print(myTab.isHidden)


// .default, .optional, .movable, .pinned, .fixed, .sidebarOnly
myTab.preferredPlacement = .fixed


let myTabGroup = UITabGroup(...)
myTabGroup.allowsReordering = true
myTabGroup.displayOrderIdentifiers = [...]

12:39 - Observing customization changes in UIKit

func tabBarController(_ tabBarController: UITabBarController, visibilityDidChangeFor tabs: [UITab]) {
    // Read 'tab.isHidden' for the updated visibility.
}

func tabBarController(_ tabBarController: UITabBarController, displayOrderDidChangeFor group: UITabGroup) {
    // Read 'group.displayOrderIdentifiers' for the updated order.
}

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

iPadOSのタブとサイドバーの利用体験を向上

関連する章

リソース

関連ビデオ

WWDC22

WWDC20