WWDC20: SwiftUI View Elemanlarını Düzenleme
SwiftUI ile yazdığınız kodların çıktısını gösteren Preview ekranını kullanarak SwiftUI uygulamaları tasarlayın.
Merhaba sevgili TurkishKit okuyucuları! 👋🏻 Bu yazımızda WWDC 2020 konferansında oldukça gelişen Xcode’un “Preview” ekranını kullanarak hızlı bir şekilde nasıl SwiftUI uygulamaları yapabileceğimize bakacağız. Hazırsanız 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.
Giriş
Bu makalede yapacağımız şey bir liste hücresi elemanı olacak: Bir içeceğin özelliklerini ve fotoğrafını gösteren bir hücre.
Projemiz başlangıçta aşağıdaki gibidir.
Hücremize yeni bir Text elemanı eklemek için yukarıdaki “+” butonuna tıklıyorum. Öne çıkan bölümden Text elemanını seçip hücrenin içerisindeki Text elemanının altına yerleştiriyorum.
İlk Text elemanına çift tıklayarak içerisindeki yazıyı değiştirebiliriz.
Tabii ki Text elemanının içerisindeki yazıları kod sayfasından da direkt değiştirebiliriz. (Fark edeceksinizdir ki siz yazıyı değiştirdiğiniz anda her iki taraf birbirleriyle paralel bir şekilde değişecektir.)
cmd+D tuşlarına basarak elemanımızı çoğaltabiliriz.
En altta bulunan yazı hatırlayacağınız üzere kalori değerini yazıyordu. Bunun için elemanı aşağıdaki gibi düzenleyelim.
“+” butonuna tıklamaya gerek kalmadan cmd+shift+L tuşlarına basarak yeni bir eleman ekleyebiliriz. Bu sefer ekleyeceğimiz eleman bir resimdir. Fark edeceğiniz üzere, resim, hücremize göre oldukça büyük olduğu için işleri karıştırdı.
Bunu düzeltmek için resmin üstüne tıklayın ve sağ bardan “Reziable” ve “Aspect Ratio” “modifier”larını çağırın.
Hücrenin boyutunu düzgün bir hale getirmek için “width” değişkenini 96 olarak ayarlayın.
Yıldızları eklemek için yeniden cmd+shift+L butonlarına basın ve bir SwiftUI nesnesi olan Star View elemanını yazı elemanlarının en altına yerleştirin.
Birden fazla yıldız gözükmesi için o tek yıldızın üstüne dokunun ve “Repeat” tuşuna basın.
Yine sağ bardan en üstteki Text elemanının “Font”unu “Title” ve “Weight” değerini de “Bold” olarak değiştiriyorum.
Az önce değiştirdiğiniz “Font” sekmesine bir daha gelip o sekmedeki mavi butona tıklarsanız Text elemanının “Font” değeri varsayılan değere geçecektir.
Alttaki Text elemanlarına tıklayın ve “Font” sekmesini “Subheadline” olarak değiştirin.
Yazıları ve yıldızları sola yatırmak için oradaki bütün elemanları seçin ve sağ barda ortaya çıkan sola yatırma butonuna tıklayın.
control+optional tuşlarına basılı tutarak sonuncu Text elemanına tıklayın ve rengini gri olarak değiştirin.
Yeni Xcode ile birlikte bir elemanı çoğaltmak çok kolay. Tek yapmanız gereken, elemanın üstünde duran barın en sağındaki butona tıklamak. Bunu hücrenizi çoğaltmak için uygulayın.
Sonrasında çoğalttığınız elemanın üstündeki barın sağdan ikinci butonuna tıklayın ve “Color Scheme” sekmesini “Dark” olarak değiştirin. Artık elemanınız karanlık moda göre değişmiştir.
Bu konu ile alakalı daha fazla bilgi almak için aşağıdaki bağlantıya tıklayabilirsiniz:
Bu makalemizin de böylece sonuna geldik. Bu makalemizde “Preview” ekranını kullanarak nasıl daha hızlı bir şekilde SwiftUI uygulamaları yapabileceğimizi gördük. Keyifli öğrenmeler dilerim! 🤗
