UIKit: UIProgressView
UIProgressview, bir çubuğun zaman içerisinde ilerleyişini göstermeye yarayan UIKit elemanıdır.
Merhaba TurkishKit okuyucuları. Bu yazımızda, minik bir öğretici proje ile UIProgressView elemanını kullanmayı öğreneceğiz. Eğer sizler de hazırsanız başlayalım! 🤙🏻
Projeyi Oluşturma
Create a new Xcode Project diyerek projemizi oluşturalım. “App” seçeneğinden devam ederek uygulamamıza “UIProgressView” adını verelim.
UIProgressView Elemanını Oluşturmak
Main.storyboard dosyamıza gelerek sağ üst kısımdaki (+) Swift kütüphanesine tıklayarak “UIProgressView” aramasını yapıyoruz. Seçtiğimiz UIProgressView elemanını uygulamamızı şekillendirdiğimiz penceremizde üst kısımla orta kısım arasına sol taraftaki sınıra yaslayarak ekleyelim. Ardından sağ taraftaki sınıra kadar ilerleme çubuğumuzu uzatalım.
Ardından sağ alt köşedeki “Add New Constraint” kısmından soldan ve sağdan 20, yukarıdan ise 120 olacak şekilde “constraint” verelim.
UIProgressView Elemanını Storyboard’ta Tanıyalım
UIProgressView elemanı Storyboard üzerinde çok fazla değişiklik yapabileceğimiz bir eleman değildir. Kısaca tanıtmak gerekirse: “Attributes Inspector” sekmesinden ilerlemenin aralığı (progress) 0–1 arasında değiştirilebilir, çizgisinin rengi, arkaplan rengi ve görünürlüğü (alpha) değiştirilebilir.
Renk tonumuzu “System Indigo Color” yapalım.
Loading Bar Projesi
Projemize başlarken öncelikle UIButton elemanı seçelim. Ardından elemanımızı ekranımızın tam ortasına yerleştirelim. Attributes Inspector sekmesinden “Button” yazısını “Start Progress” olarak değiştirelim, sonrasında background rengini de yine System Indigo Color yapalım, ardından bir de Text Color kısmından Text rengini “White Color” seçelim. Son olarak da constraint kısmından sağdan, soldan 142 ve 260 yukarıdan constraint ekleyerek Main.storyboard dosyasındaki işlerimizi bitirelim.
Main.storyboard’taki işlerimizi bitirdiğimize göre artık kodlama zamanı! 🤩
Kodlayalım
Öncelikle, eklediğimiz Button ve Progress View elemanlarını outlet ve action türünden kodlayalım. Bunun için ViewController.swift sayfamıza geçelim.
@IBOutlet weak var progressView: UIProgressView!
@IBAction func startProgress() { }Outlet türünden tanımladığımız progressView, viewDidLoad fonksiyonunun üstüne eklenecek ve Action türünden tanımladığımız startProgress ise viewDidLoad fonksiyonunun altına eklenecek.
Tanımladığımız Outlet ve Action yapılarını Main.storyboard üzerinden işaretleyelim. Bunu Main.storyboard dosyamıza geçerek görünen ekran üzerindeki çubuktan sol tarafa tıklayarak gerçekleştirebiliriz. Action yapımızı Touch Up Inside olarak işaretlemeyi unutmayalım.😉
Her şey süper ilerliyor. Şimdi sıra geldi gerekli kodları yazmaya! Şöyle başlayalım:
Outlet tanımımızın altına şu kodu ekleyelim:
let progress = Progress(totalUnitCount: 10)bu kod sayesinde projemizde 10'a kadar sürecek bir ilerleme göreceğiz. Ama öncelikle buttonumuzu eklediğimiz action fonksiyonunun içerisine gelerek bir zamanlayıcı oluşturmalıyız.
Action tanımımızın süslü parantezleri içerisine şu kodu ekleyelim:
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (timer) in
guard self.progress.isFinished == false else {
timer.invalidate()
return
} self.progress.completedUnitCount += 1
let progressFloat = Float(self.progress.fractionCompleted)
self.progressView.setProgress(progressFloat, animated: true)
}
Projemizi çalıştırmadan önce Main.storyboard kısmına geçelim, Progress View barımıza tıklayalım ve Attributes Inspector kısmında bulunan “Progress” tabını 0.5 yerine 0 olarak değiştirelim. Ardından projemizi çalıştıralım ve tatlı bir ilerlemeyi birlikte görelim! 🤩
Gördüğünüz gibi barımız 10 saniyede animasyonlu bir şekilde ilerleme kaydediyor. Şimdi fonksiyon kısmında yazdığımız kodları açıklayalım!
Timer.scheduledTimer kısmında verdiğimiz interval = 1 değeri, saniyede barımızı 1 ilerleterek sınır koyduğumuz 10'a kadar ilerleme kaydediyor. 10 olduğunda ise print(“finished”) komutu çalışarak ilerlememiz sona eriyor.
self.progress.completedUnitCount += 1 komutu da saniyede 1 birim ilerlemesini sağlıyor.
let progressFloat = Float(self.progress.fractionCompleted) ve self.progressView.setProgress(progressFloat, animated: true) komutlarıyla da ilerlemeyi başlatabiliyoruz.
Son olarak deneyenleriniz olduysa, ilerleme sürecimiz bittiğinde çubuğumuzu sıfırlayamıyoruz. Bunu sıfırlamamızı sağlayacak kod ise yine action fonksiyonuna ekleyebileceğimiz ve hemen altına yazabileceğimiz bir kod:
progressView.progress = 0
Gördüğünüz gibi çubuğumuz dolduğunda “Start Progress” butonuna tekrar basınca çubuğumuz sıfırlanıyor. Son olarak ise rahatsız edici bir özelliği sizinle değiştirmek istiyorum. Bana göre çubuğumuz fazlasıyla ince ve bu çubuğun boyutunu “Atributes Inspector” üzerinden maalesef değiştiremiyoruz. Ancak kodlama her zaman bizim için güzel bir çözüm. Daha seksi bir çubuk elde etmemiz için viewDidLoad fonksiyonunun içerisine şu kodu ekleyelim:
progressView.transform = progressView.transform.scaledBy(x: 1, y: 5)transform özelliği ile birçok şeyi değiştirebiliriz. scaledBy komutu sayesinde 1'e 5 bir çubuk görünümü elde edebiliyoruz.
Bu kodumuzu yazdıktan sonra projemizin son haline bakalım.
Süper! Yaptığımız düzenlemelerle ve yazdığımız kodlar ile birlikte tatlı bir sonuç elde etmiş olduk. Umarım sizler için yararlı bir UIProgressView makalesi olmuştur! Kodlarımızın son halini de sizler için aşağı da paylaşıyorum. 👇🏻
Bir makalemizin daha sonuna geldik! Bu makalemizde UIProgressView elemanının ne olduğunu, ne işe yaradığını ve nasıl kullanabileceğimizi öğrendik. İyi kod yazmalar! 🖥
