SwiftUI ile GridView Oluşturma

Merhaba bugünkü yazımızda çeşitli uygulamalarda karşımıza çıkan GridView yapısını inceleyeceğiz ve SwiftUI ile kendimiz oluşturacağız. GridView’ın zihnimizde canlanması için örnek olarak telefonlarımızdaki galeri uygulamasını, birçoğumuzun her gün bir kaç kere ziyaret ettiği Instagram uygulamasındaki profil sayfalarını veya pandemi ile hayatımızda daha çok yer edinen online alışveriş uygulamalarındaki yapıları örnek verebiliriz. Özetle bir ızgara yapısı.

SwiftUI bize bu ızgara tabanlı düzenleri oluşturabilmemiz için iki opsiyon sunuyor. Bu opsiyonlar “LazyVGrid” ve “LazyHGrid”. Bu iki seçenek arasındaki tek fark elementlerin yerleştirme yönünden kaynaklanıyor. “LazyVGrid” adında ki “Vertical”ın “V” harfinden de anlayacağımız üzere bize yukarı ve aşağı kayan dikey yönlü bir ızgara görünümü sağlar. “LazyHGrid” ise adında ki “Horizantal”ın “H” harfinden de anlayacağımız üzere bize sağa ve sola kayan yatay yönlü bir ızgara görünümü sağlar.

Neden “Lazy”

GridView için SwiftUI’ın bize sunduğu bu seçeneklerdeki isimlendirme sizin de dikkatinizi çekmiştir: “Lazy”. Peki neden?

Swift’de “lazy” ile bildirilen bir özellik çağrıldığında ilk değeri hesapladığı için ihtiyaç duymadığı sürece yeni bir değer üretmez. SwiftUI’da ise “lazy” ön adıyla çağırdığımız bu ızgara oluşturucu yapılar sadece ekranda görünecek görünümleri hesaplar ve oluştururlar. Ekranda görüntülenmemesi gerekmeyen görünümleri veya verilerle uğraşmadığı için yüksek sayıda veri ile çalışırken verimliliği korurlar.

developer.apple.com’da da özetlendiği üzere; “Grid tembeldir çünkü grid görünümüne ihtiyaç duyulana kadar öğeleri oluşturmaz”.

GridItem Nedir?

Kodlara geçmeden önce bahsetmemiz gereken bir diğer yapı “GridItem”. “GridItem” ızgaramızda yani “gridView”da gösterilecek öğelerin boyutunu, hizalamalarını ve aralıklarını düzenlemek için kullanılır. “GridItem” bize 3 opsiyon sunar. Şimdi bu seçenekleri kodları ve örnek görselleri ile beraber inceleyelim.

Fixed

• GridView, sütunu tanımladığımız boyutla eşleşecek biçimde ayarlar. Sütunların sayısını ve boyutu doğrudan ayarlamak istediğimizde kullanılan boyuttur.

private var columns: [GridItem] = [
    GridItem(.fixed(50), spacing: 16, alignment: .leading),
    GridItem(.fixed(75)),
    GridItem(.fixed(100))
]

fixed grid item

Flexible

• Adından yola çıkarak bakarsak “esnek” opsiyonu bize kullanılabilir alana bağlı olarak genişleyebilen veya küçülebilen bir sütun tanımlamamıza olanak sağlar. “flexible” seçeneği için minimum ve maksimum değer atayabiliriz.

private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 250)),
    GridItem(.flexible())
]

flexible grid item

Adaptive

• Yine adından yola çıkarak “ayarlanabilir” opsiyonu bize tek bir esnek sütun alanına birden çok öğe yerleştirmemizi sağlar.

private var columns: [GridItem] = [
    GridItem(.adaptive(minimum: 50, maximum: 100)),
    GridItem(.adaptive(minimum: 150))
]

adaptive grid item

Hadi oluşturalım

Uygulama da kullanacağım asset dosyalarına bu linkten ulaşabilirsiniz.

LazyHGrid

İlk olarak bir “LazyHGrid” oluşturarak başlayalım. Burada kullanacağımız görseller için bir diziyi map’leyerek “hItems” isimli değişkenimizde bu isimleri tutacağız. Daha sonrasında “GridItem” yardımıyla layout’umuzu oluşturup “LazyHGrid” içinde kullanacağız.

Gist’i incelediğimiz de “LazyHGrid”i bir “ScrollView” içine koyarak kaydıralabilir olmasını sağlıyoruz. “ScrollView”ın yönünü de horizantal olarak ayarladığımız gözünüzden kaçmasın. Ardından “LazyHGrid”i oluşturuyor ve “rows” parametersine oluşturduğumuz “hLayout”u atıyoruz. İçinde ise “ForEach” yardımıyla tüm ögeleri listeleyebileceğimiz bir döngü oluşturuyoruz. Devamında da görselimizi oluşturduğumuz klasik bir “image” işlemi göreceksiniz.

Oluşan yapımıza göz atalım.

LazyVGrid

Bir önceki yapımıza ek olarak devamında bir “LazyVGrid” oluşturalım. Tamamının düzenli bir ve estetik yapıda olması için dikey yönlü bir “ScrollView” oluşturalım ve ilk oluşturduğumuz yatay yapımızı da bu scrollView içine alalım.

Yine item ve layoutlarımızı oluşturarak başlayalım ardından ise “LazyHGrid” yapısının altına aynı şekilde “LazyVGrid” yapımızı oluşturalım.

Ve artık demomuz hazır. Birlikte göz atalım.

Böylece makalemizin sonuna gelmiş olduk. 👨‍💻

Paketin içindeki örnek projeyi burada yaptığımız örnekler ile birleştirdim. Demo projenin kaynak kodu: github.com/hasanalisiseci/GridViewDemo

Aklınıza takılan veya merak ettiğiniz soruları yorumlar kısımında sorabilirsiniz.

Makaleyi oluştururken yararlandığım kaynağa buradan ulaşabilirsiniz.