Протокол Layout
Реализуйте sizeThatFits и placeSubviews.
«Протокол Layout» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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. 🎉
Часто задаваемые вопросы
Урок «Протокол Layout» бесплатный?
Да — полный текст урока «Протокол Layout» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.
Чему я научусь в уроке «Протокол Layout»?
Реализуйте sizeThatFits и placeSubviews. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать SwiftUI Academy?
Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Протокол Layout»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке SwiftUI Academy?
Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.