タブ項目とバッジ
アイコン、タイトル、通知バッジを追加します。
「タブ項目とバッジ」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Polishing Each Tab
Now you will make each tab clearer with the right icon, a short title, and a notification badge when needed. 🎨
Icons with SF Symbols
Pass an SF Symbol name to Label so each tab gets a crisp, scalable icon that matches the system style.
Label("Profile", systemImage: "person.crop.circle")Keep Titles Short
Tab titles sit in a tight space, so keep them to one clear word like Home, Search, or Profile.
Selected vs Unselected
iOS automatically highlights the active tab. Many symbols even swap to a filled variant when selected, with no code from you.
Choosing Good Symbols
Pick symbols whose meaning is obvious. A house for home and a gear for settings need no explanation.
What a Badge Shows
A badge is the small red bubble on a tab that signals unread items, like new messages waiting for you. 🔴
Adding a Number Badge
The badge modifier puts a count on a tab. Pass a number and the bubble appears automatically.
InboxScreen()
.tabItem { Label("Inbox", systemImage: "tray") }
.badge(3)Text Badges
You can also pass a string to badge, useful for short markers like "New" instead of a count.
.badge("New")Hiding a Badge
Set the badge to zero or an empty value and SwiftUI hides the bubble, so it appears only when it matters.
.badge(unreadCount)Driving Badges from State
Bind the badge to a state value so the count updates live as new items arrive or get read.
Badges Demand Attention
Use badges sparingly. A bubble pulls the eye, so reserve it for things the user truly needs to notice. 👀
Quick Check
Let us check how to show an unread count on a tab.
Recap: Tab Items & Badges
Clear icons and short titles make tabs scannable, and the badge modifier surfaces counts or markers right when users need them. 🎉
よくある質問
「タブ項目とバッジ」レッスンは無料ですか？
はい。「タブ項目とバッジ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「タブ項目とバッジ」で何を学びますか？
アイコン、タイトル、通知バッジを追加します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「タブ項目とバッジ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。