SwiftUI ve GraphQL kullanan Instagram Klon Uygulaması – HomeView

Bugün GraphQL ile Instagram klon uygulamamızın 4. bölümünde SwiftUI öğrenmeye devam ederek Ana Sayfa görünümümüzü oluşturacağız.

Önceki makalelerimizde, bir kullan ıcıyı nasıl kaydedeceğimizi ve bir kullanıcıya nasıl giriş yapacağımızı öğrendik ve Instagram klon Uygulamamızdaki ilgili UI’lerle Profil görünümünü oluşturduk. Bugün bu kodun bir kısmını yeniden kullanacağız ve çok sayıda içeriğe sahip bir UIScrollView’e benzer bir şey oluşturacağız.

Kemerlerinizi bağlayın ve başlayalım!

Daha iyi öğrenmek için iOS Instagram Clone projesini kaynak koduyla birlikte indirin.

Hızlı bir başlangıç mı istiyorsunuz?

Bu Uygulamayı Hub’ ımızdan klonlayın ve herhangi bir güçlük çekmeden kullanmaya başlayın!

Tam olarak ne inşa edeceğiz

Aşağıdaki görünümü oluşturacağız:

Daha önce gördüğümüz gibi, SwiftUI bu tür karmaşık arayüzler oluşturmayı gerçekten kolaylaştırır, çünkü birçok bileşeni çok kolay bir şekilde yeniden kullanabilirsiniz. Buradaki kelime “yeniden kullanım”.

Alt çubuğu zaten kodladığımızı hatırlıyor musunuz? Bunun için onu yeniden kullanacağız. Geri kalan her şey yeni.

VStacks ve HStacks’in üzerinden tekrar geçmeyeceğim, bu yüzden o kısmı kaçırdıysanız buraya tekrar göz atın.

UI bileşenlerimiz

Bu ekran temel olarak dört bileşenden oluşacaktır:

• Üst çubuk (kamera, Back4Gram dizesi, ev simgesi ve kağıt uçak simgesiyle birlikte)
• Geçmiş çubuğu (geçmişler için simgelerle birlikte)
• Zaman Çizelgesi Ayrıntılı görünüm (gerçek gönderilerle birlikte)
• Alt çubuk (yeniden kullanacağımız)

Şunları inşa etmeye başlayalım!

Üst Bar

Üst çubuk beş bileşenden oluşur:

• Kamera düğmesi
• Back4Gram dizesi
• Ara parça
• Ev düğmesi
• Kağıt uçak düğmesi

Daha önce öğrendiğiniz gibi düğmeler için simgeleri ekleyin ve kodlamaya başlayalım.

HomeView.swift dosyanızı oluşturun ve bir GeometryReader ekleyelim, böylece her şeyi güzelce yeniden boyutlandırabiliriz:

Ve önceki derste olduğu gibi, bir VStack ekleyelim çünkü her şey dikey bir eksende gösterilecektir:

Üst çubuğumuz yatay olarak hizalanmış bileşenlerin bir birleşimi olacaktır, bu yüzden onu oluşturmak için HStack’i ekleyelim:

Ve son olarak kullanacağımız kontrolleri ekleyin:

Nasıl görünüyor?

Bir yerlere gidiyoruz!

Şimdi biraz da şu konu hakkında konuşalım

Tarih Çubuğu

Geçmiş çubuğunun kendisi karmaşık bir bileşendir. Tıpkı eski UIKit’teki bir UIScrollView gibidir, ancak içinde bir görüntü ve altındaki bir metinden oluşan bir kontrolümüz vardır (diğer adıyla VStack). Hadi bu yapıyı oluşturalım:

Bunu ana VStack’imize yerleştirmek ScrollView eklemek kadar kolaydır. Ve daha güzel hale getirmek için, sadece yatay kaydırma yapalım ve kaydırma göstergelerini gizleyelim:

ve son olarak ana VStack’imize ekleyin:

Görünümü kontrol ediyorum:

Şimdi, ilerleyelim ve ilk olarak …

Alt Çubuk

Şimdi tüm bu yeniden kullanılabilirliğin tadını çıkaralım. Sadece BottomBar.swift dosyamızdan kodumuza ekleyin:

Ve tam kodumuz:

Kolay değil miydi? Nasıl görünüyor?

Sweeft!

Biraz Karmaşıklık Eklemek

Bu Görünümün en karmaşık kısmı Zaman Çizelgesi Ayrıntılı görünümü olacaktır.

TimelineView’da yaptıklarımızla tutarlı olması için TimlineDetailView.swift adında yeni bir dosya oluşturalım ve burada TimelineView’da olduğu gibi verileri tutacak yeni bir struct oluşturalım.

TimelineView’ımızda Preview yapımızın zaten tanımlı olduğunu hatırlayın, bu yüzden onu da yeniden kullanalım.

Struct bir Önizleme alacaktır, böylece imageUrl’yi daha sonra alabiliriz:

Ve bunu yaptıktan sonra, görünümün kendisini ekleyelim:

Ana içerik de bir VStack içinde olacaktır:

Ve bu VStack’in dört bileşeni olacak:

• Logo, metinler ve üç nokta düğmesi içeren bir HStack
• Gönderinin Görüntüsü
• Kalp düğmesi, yorum düğmesi, kağıt uçak düğmesi ve bayrak düğmesi içeren bir Hstack
• “Beğenen…” ve “Tüm yorumları gör” metinlerini içeren bir VStack”

Öyleyse ilk HStack’i ekleyerek başlayalım:

Ve içindeki kontrolleri ekleme:

Sonra Resim:

Tüm düğmeleriyle birlikte ikinci HStack’imiz:

Ve kontrolleri:

Ve son olarak metinlerimiz VStack:

Şimdi TimelineDetailView’ımızın içinde birkaç Önizleme kodlayalım:

Ve son olarak PreviewDetailViews’ımızı bir ScrollView’a ekleyerek döngü oluşturun:

Son olarak, bunu HomeView’umuza ekleyelim:

Son olarak, sonuçları görelim:

Ne kadar havalı!

Sonuç

SwiftUI’da yeniden kullanılabilirlik çok önemlidir.

Bugün, önceki makalelerimizden BottomView ve Preview yapısını nasıl yeniden kullanacağınızı öğrendiniz.

Şimdi biraz işlevsellik zamanı ve bunun için sabırsızlanıyorum.

Bizi izlemeye devam edin!

Referans

• Bu serinin 1. Bölümü Instagram Klon Uygulamasıdır.
• Bölüm 2 Swift Instagram Klonu.
• Bölüm 3 Instagram Profili.
• Bölüm 4 Instagram Ana Sayfa Görünümü.
• Kaynak kodlu bir iOS Instagram Clone projesi indirin ve Back4App kullanmaya başlayın.

Back4App’a şimdi kaydolun ve Instagram Klon Uygulamanızı oluşturmaya başlayın.