SwiftUI: ProgressView

ProgressView ile kullanıcılara bir işlemin tamamlanma oranını gösterin!

Herkese merhaba! Bu yazıda, kullanıcıları bir işlem için bekletirken kullanabileceğiniz ProgressView elemanından bahsedeceğim.

Aynı arayüz elemanının UIKit versiyonu için aşağıdaki makaleye göz atabilirsiniz:

UIKit: UIProgressView

iOS için bir Xcode projesi oluşturarak başlayalım. Projeyi “ProgressView” olarak isimlendirebiliriz.

Şimdi, ContentView‘un içine aşağıdaki satırı ekleyelim:

ProgressView()

ProgressView‘u kullanmanın en basit yolu bu. Kullanıcıya gösterilen tek şey, çubukların üzerinde dönen bir animasyon.

Ne zaman biteceği belirli olmayan işlemler için bunu kullanmak mantıklı olabilir. Ancak bitmesi uzun süren ve kullanıcıların sıkılabileceği, hatta işlemin çalışmadığını düşünebileceği durumlarda tamamlanma durumunu belirtmek güzel bir karar olabilir.

Bunun için yeni bir değişken oluşturalım:

@State private var progress = 0.0

Daha sonra, bir Form oluşturarak bu değişkene müdahale edebilmek için bir Stepper ekleyelim:

Form {
   Stepper("Progress", value: $progress, in: 0.0...1.0, step: 0.1)
}

Son olarak ise oluşturduğumuz Form‘un içinde bir ProgressView oluşturarak buna value parametresini ekleyelim:

Stepper("Progress", value: $progress, in: 0.0...1.0, step: 0.1)

Bu parametrenin tamamlanma yüzdesine göre 0.0 ile 1.0 arasında olması gerekiyor.

Uygulamayı çalıştırabiliriz.

Tamamlanma oranı aşağıdaki çubuk üzerinde gösteriliyor ve yukarıdaki Stepper ile kontrol edilebiliyor.

value parametresinin kullanıldığı durumlarda bütün platformlarda çubuk şeklinde bir tasarım gösterilirken kullanılmadığı durumlarda dairesel olarak yerleştirilen çubukların üstünde animasyon gösteriliyor.

Ancak macOS’de geçtiğimiz sene macOS Big Sur ile tanıtılan yeni bir ProgressView tasarımı daha var.

Bu tasarımın kullanılabilmesi için macOS için oluşturulmuş bir Xcode projesi gerekiyor. Yeni tasarım, Catalyst’te de çalışmıyor.

ProgressView()
   .progressViewStyle(LinearProgressViewStyle())

Burada yapılan şey, ProgressView‘un değerinin belirtilmemesine rağmen yatay olarak gösterilmeye zorlanması.

ProgressView bu şekilde kullanıldığında üzerindeki mavi çubuk, sağa ve sola doğru oldukça akıcı bir animasyonla hareket ediyor.

ProgressView hakkında bilmeniz gereken bütün şeyler bunlardı. Bir sonraki makalede 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