Swift Academy · Ders

Akış Düzeni Oluşturma

Ögeleri satırlar boyunca dinamik olarak kaydırın.

Akış Düzeni Oluşturma, CoddyKit'te ücretsiz bir Swift Academy dersidir. Bu, 4 dersinin 3. 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.

Akış Düzeni Nedir?

Akış düzeni, öğeleri soldan sağa yerleştirir ve bir sonraki öğe kullanılabilir genişliği aşacaksa yeni bir satıra geçirir; etiket parçacıkları veya sözcük sarmalama buna örnektir.

Plan

Satır sonlarını ortak bir yardımcıda hesaplayacak, sizeThatFits içinden toplam yüksekliği döndürecek ve aynı hesaplamayı placeSubviews içinde yeniden kullanacağız. Mantığı paylaşmak, iki yöntemin tutarlı kalmasını sağlar.

Bir Yerleştirmeyi Modelleme

Küçük bir yapı, her alt görünümün nereye gideceğini kaydeder. Tüm yerleştirmeleri önceden hesaplamak, her iki protokol yöntemini de basitleştirir.

struct Placement {
    let index: Int
    let point: CGPoint
    let size: CGSize
}

Sarmalama Algoritması

Alt görünümler üzerinde ilerleyerek geçerli x değerini izleyin. Bir alt görünüm en büyük genişliği aşacaksa x değerini sıfırlayın ve satır yüksekliği ile boşluk kadar aşağı inin.

func layout(_ subviews: Subviews, maxWidth: CGFloat) -> (placements: [Placement], height: CGFloat) {
    var placements: [Placement] = []
    var x: CGFloat = 0, y: CGFloat = 0, rowHeight: CGFloat = 0
    let spacing: CGFloat = 8
    for (i, s) in subviews.enumerated() {
        let size = s.sizeThatFits(.unspecified)
        if x + size.width > maxWidth, x > 0 {
            x = 0; y += rowHeight + spacing; rowHeight = 0
        }
        placements.append(Placement(index: i, point: CGPoint(x: x, y: y), size: size))
        x += size.width + spacing
        rowHeight = max(rowHeight, size.height)
    }
    return (placements, y + rowHeight)
}

sizeThatFits Uygulaması

sizeThatFits, algoritmayı önerilen genişlik üzerinde çalıştırır ve önerinin genişliğini hesaplanan toplam yükseklikle birlikte döndürür.

func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
    let maxWidth = proposal.width ?? .infinity
    let result = layout(subviews, maxWidth: maxWidth)
    return CGSize(width: maxWidth == .infinity ? result.placements.map { $0.point.x + $0.size.width }.max() ?? 0 : maxWidth,
                  height: result.height)
}

placeSubviews Uygulaması

placeSubviews aynı algoritmayı çalıştırır, ardından her yerleştirmenin konumunu bounds.origin kadar kaydırır ve place çağrısını yapar.

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    let result = layout(subviews, maxWidth: bounds.width)
    for p in result.placements {
        let pt = CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y)
        subviews[p.index].place(at: pt, anchor: .topLeading,
                                proposal: ProposedViewSize(p.size))
    }
}

Tam FlowLayout Türü

Parçaları birleştirdiğinizde eksiksiz ve yeniden kullanılabilir bir akış düzeni elde edersiniz. Paylaşılan layout yardımcısı, boyut ile yerleştirmenin uyuşmasını garanti eder.

struct FlowLayout: Layout {
    var spacing: CGFloat = 8
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let r = layout(subviews, maxWidth: proposal.width ?? .infinity)
        return CGSize(width: proposal.width ?? 0, height: r.height)
    }
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let r = layout(subviews, maxWidth: bounds.width)
        for p in r.placements {
            subviews[p.index].place(at: CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y),
                                    anchor: .topLeading, proposal: ProposedViewSize(p.size))
        }
    }
}

Akış Düzenini Kullanma

Her kapsayıcı gibi ekleyin. Genişlik daraldıkça etiketler otomatik olarak sarmalanır.

var body: some View {
    FlowLayout {
        ForEach(tags, id: \.self) { tag in
            Text(tag)
                .padding(8)
                .background(.blue.opacity(0.2))
                .clipShape(Capsule())
        }
    }
}

Her Satırdaki İlk Öğeyi İşleme

x > 0 koşulu, bir satırdaki ilk öğeden önce sarmalama yapılmasını önler. Bu koşul olmadan kapsayıcıdan geniş bir öğe sonsuz döngüye girebilir veya gereksiz yere boş bir satıra taşınabilir.

if x + size.width > maxWidth, x > 0 {
    // wrap only if the row already has content
}

Boşluk Seçimleri

Burada boşluk, varsayılan değere sahip saklanan bir özelliktir. Üretim kodunda, sabit kodlanmış bir değer yerine sistem ölçülerine uymak için her alt görünümün spacing tercihini okuyun.

var spacing: CGFloat = 8 // configurable per instance

Kenar Durumlarını Sınama

Sıfır öğe, tek bir dev öğe ve çok sayıda küçük öğe ile sınayın. Doğru bir akış düzeni boş içerik için sıfır yükseklik bildirir ve tek bir aşırı büyük alt görünümü hiçbir zaman kırpmaz.

Kısa Kontrol: Akış Düzeni

Sarmalama algoritması konusundaki anlayışınızı sınayın.

Özet: Akış Düzeni Oluşturma

Bir akış düzeni, ilerleyen x değerini izleyerek öğeleri sarmalar ve bir sonraki alt görünüm taşacaksa yeni bir satıra geçmek üzere bu değeri sıfırlar. Paylaşılan bir yardımcı, tüm yerleştirmeleri ve toplam yüksekliği hesaplayarak sizeThatFits ile placeSubviews yöntemlerinin tutarlı kalmasını sağlar.

Yerleştirmeleri bounds.origin kadar kaydırın, her satırdaki ilk öğeyi özel olarak ele alın ve boş, aşırı büyük ve çok öğeli durumları sınayın. Sonuç, yeniden kullanılabilir bir sarmalama kapsayıcısıdır.

Sıkça Sorulan Sorular

“Akış Düzeni Oluşturma” dersi ücretsiz mi?

Evet — “Akış Düzeni Oluşturma” 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.

“Akış Düzeni Oluşturma” dersinde ne öğreneceğim?

Ögeleri satırlar boyunca dinamik olarak kaydırı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 3. dersidir.

“Akış Düzeni Oluşturma” 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