SwiftUI Toggle Kullanımı – SwiftUI Bootcamp Serisi Video 33

Toggle kavramı aslında çoğu uygulamada kullanılan bir kavram. SwiftUI Toggle kullanımı için bir tutorial videosu hazırladım. Bu yazı da aslında videonun transkripti gibi düşünebilirsiniz. Elbette toggle yapısını biraz daha derinlemesine anlatmaya çalışacağız. Apple’ın developer sitesinde “A control that toggles between on and off states.” olarak tanımlanmaktadır. Yani Toggle açık ve kapalı durumlar arasında geçiş yapan bir kontroller olduğundan bahsediyor. SwiftUI’da toggle’ı kullanabilmek için bir değişken tutmamız ve bu değişkeninde Bool tipinde bir değişken olması gerekiyor.

Konuya geçmeden önce bir önceki yazı ve bootcampin ilk yazısına aşağıdan ulaşabilirsiniz.

İlk yazı

SwiftUI Bootcamp ile iOS Geliştirici Olun!

Haberi görüntüle

TextEditor

SwiftUI TextEditor Kullanımı – SwiftUI Bootcamp Serisi Video 32

Haberi görüntüle

SwiftUI Toggle için değişken tanımlama

SwfitUI Toggle’ı nerede kullanacaksak o görünümün dışında bir değişken tanımlamalıyız. Bu değişken Bool türünde olmalı. Ayrıca State ile işaretlenmiş olmalı. Çünkü ekranda biz durumu değiştirdiğimizde state bunu algılasın ve bu değişkeni kullanan görünümler yeniden çizilsin.

    @State var isOnline: Bool = false

Yukarıdaki kodda “@State” yaparak bu değişkenin değeri değiştiğinde takip etmek istediğimizi belirtiyoruz. Ardından “Bool” ile değişkenin tipini belirtiyoruz. Bu sayede sadece doğru ve yanlış değerlerini alabilecek. Yani Toggle’daki karşılığıyla açık ve kapalı. “false” ile değişkenin varsayılan değerini kapalı olarak işaretledik. Bu işlemi yaptığımızda aslında Toggle’ın varsayılan değerini kapalı olarak işaretlemiş oluyoruz.

SwiftUI Toggle’ı görünüm kısmında çağıralım

Toggle’ın birden fazla kullanımı var elbette. Ancak biz “isOn” ve “label” parametrelerini bekleyeni kullanacağız.

SwiftUI Toggle Kullanımı – SwiftUI Bootcamp Serisi Video 33 4

Sizde bir şey tanımlarken ismini yazdıktan sonra beklerseniz farklı varyasyonlarını ve kullanımlarını görebilirsiniz.

isOn ve label olanını seçtikten sonra bizden “isOn” kısmında “Binding<Bool>” değişkeni bekliyor. Binding demek, verdiğimiz değişkeni sürekli olarak dinleyecek ve eğer değeri değişirse ekranda bu view komponenti de değişecek anlamına geliyor. Bunun için yukarıda State ile işaretlediğimiz isOnline’ı buraya veriyoruz. Elbette değişkenin başına da “$” işareti koymayı unutmuyoruz. Label kısmında ise bir Text vererek bu toggle butonunu kullanıcıya açıklıyoruz.

            Toggle(isOn: $isOnline) {
                Text("Change status:")
            }

Artık Toggle view’ını ekrada görebiliriz.

Toggle değiştiğinde etkilenecek Text

Şimdi sırada toggle’ın değerine göre farklı text’ler yazdırmak var. Elbette siz başka işlemler de yaptırabilirsiniz. Ben bu örnekte Text’in değişmesini sağlayacağım.

                Text(isOnline ? "Online" : "Offline" )

Yukarıdaki kodda bir text oluşturdum ve içerisinde inline olarak bir if koşulu yazdım. isOnline değişkenini başa yazıp sonuna soru işareti koydum. Bu aslında “isOnline == true?” sorgusunun kısa gösterimi. Buradan bize true veya false değeri dönecek. Eğer true değeri dönerse “Online” kısmı ekranda gösterilecek, false değeri dönerse ise “Offline” değeri ekranda gösterilecek.

Evet bu sayede uygulamamızı tamamlamış olduk. GitHub linki için buraya tıklayabilirsiniz.

Videoyu izlemek için;