タブバーの作成
ラベル付きの TabView に画面をまとめます。
「タブバーの作成」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
タブバーの役割
タブバーはアプリの下部に表示され、数個の最上位画面をワンタップで切り替えられるようにします。📱
TabViewを使う
SwiftUIでは、TabViewを使ってこのバーを作ります。複数の画面を保持し、一度に1つだけ表示します。
TabView {
HomeScreen()
SettingsScreen()
}各子ビューが1つのタブになる
TabViewの直下に配置した各ビューが、1つのタブになります。子ビューが2つなら、バーには2つのタブが表示されます。
タブにラベルを付ける
ラベルがないと、タブには役立つ情報が何も表示されません。tabItemモディファイアで各タブにアイコンとテキストを与えます。
HomeScreen()
.tabItem {
Label("Home", systemImage: "house")
}tabItem内でLabelを使う
tabItemの中には通常、Labelを配置します。タイトルとSF Symbolを組み合わせることで、すっきりしたネイティブな見た目になります。
2つのタブの例
ここでは完全なTabViewにホームタブと設定タブを表示します。それぞれに独自のアイコンと画面があります。
TabView {
HomeScreen()
.tabItem { Label("Home", systemImage: "house") }
SettingsScreen()
.tabItem { Label("Settings", systemImage: "gear") }
}一度に1つの画面
TabViewはすべてのタブを保持しますが、表示するのは選択中のタブだけです。別のタブをタップすると、表示画面がすぐに切り替わります。
TabViewを配置する場所
アプリのルートビューをTabViewにして、どのタブがアクティブでもバーが表示されるようにします。
タブは少数に保つ
iOSでは、最大5つのタブまで無理なく表示できます。ユーザーが迷わないように、明確なセクションを3つから5つに絞りましょう。✨
タブは独立している
各タブは独自のコンテンツを管理します。1つのタブでスクロールや編集をしても、切り替えたときにほかのタブがリセットされることはありません。
自然な操作感をそのまま得られる
TabViewは組み込み機能なので、ユーザーがiOSに期待する標準的な見た目、ぼかし、アニメーションを利用できます。
簡単な確認
タブにアイコンとタイトルを設定する方法を確認しましょう。
まとめ：タブバーを作る
TabViewは各子ビューをタブに変え、tabItemはすべてのタブにラベルを付けます。ユーザーはワンタップで画面を切り替えられます。🎉
AI チューターと学ぶ Swift — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「タブバーの作成」レッスンは無料ですか？
はい。「タブバーの作成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「タブバーの作成」で何を学びますか？
ラベル付きの TabView に画面をまとめます。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「タブバーの作成」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。