SwiftUI Academy · บทเรียน

ชนิดแบบไดนามิกและแบบอักษรปรับขนาด

รองรับข้อความขนาดใหญ่โดยไม่ทำให้เลย์เอาต์เสีย

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

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

What Is Dynamic Type?

Dynamic Type lets users pick their preferred text size system-wide. Your app should respect it, not force one fixed size. 🔤

Use Text Styles

Pick semantic text styles like .title or .body instead of fixed point sizes. These scale automatically with the user's setting.

Text("Welcome")
    .font(.title)
Text("Details here")
    .font(.body)

Why Not Fixed Sizes

A hard-coded .font(.system(size: 17)) ignores the user's choice and stays small. Text styles adapt; fixed numbers don't.

Text("Stuck small")
    .font(.system(size: 17))

Scaling Custom Fonts

Have a brand font? Use .font(.custom:size:relativeTo:) so it still scales with a chosen text style.

Text("Brand")
    .font(.custom("Avenir", size: 17, relativeTo: .body))

The ScaledMetric Wrapper

Need a spacing or image size to grow with text? @ScaledMetric scales any number alongside Dynamic Type.

@ScaledMetric var iconSize = 24
Image(systemName: "star").frame(width: iconSize)

Let Text Wrap

Big text needs room. Avoid lineLimit(1) on important labels, or long words will be cut off with an ellipsis.

Text(longTitle)
    .lineLimit(2)

Allow Tighter Fitting

When space is truly tight, minimumScaleFactor lets text shrink a little before truncating, keeping it readable.

Text(price)
    .minimumScaleFactor(0.7)

Preview Large Sizes

Use dynamicTypeSize in a preview to simulate the largest setting and catch broken layouts early.

#Preview {
    ContentView()
        .dynamicTypeSize(.accessibility3)
}

Cap the Range If Needed

You can limit how far text scales with dynamicTypeSize(...), but cap sparingly so you don't shut out users who need more.

VStack { }
    .dynamicTypeSize(...DynamicTypeSize.accessibility1)

Stacks Over Fixed Frames

Prefer flexible stacks over rigid heights. A fixed frame can clip large text, while a stack grows to fit.

Test at Both Ends

Check your app at the smallest and the largest Dynamic Type sizes. If both read well, most users in between will too.

Quick Check

You want a custom brand font to grow with the user's text size. What do you use?

Recap

You made text adapt: choose semantic text styles, scale custom fonts and metrics, let text wrap, and test the largest size. 👍

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

บทเรียน “ชนิดแบบไดนามิกและแบบอักษรปรับขนาด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ชนิดแบบไดนามิกและแบบอักษรปรับขนาด”

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

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

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

บทเรียน “ชนิดแบบไดนามิกและแบบอักษรปรับขนาด” ใช้เวลานานแค่ไหน

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

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

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

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

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