SwiftUI İçin Özel Sayfalar

 

SwiftUI İçin Özel Sayfalar

Hiç SwiftUI'da dinamik yüksekliğe sahip özel bir sayfa oluşturmak istediniz mi? Apple yerel bir Sayfa bileşeni sağladığından, bunu iOS uygulamamızda ihtiyaç duyduğumuz her türlü özel sayfayı tasarlamak için kullanmak kolaydır.

Ancak her zaman böyle değildi. iOS 14 gibi eski iOS sürümleri bu işlevi desteklemez. Dolayısıyla uygulamanız bu iOS sürümlerini destekliyorsa bu sorunu sorunsuz bir şekilde çözme lüksünüz yok. Ama endişelenme! Bu makaleyi okuduğunuzda SwiftUI'yi destekleyen herhangi bir iOS'ta dinamik yüksekliğe sahip sayfalar elde edebileceksiniz! 

Hadi bir deneyelim. 

Özel sayfalar oluşturmak hiç de karmaşık değil. Sadece adımlarımı takip et .

1. Adım: Alt sayfa için yeni görünüm oluşturun

Öncelikle yeni bir SwiftUI View dosyası oluşturmamız gerekiyor, bu yüzden kodumuzu çeşitli dosyalara bölüyoruz. Ben benimkine “BottomSheetView” adını verdim, sen de seninkine ne istersen diyebilirsin.

Başlangıç ​​noktası olarak benzer bir şey görmelisiniz. Şimdi yaratmaya başlayalım.

Başlangıç ​​noktası olarak benzer bir şey görmelisiniz. Şimdi yaratmaya başlayalım.

2. Adım: Kodlama görünümü

Basit bir VStack oluşturalım ve ona bazı görünüm değiştiriciler ekleyelim.

Ayrıca, alt sayfamızın tüm ekranı doldurması gerektiğinden bu VStack'in başka bir yığın görünümüne yerleştirilmesi gerektiğini unutmamak önemlidir. Bunu ZStack'a yerleştireceğim. Ayrıca VStack'ımıza beyaz arka plan koymayı da unutmayalım.

Adım 3: Ana görünümde bağlama değişkeni oluşturun ve bunu alt sayfamıza aktarın

Alt sayfamız yalnızca bir eylemle tetiklendiğinde görünür olmalıdır.

Şimdi sayfamıza bazı kodlar ekleyelim.

Görünümün başına aşağıdaki satırı ekleyin:

Ve eğer “ isShowing ” doğruysa ZStack içeriğimizi gösterin.

Adım 4: Ana görünümde BottomSheetView'ımızı çağırın

Alt görünümümüzü çağırmak istediğiniz herhangi bir ana görünümün, kök görünüm yığını olarak ZStack'e sahip olması gerektiğini belirtmek önemlidir. ZStack'in yardımıyla alt sayfamız "altındaki içeriği geçersiz kılacaktır".

ZStack'te ana görünümünüzde BottomSheetView'ınızı çağırmanız yeterlidir. Adım 3'ten hatırlayabileceğiniz gibi, BottomSheetView'ümüze bazı bağlayıcı bool sağlamamız gerekiyor. Bu nedenle, ana görünümün başlangıcında bazı bağlama değişkenleri oluşturun.

Ayrıca bu bool'u değiştirecek bir düğme oluşturdum. Siz de yapabilirsiniz.

5. Adım: Animasyonlar, arka plan kaplaması ve köşe yarıçapı ekleme

Yukarıdaki ekran görüntüsünde görebileceğiniz gibi sayfamız berbat görünüyor bunu geliştirelim.

VStack'ın üstündeki BottomSheetView ZStack'ımıza aşağıdaki kodu ekleyin.

Bu küçük numaranın yardımıyla arka plan kaplamamızı elde edeceğiz ve sayfanın dışına dokunarak sayfayı kapatacağız.
Ayrıca animasyonlar ekleyelim. ZStack'ımıza aşağıdaki değiştiriciyi ekleyin:

ve VStack'ımıza aşağıdaki geçişi ekleyin:

Şimdi sizlere SwiftUI'da köşeleri yuvarlatmak için bir UI yardımcısı sunacağım.
Bu yardımcı sayesinde sadece üst köşeler için kenarlık yarıçaplarını ayarlayabiliyoruz.

Kullanımı gerçekten basittir, sadece onu normal ViewModifier olarak adlandırın ve başka bir 'köşeler' parametresini iletin. Bunu kodumuza ekleyelim.

Sayfamız için herhangi bir yükseklik belirtmezsek yüksekliği içindeki içeriğe bağlı olacaktır. 

Bu yazının hatırına, sayfamızda biraz yükseklik verelim.

Çözüm

İşte! Artık SwiftUI destekli herhangi bir iOS için istediğiniz türde bir sayfa oluşturabilir ve bunu beğeninize göre özelleştirebilirsiniz.
Düzenlenecek çok fazla alan var. Üst tarafa bir başlık ve kapatma düğmesi ekleyebilirsiniz.

Başlangıç ​​projesinin tamamını burada bulabilirsiniz:

https://github.com/rihangunes/BottomSheet-main/blob/main/BottomSheet-main.zip

Durma  geleceğini kodla.

ilginiz için teşekkürler! :)