SwiftUI Academy · บทเรียน

การสร้างแถบแท็บ

จัดกลุ่มหน้าจอไว้ภายใต้ TabView พร้อมป้ายกำกับ

การสร้างแถบแท็บ เป็นบทเรียน SwiftUI Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน SwiftUI Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

What a Tab Bar Does

A tab bar sits at the bottom of your app and lets people jump between a few top-level screens with one tap. 📱

Meet TabView

In SwiftUI you build that bar with TabView. It holds several screens and shows only one at a time.

TabView {
    HomeScreen()
    SettingsScreen()
}

Each Child Is a Tab

Every view placed directly inside TabView becomes one tab. Two child views means two tabs in the bar.

Labeling a Tab

Without a label a tab shows nothing useful. The tabItem modifier gives each tab its icon and text.

HomeScreen()
    .tabItem {
        Label("Home", systemImage: "house")
    }

Using Label Inside tabItem

Inside tabItem you usually put a Label, which pairs a title with an SF Symbol for a clean, native look.

A Two-Tab Example

Here a full TabView shows a Home tab and a Settings tab, each with its own icon and screen.

TabView {
    HomeScreen()
        .tabItem { Label("Home", systemImage: "house") }
    SettingsScreen()
        .tabItem { Label("Settings", systemImage: "gear") }
}

One Screen at a Time

TabView keeps every tab alive but only shows the selected one. Tapping another tab swaps the visible screen instantly.

Where to Place TabView

Make TabView the root view of your app so the bar stays visible no matter which tab is active.

Keep Tabs Few

iOS shows up to five tabs comfortably. Aim for three to five clear sections so users never feel lost. ✨

Tabs Are Independent

Each tab manages its own content. Scrolling or editing in one tab does not reset the others when you switch.

Native Feel for Free

Because TabView is built in, you get the standard look, blur, and animations users already expect from iOS.

Quick Check

Let us check how you give a tab its icon and title.

Recap: Building a Tab Bar

A TabView turns each child view into a tab, and tabItem gives every tab its label so users move between screens with one tap. 🎉

คำถามที่พบบ่อย

บทเรียน “การสร้างแถบแท็บ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างแถบแท็บ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส SwiftUI Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างแถบแท็บ”

จัดกลุ่มหน้าจอไว้ภายใต้ TabView พร้อมป้ายกำกับ คุณปฏิบัติ SwiftUI Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน SwiftUI Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน SwiftUI Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างแถบแท็บ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน SwiftUI Academy นี้ได้ไหม

ได้ บทเรียน SwiftUI Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ SwiftUI Academy