Protokol Layout
Implementasikan sizeThatFits dan placeSubviews.
Protokol Layout adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Beyond Stacks
When stacks and grids are not enough, the Layout protocol lets you write your own container that positions children exactly how you want. 🧩
Two Required Methods
Conform to Layout by implementing sizeThatFits and placeSubviews, the two steps every custom layout needs.
struct MyLayout: Layout {
func sizeThatFits(...) -> CGSize { ... }
func placeSubviews(...) { ... }
}Sizing Yourself
In sizeThatFits, you measure the children and return the total size your container wants to occupy.
func sizeThatFits(proposal: ProposedViewSize,
subviews: Subviews,
cache: inout ()) -> CGSize {
CGSize(width: 200, height: 100)
}The Proposal
The ProposedViewSize is the space the parent offers. You decide how to use or shrink within it.
let width = proposal.width ?? 0The Subviews Proxy
The subviews argument is a collection of proxies. Ask each one for its preferred size before placing it.
for view in subviews {
let size = view.sizeThatFits(.unspecified)
}Placing Children
In placeSubviews, you loop and call place on each subview with an exact point and an anchor.
func placeSubviews(in bounds: CGRect,
proposal: ProposedViewSize,
subviews: Subviews,
cache: inout ()) {
}The place Call
Each place call sets the origin, the anchor point, and the size proposal for that one child.
view.place(at: point,
anchor: .topLeading,
proposal: .unspecified)Walk a Cursor
A simple layout keeps an x cursor, placing each child then advancing by its width plus spacing.
var x = bounds.minX
for view in subviews {
let s = view.sizeThatFits(.unspecified)
view.place(at: CGPoint(x: x, y: bounds.minY),
proposal: .unspecified)
x += s.width
}Using Your Layout
A Layout type is used just like a stack: wrap your views in it and they get arranged by your code.
MyLayout {
Text("One")
Text("Two")
}Optional Cache
The cache parameter lets you store expensive measurements between passes; use Void when you do not need it.
It Is Value-Based
Because a Layout is a struct, SwiftUI can re-run it cheaply, keeping custom containers fast and predictable. ⚡
Quick Check
Recall the two methods every Layout must implement.
Recap
You can now build a custom container with the Layout protocol by measuring in sizeThatFits and positioning in placeSubviews. 🎉
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Protokol Layout” gratis?
Ya — teks lengkap “Protokol Layout” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Protokol Layout”?
Implementasikan sizeThatFits dan placeSubviews. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?
Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Protokol Layout” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?
Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.