Swift Academy · บทเรียน

การวัดมุมมองย่อย

สอบถามขนาดมุมมองย่อยระหว่างจัดวาง

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

การวัดขนาดเป็นตัวขับเคลื่อนการจัดวาง

ก่อนจะวางลูกได้ คุณต้อง วัดขนาด ลูกเหล่านั้นก่อน การจัดวางของ SwiftUI เป็นการเจรจา มุมมองแม่เสนอขนาด มุมมองลูกตอบกลับ และคุณต้องประสานคำตอบเหล่านั้นเข้าด้วยกัน

การถามขนาดของมุมมองย่อย

พร็อกซีแต่ละตัวใน Subviews ตอบ sizeThatFits(_:) สำหรับ ProposedViewSize ที่กำหนด พร็อกซีจะคืนค่าขนาดที่ลูกตัวนั้นจะใช้ภายใต้ข้อเสนอดังกล่าว

let size = subview.sizeThatFits(.unspecified)

ข้อเสนอสำหรับตรวจสอบทั้งสามแบบ

หากต้องการทราบความยืดหยุ่นของลูก ให้ตรวจสอบสามแบบ ได้แก่ .zero แสดงขนาดต่ำสุด .infinity แสดงขนาดสูงสุด และ .unspecified แสดงขนาด ideal

let minSize = subview.sizeThatFits(.zero)
let maxSize = subview.sizeThatFits(.infinity)
let ideal = subview.sizeThatFits(.unspecified)

การเสนอความกว้างที่กำหนด

สำหรับข้อความที่ตัดขึ้นบรรทัดใหม่ ให้เสนอความกว้างที่แน่นอนและปล่อยให้ความสูงเป็น nil ลูกจะรายงานความสูงที่ต้องใช้สำหรับความกว้างนั้น

let proposal = ProposedViewSize(width: 200, height: nil)
let fit = subview.sizeThatFits(proposal)

ลำดับความสำคัญของเลย์เอาต์

มุมมองย่อยแต่ละรายการจะแสดงค่า priority (กำหนดด้วย .layoutPriority) เมื่อพื้นที่มีจำกัด ให้ขนาดในอุดมคติแก่มุมมองย่อยที่มีลำดับความสำคัญสูงกว่าก่อน

for subview in subviews {
    let p = subview.priority
    // distribute space to higher priority first
}

การอ่านค่าที่กำหนดเอง

มุมมองย่อยสามารถเก็บข้อมูลที่มีชนิดกำกับไว้ผ่าน LayoutValueKey เลย์เอาต์จะอ่านค่า subview[MyKey.self] เพื่อใช้กำหนดการจัดวาง เช่น ระยะห่างเฉพาะของแต่ละรายการ

private struct RankKey: LayoutValueKey {
    static let defaultValue: Int = 0
}
let rank = subviews[0][RankKey.self]

การกำหนดค่าเลย์เอาต์

มุมมองจะกำหนดค่าเลย์เอาต์ด้วยตัวปรับแต่ง layoutValue(key:value:) ทำให้มุมมองย่อยส่งคำแนะนำไปยังเลย์เอาต์ของคุณได้

Text("Featured").layoutValue(key: RankKey.self, value: 10)

ระยะห่างระหว่างมุมมองย่อย

มุมมองย่อยจะแสดงค่ากำหนดระยะห่างผ่าน spacing ใช้ subview.spacing.distance(to:along:) เพื่อรับระยะห่างที่แนะนำระหว่างมุมมองย่อยสองรายการที่อยู่ติดกันตามแกนหนึ่ง

let gap = subviews[0].spacing.distance(
    to: subviews[1].spacing, along: .horizontal)

การสะสมขนาด

เลย์เอาต์แนวนอนจะรวมความกว้างของมุมมองย่อยและใช้ความสูงของมุมมองที่สูงที่สุด การวัดขนาดมุมมองย่อยทั้งหมดก่อนช่วยให้คุณคำนวณขนาดคอนเทนเนอร์ได้ก่อนจัดวางสิ่งใด

let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
let totalWidth = sizes.reduce(0) { $0 + $1.width }
let maxHeight = sizes.map(\.height).max() ?? 0

การวัดขนาดซ้ำระหว่างการจัดวาง

ใน placeSubviews คุณต้องวัดขนาดใหม่ (หรือนำขนาดที่แคชไว้กลับมาใช้) เพื่อให้ตำแหน่งตรงกับขนาดที่รายงาน การวัดขนาดเป็นการเรียกพร็อกซีที่มีต้นทุนต่ำ ไม่ใช่การเรนเดอร์จริง

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    for s in subviews {
        let size = s.sizeThatFits(.unspecified)
        // use size to position s
        _ = size
    }
}

การเคารพข้อเสนอของมุมมองแม่

ปฏิบัติตามข้อเสนอที่ได้รับเสมอ หากมุมมองแม่เสนอความกว้างแบบตายตัว ให้จัดวางมุมมองย่อยภายในความกว้างนั้น อย่าปล่อยให้ล้นออกไปโดยไม่แจ้ง เพราะเลย์เอาต์จะถูกตัด

let containerWidth = proposal.width ?? .infinity

ตรวจสอบสั้น ๆ: การวัดขนาด

ทดสอบความเข้าใจเกี่ยวกับการวัดขนาดมุมมองย่อย

ทบทวน: การวัดขนาดมุมมองย่อย

การวัดขนาดคือหัวใจของเลย์เอาต์แบบกำหนดเอง ตรวจสอบมุมมองย่อยด้วย .zero, .infinity และ .unspecified เพื่อเรียนรู้ขนาดต่ำสุด/สูงสุด/ในอุดมคติ เสนอความกว้างที่เป็นรูปธรรมสำหรับเนื้อหาที่ขึ้นบรรทัดใหม่ และเคารพลำดับความสำคัญของเลย์เอาต์กับค่ากำหนดระยะห่าง

ค่า LayoutValueKey แบบกำหนดเองช่วยให้มุมมองย่อยส่งคำแนะนำได้ วัดขนาดอย่างสม่ำเสมอในเมธอดของโพรโทคอลทั้งสอง เพื่อให้ขนาดที่รายงานและการจัดวางสอดคล้องกันเสมอ

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

บทเรียน “การวัดมุมมองย่อย” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การวัดมุมมองย่อย”

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

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

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

บทเรียน “การวัดมุมมองย่อย” ใช้เวลานานแค่ไหน

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

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

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

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

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