WWDC20: Playground’da SwiftUI Kullanımı

Playground kullanarak SwiftUI ile çok basit ve hızlı bir şekilde uygulamalar geliştirebilirsiniz.

Rana Taki
TurkishKit
4 min readJun 26, 2020

--

Merhaba Turkishkit okuyucuları!🖖 Tekrar bir SwiftUI makalesi ile buluştuk. Swift Playgrounds mühendisi Matt Patenaude, Swift Playgrounds kullanarak bir tane SwiftUI View oluşturmayı gösterdi.

Bu makalede sizlere adım adım Playground kullanarak bir SwiftUI View oluşturmayı anlatacağız. Görevler tamamlandıkça bir yuvarlağın içinin dolduğu bir program oluşturacağız. Hiç vakit kaybetmeden başlayalım!

WWDC 2020 Haftasını Yakından Takip Edin!

TurkishKit Medium sayfamızı takip ederek WWDC 2020 haftası boyunca tanıtılan yeniliklerden anında haberdar olun. WWDC 2020 serimizi keşfetmek için aşağıdaki linke tıklamanız yeterli.

Playground’da SwiftUI Projesi Geliştirmek

Adım 1: Tabletinizde veya bilgisayarınızda bir Xcode Playground projesi oluşturun ve adını “ProgressView” koyun.

Adım 2: SwiftUI ve Playground Support kütüphanelerini ekleyin.

Adım 3: Bir tane ProgressView yapısı oluşturun.

Adım 4: “body” adında bir değişken oluşturun ve ekrana “Hello World” yazdırın.

Adım 5: Uygulamayı çalıştırın.

Adım 6: Ekrana mavi bir yuvarlak ekleyin. Bu yuvarlak, görevlerin yüzde kaçının tamamlandığını gösterecektir.

Adım 7: “ProgressView” objesine “padding” değeri ekleyin. Bu sizin “View” elemanınızın boyutunu küçültecektir.

Adım 8: Boş bir “ZStack” yapısı ekleyin ve eklediğiniz yuvarlağı bu “ZStack” yapısının içine ekleyin. “Yüzde” yazısını yuvarlağın içine koymak için buna ihtiyacınız olacaktır.

Adım 9:ZStack” yapısının içine yüzdeyi gösteren bir “TextView” elemanı ekleyin.

Parantezleri sürükleyerek oluşturduğunuz “View” elemanlarını “ZStack” yapısının içine ekleyebilirsiniz.

Bu noktadan sonra maalesef videoda tamamen farklı bir kod dosyası kullandılar. Bu dosyaya erişemediğimiz için şimdilik yapılan değişiklikleri size anlatmaya çalışacağız.

Adım 10: Öncellikle gradient renkleri “Playground” dosyasının sunduğu “color picker” özelliği ile değiştirdi.

Adım 11: Projesine yeni bir “swift” dosyası ekledi.

Adım 12: İlk dosyada bulunan “struct”ın tamamını yeni açtığı dosyaya ekledi.

Adım 13: Dosyada beklendiği gibi hatalar çıktı. Hataları tespit edip, SwiftUI kütüphanesini ekledi.

Adım 14: “Struct”, farklı dosyaya geçtiği için her yerden erişilebilmesi için “public” olarak değiştirdi ve bununla birlikte “public” olması gereken değişkenleri de “public” yaptı.

Adım 15: İlk sayfaya “Preview” adında yeni bir struct oluşturdu. Bu struct, yüzdeyi gösteren şekilden iki tane oluşturacaktır.

Adım 16:VStack” yapısını kullanarak ekrana alt alta iki tane “ProgressView” elemanı ekledi.

Adım 17: En altta bulunan “padding” değerini yok etti ve “VStack” yapısına “padding” değeri verdi.

Adım 18: Karanlık mod ile uyumlu olması içinVStack” yapısının arkaplan rengini değiştirdi.

Adım 19: Son olarak uygulamanın görünebilmesi için “Preview” yapısını gösterilecek görünüm olarak ayarladı sağladı.

Adım 20: İkinci “ProgressView” elemanına “enviroment modifier” kullanarak karanlık mod ekledi.

Adım 21: “Preview” yapısının içine “progress” adında 0.25 değerini alan yeni bir “state” değişkeni oluşturdu.

Adım 22: “progress” değişkenini “ProgressView” elemanlarına ekledi. Böylece ekrandaki değerler değişti.

Adım 23: “increment” adında “progress” değişkenini 0.25 arttıran bir fonksiyon oluşturdu ve “withAnimation” fonksiyonu ekledi.

Adım 24:VStack” yapısının içinde yeni bir “ButtonView” elemanı ekledi ve “increment” fonksiyonunu bu elemana ekledi.

Adım 25: “Button” elemanının adını “Increment Progress” yaptı ve uygulamasını çalıştırdı.

Yorumlamak gerekirse, Playground kullanarak SwiftUI ile bir uygulama yapmak artık çok kolay oldu. SwiftUI kütüphanesi kodlamayı günlük konuşma diline benzeterek kodlamanın yaşını iyice düşürdü. SwiftUI geliştikçe kullanım alanları da genişlediği için geleceğin kodlama dilinin SwiftUI kütüphanesinden geçeceğini söyleyebiliriz.

Bir yazımzın daha sonuna gelik. Bu yazıda Playground platformunda SwiftUI ile çalışmanın üzerinden geçtik ve aslında ne kadar basit bir işlem olduğunu gördük. Bir sonraki makalemizde görüşmek üzere!

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook

--

--