SwiftUI: Slider
Slider, kullanıcının doğrusal bir şekilde hareket ettirerek değer tanımlayabileceği bir arayüz elemanıdır.
Doğrusal bir yol içerisinde maksimum ve minimum değerleri görüntülemek ve değiştirmek için Slider elemanı kullanılmaktadır. Bu yazımızda, Slider elemanını kullanmayı öğreneceğiz. Hazırsanız hiç vakit kaybetmeden başlayalım. 🤟🏻
Proje Kurulumu
Xcode’u açarak “Create a New Xcode Project” diyelim. Ardından, “Interface” bölümünü “SwiftUI” ve “Life Cycle” bölümünü de “SwiftUI App” olarak seçmeyi unutmayalım.
İlk olarak Xcode’un bizim için varsayılan olarak verdiği kodlardan Text elemanını ve padding “modifier”ını silelim. Sonrasında @State ile bir Double değeri oluşturalım.
@State private var value = 8.0Değerimizi oluşturduktan sonra arayüz elemanlarını oluşturmak için aşağıdaki kodları yazalım.
VStack(spacing: 30) {
Text("Slider")
.font(.largeTitle) Slider(value: $value, in: 1...100, step: 1) Text("Value is: \(value)")
.foregroundColor(.purple)
.font(.title)
}
Burada ne yaptık? VStack elemanımızın mesafe değerini 30 olarak girdik. Text oluşturarak Slider konumuzun başlığını ekledik. Slider değerimizi ve elemanımızı kullanabilmek in değeri ile aralık belirledik, step değeri ile de Slider objesini hareket ettirdiğimizde değerimizin birer birer artacağını belirtmiş olduk. Son olarak, altta oluşturduğumuz Text objesinde Slider objesinin hangi değeri temsil ettiğini göstermek için value değerini yazdık.
Artık “Preview” ekranından uygulamamızın son halini bakabiliriz.
Slider elemanımızı gayet kolay bir şekilde oluşturduk. Gelin şimdi beraber bu Slider elemanımızı biraz daha özelleştirelim.
Öncelikle Slider objesini bir HStack objesinin içerisine alalım. Slider elemanımızın üzerine “speaker.fill” ismindeki SF sembolünü ekleyelim ve rengini gri yapalım.
Image(systemName: "speaker.fill")
.foregroundColor(.gray)SF Symbols Nedir?
SF sembolleri (daha doğrusu SF Symbols), WWDC19'da tanıtılan, Apple Tasarım Prensiplerine uygun semboller bulabileceğiniz bir sembol setidir.
SF Symbols hakkında daha fazla bilgi edinmek isterseniz, ilgili yazımızı aşağıdaki bağlantıdan inceleyebilirsiniz:
Ardından Slider objemizin kenarlarında boşluk olsun diye padding “modifier”ını kullanalım. Ayrıca, alt satıra geçip View ve kontrol elemanlarına uygulanabilen accentColor “modifier”ını red olarak ayarlayalım ve bir alt satırında “horizontal” padding “modifier”ını kullanalım. Son olarak alt kısma da sistem resimlerimizden “speaker.3.fill” resmini ekleyelim. Kodumuz son olarak şu şekilde görünecektir:
HStack {
Image(systemName: "speaker.fill")
.foregroundColor(.gray) Slider(value: $value, in: 1...100, step: 1)
.padding(15)
.accentColor(.red)
.padding(.horizontal) Image(systemName: "speaker.3.fill")
.foregroundColor(.gray)
}
value değerimiz Double türünden olduğu için Text objesinde virgülden sonra gelen sıfırlar gözükebilir. Bunun olmasını tabii ki istemeyiz. Bu yüzden elemanımızı Int türüne çevirelim.
Text("Value is: \(Int(value))")Son olarak uygulamamız aşağıdaki gibi olacaktır:
İşte bu kadar! Artık Slider objesiyle ilgili neredeyse her şeyi biliyorsunuz! 🔥
Bu yazımızda yapmış olduğumuz projemize buradan ulaşabilirsiniz:
