Swift Academy · Pelajaran

Dasar-Dasar Protocol Layout

Implementasikan sizeThatFits dan placeSubviews.

Dasar-Dasar Protocol Layout adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Mengapa Tata Letak Kustom?

SwiftUI menyediakan HStack, VStack, dan ZStack, tetapi terkadang Anda memerlukan logika penataan yang tidak dapat mereka ungkapkan—menu radial, tata letak aliran, atau kisi bergaya susunan bata.

Protokol tata letak memungkinkan Anda menulis logika tersebut sambil tetap menyusunnya dengan tampilan SwiftUI biasa.

Protokol Tata Letak

Layout memerlukan dua metode: sizeThatFits (seberapa besar ukuran saya?) dan placeSubviews (di mana setiap anak ditempatkan?).

Anda membuat tipe nilai yang memenuhi protokol tersebut dan menggunakannya seperti tumpukan bawaan lainnya.

struct MyLayout: Layout {
    func sizeThatFits(proposal: ProposedViewSize,
                      subviews: Subviews,
                      cache: inout ()) -> CGSize { .zero }
    func placeSubviews(in bounds: CGRect,
                       proposal: ProposedViewSize,
                       subviews: Subviews,
                       cache: inout ()) { }
}

Menggunakan Tata Letak Kustom

Sebuah nilai Layout bertindak sebagai wadah. Anda meneruskan tampilan anak di dalam fungsi penutupan bagian akhir, persis seperti pada tumpukan.

var body: some View {
    MyLayout {
        Text("One")
        Text("Two")
        Text("Three")
    }
}

ProposedViewSize

Induk mengusulkan ukuran kepada tata letak Anda melalui ProposedViewSize. Nilai width dan height-nya bersifat opsional: nil berarti "tidak ditentukan, pilih ukuran ideal Anda".

Nilai khusus .zero, .infinity, dan .unspecified menguji ukuran minimum, maksimum, dan ideal.

func sizeThatFits(proposal: ProposedViewSize,
                  subviews: Subviews,
                  cache: inout ()) -> CGSize {
    let width = proposal.width ?? 0
    return CGSize(width: width, height: 44)
}

sizeThatFits secara Mendetail

sizeThatFits mengembalikan ukuran yang diinginkan tata letak Anda berdasarkan suatu usulan. SwiftUI mungkin memanggilnya beberapa kali dengan usulan berbeda untuk memahami fleksibilitas Anda.

func sizeThatFits(proposal: ProposedViewSize,
                  subviews: Subviews,
                  cache: inout ()) -> CGSize {
    // Sum child ideal sizes for a simple horizontal stack
    let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
    let w = sizes.reduce(0) { $0 + $1.width }
    let h = sizes.map(\.height).max() ?? 0
    return CGSize(width: w, height: h)
}

Koleksi Subviews

Subviews adalah koleksi proksi untuk setiap anak. Setiap proksi menjawab sizeThatFits dan menyediakan prioritas tata letak serta nilai khusus.

Anda tidak pernah melihat tampilan sebenarnya—hanya proksi pengukuran ini.

for subview in subviews {
    let size = subview.sizeThatFits(.unspecified)
    print(size)
}

placeSubviews

placeSubviews menetapkan posisi setiap anak di dalam persegi panjang bounds yang diberikan kepada Anda.

Panggil place(at:anchor:proposal:) pada setiap proksi sub-tampilan.

func placeSubviews(in bounds: CGRect,
                   proposal: ProposedViewSize,
                   subviews: Subviews,
                   cache: inout ()) {
    var x = bounds.minX
    for subview in subviews {
        let size = subview.sizeThatFits(.unspecified)
        subview.place(at: CGPoint(x: x, y: bounds.midY),
                      anchor: .leading,
                      proposal: .unspecified)
        x += size.width
    }
}

Jangkar Saat Menempatkan

Parameter anchor menentukan titik anak mana yang ditempatkan pada posisi yang Anda berikan. .topLeading menempatkan berdasarkan sudut kiri atas; .center memusatkan anak pada titik tersebut.

subview.place(at: CGPoint(x: 0, y: 0),
              anchor: .topLeading,
              proposal: .unspecified)

Bounds Tidak Selalu Berada di Titik Asal

Persegi panjang bounds mungkin tidak dimulai dari (0,0). Selalu posisikan secara relatif terhadap bounds.minX dan bounds.minY, bukan terhadap nol absolut.

let startX = bounds.minX // not 0
let startY = bounds.minY

Tata Letak Minimal dengan Jarak Sama

Jika semua bagian digabungkan, berikut tata letak yang menata anak dari kiri ke kanan tanpa jarak. Kedua metode tetap konsisten: ukuran yang dilaporkan sesuai dengan penempatannya.

struct SimpleHStack: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
        return CGSize(width: sizes.reduce(0){ $0 + $1.width },
                      height: sizes.map(\.height).max() ?? 0)
    }
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var x = bounds.minX
        for s in subviews {
            let size = s.sizeThatFits(.unspecified)
            s.place(at: CGPoint(x: x, y: bounds.minY), anchor: .topLeading, proposal: .unspecified)
            x += size.width
        }
    }
}

Konsistensi Adalah Tanggung Jawab Anda

SwiftUI mempercayai bahwa kedua metode Anda selaras. Jika placeSubviews menggunakan ruang yang lebih besar daripada yang dilaporkan sizeThatFits, anak mungkin terpotong atau saling tumpang tindih.

Gunakan perhitungan geometri yang sama pada kedua metode.

Pemeriksaan Singkat: Dasar-Dasar Tata Letak

Uji pemahaman Anda tentang protokol tata letak.

Ringkasan: Dasar-Dasar Protokol Tata Letak

Protokol Layout mengubah logika penataan kustom menjadi wadah yang dapat digunakan kembali. sizeThatFits melaporkan ukuran Anda untuk sebuah ProposedViewSize, sedangkan placeSubviews memosisikan setiap proksi anak di dalam bounds menggunakan place(at:anchor:proposal:).

Usulan membawa dimensi opsional, bounds dapat bergeser dari titik asal, dan kedua metode harus tetap konsisten secara geometris. Selanjutnya, kita akan mengukur sub-tampilan secara mendalam.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Protocol Layout” gratis?

Ya — teks lengkap “Dasar-Dasar Protocol Layout” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar Protocol Layout”?

Implementasikan sizeThatFits dan placeSubviews. Kamu berlatih Swift 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 Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift 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 1 dari 4.

Berapa lama pelajaran “Dasar-Dasar Protocol 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 Swift Academy ini?

Ya. Setiap pelajaran Swift 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.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy