Swift Academy · Ders

Layout Protokolü Temelleri

sizeThatFits ve placeSubviews işlevlerini uygulayın.

Layout Protokolü Temelleri, CoddyKit'te ücretsiz bir Swift Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Swift Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Swift Academy kursu toplamda 4 dersten oluşur.

Özel Düzen Neden Kullanılır

SwiftUI, HStack, VStack ve ZStack ile birlikte gelir; ancak bazen bunların ifade edemediği bir yerleşim mantığına ihtiyaç duyarsınız: radyal menüler, akış düzenleri ve tuğla döşemeli ızgaralar.

Düzen protokolü, normal SwiftUI görünümleriyle birlikte oluşturmaya devam ederken bu mantığı yazmanıza olanak tanır.

Düzen Protokolü

Layout iki yöntem gerektirir: sizeThatFits (boyutum ne olmalı?) ve placeSubviews (her alt görünüm nereye gitmeli?).

Bir değer türünü bu protokole uyarlar ve onu yerleşik yığınlar gibi kullanırsınız.

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

Özel Düzen Kullanma

Bir Layout değeri kapsayıcı görevi görür. Alt görünümleri, tıpkı bir yığında olduğu gibi sondaki kapanımına geçirirsiniz.

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

ProposedViewSize

Üst öğe, ProposedViewSize aracılığıyla düzeninize bir boyut önerir. Bunun width ve height değerleri isteğe bağlıdır: nil, "belirtilmemiş, ideal olanınızı seçin" anlamına gelir.

.zero, .infinity ve .unspecified özel değerleri, en küçük, en büyük ve ideal boyutları yoklar.

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

sizeThatFits Ayrıntıları

sizeThatFits, bir öneri verildiğinde düzeninizin istediği boyutu döndürür. SwiftUI, esnekliğinizi anlamak için onu farklı önerilerle birden çok kez çağırabilir.

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)
}

Alt Görünümler Koleksiyonu

Subviews, her alt görünüm için bir vekiller koleksiyonudur. Her vekil sizeThatFits çağrısını yanıtlar ve düzen öncelikleriyle özel değerleri sunar.

Gerçek görünümleri hiçbir zaman görmezsiniz; yalnızca bu ölçüm vekillerini görürsünüz.

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

placeSubviews

placeSubviews, size verilen bounds dikdörtgeninin içindeki her alt görünüme bir konum atar.

Her alt görünüm vekilinde place(at:anchor:proposal:) çağrısını yapın.

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
    }
}

Yerleştirme Sırasında Çapalar

anchor parametresi, çocuğun hangi noktasının verdiğiniz konuma yerleşeceğini belirtir. .topLeading, sol üst köşeye göre yerleştirir; .center, çocuğu noktanın merkezine hizalar.

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

Sınırlar Her Zaman Başlangıç Noktasında Değildir

bounds dikdörtgeni (0,0) noktasından başlamayabilir. Her zaman bounds.minX ve bounds.minY değerlerine göre konumlandırın; mutlak sıfırı kullanmayın.

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

En Az Eşit Aralıklı Düzen

Hepsini bir araya getirdiğimizde, alt görünümleri aralık bırakmadan soldan sağa yerleştiren bir düzen elde ederiz. İki yöntem tutarlı kalır: bildirilen boyut, yerleştirmeyle eşleşir.

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
        }
    }
}

Tutarlılığı Sağlamak Sizin Göreviniz

SwiftUI, iki yönteminizin birbiriyle uyumlu olacağına güvenir. placeSubviews, sizeThatFits tarafından bildirilen alandan daha fazlasını kullanırsa alt görünümler kırpılabilir veya üst üste binebilir.

Geometri hesaplamalarını her iki yöntem arasında paylaşın.

Kısa Kontrol: Düzen Temelleri

Düzen protokolünü ne kadar kavradığınızı sınayın.

Özet: Düzen Protokolü Temelleri

Layout protokolü, özel yerleşim mantığını yeniden kullanılabilir bir kapsayıcıya dönüştürür. sizeThatFits, bir ProposedViewSize için boyutunuzu bildirir ve placeSubviews, her alt görünüm vekilini bounds içinde place(at:anchor:proposal:) kullanarak konumlandırır.

Öneriler isteğe bağlı boyutlar taşır, sınırlar başlangıç noktasından ötelenmiş olabilir ve iki yöntem geometrik olarak tutarlı kalmalıdır. Bir sonraki adımda alt görünümleri derinlemesine ölçeceğiz.

Sıkça Sorulan Sorular

“Layout Protokolü Temelleri” dersi ücretsiz mi?

Evet — “Layout Protokolü Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Swift Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Swift Academy kursu toplamda 4 dersten oluşur.

“Layout Protokolü Temelleri” dersinde ne öğreneceğim?

sizeThatFits ve placeSubviews işlevlerini uygulayın. Swift Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Swift Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Swift Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Layout Protokolü Temelleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Swift Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Swift Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Swift Academy Sayfasına Dön