Progress Bar Nedir?

Progress Bar senkron ve asenkron yapılan işlemlerin arka plandaki ilerleyişini kullanıcıya göstermemize yarayan bir arayüz bileşeni yani widgettır.

Konumuz bir widget olduğu için önce tasarım sonra kodlama kısmından bahsedeceğim.

Progress Bar’ların tasarımı konusunda mood ve style kavramlarından bahsedebiliriz.Aşağıdaki görselde mooduna ve styleına göre bir Progress Bar’ın nasıl olacağını en basit örnekleriyle anlatmaya çalıştım.

Mood

Prosress Bar’ı ilerlemeyi gösterme moduna göre determinate (belirli) ve indeterminate (belirsiz) olarak ikiye ayırıyoruz.Determinate modda işlemin ilerleme durumunu gösterebiliyoruz, indeterminate modda ise sadece işlemin devam ediyor olduğunu gösteriyoruz.

Determinate-Indeterminate olma durumlarına tasarım kısmında xml dosyası içerisinde veya class içerisinde yön verebiliyoruz.Biraz bu kodlardan bahsedelim(xml);

android:indeterminate: determinate / indeterminate olma durumu

android:indeterminateBehavior: indeterminate moddayken ilerleme maksimuma ulaştığında nasıl davranması gerektiği

android:indeterminateDrawable: indeterminate modda drawable dosyası kullanmak için

android:indeterminateDuration: indeterminate animasyonun süresi

android:indeterminateTint: indeterminate göstergesinin renk tonu

android:indeterminateTintMode: indeterminate ilerleme göstergesi için kullanılan renk tonunun karşı tonu

android:interpolator: indeterminate animaston için hızlanmayı ayarlar

Style

Prograss Bar’ı circular ve horizontal şekilde kullanabiliyoruz.Sistem bize 8 style sunuyor; 7 tanesi circular ve ebatlarını, 1 tanesi horizontalı temsil ediyor.Görselde stylelarımızı grupladım.

Not: Progress Bar’ı daha efektif ve animatik kullanmamıza yarayan pek çok üçüncü parti kütüphane mevcut

Progress Bar Nasıl Kullanılır?

Şuana kadar Progress bar’ın tasarımı ve moduyla ilgilendik, şimdi kodlama kısmına, ilgili methodlarımıza geçiyoruz.

Not: Class içerisinde de tasarım ve modlara müdahale edebiliyoruz

Öncelikle Progress Bar’ı ekranımızda direkt veya Dialog içerisinde kullanabiliriz.Bu ikisinin farkı görseldeki gibi;

Aslında kod mantığında pek fark yok, soldaki bir activity veya fragment üzerinde direkt kullanılmış sağdaki ise bir AlertDialog’a set edilmiş.

Bu postta ekran üzerinde direkt görüntülemeyi anlatacağım, bunu okuduktan sonra dialog içerisinde kullanmayı Android Dialogs postumdan okuyabilirsiniz.

Şimdi en basit haliyle örneklendirelim.Circular ve indeterminate modda bir Progress Bar’ımız olsun,onu başlatıp durduracak iki de butonumuz.Aşağıdaki görseli elde edeceğiz.Kodlamayı Kotlin ile yapacağım.

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <ProgressBar
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/progressBar"/>
    <Button
            android:text="Stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/stopButton"/>
    <Button
            android:text="Start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/startButton"/>

</android.support.constraint.ConstraintLayout>

.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var progress : ProgressBar = this.progressBar
        progress.isIndeterminate = false
        progress.visibility = View.INVISIBLE

        var startBtn = this.startButton
        var stopBtn = this.stopButton

        startBtn.setOnClickListener {
            progress.visibility = View.VISIBLE
        }

        stopBtn.setOnClickListener {
            progress.visibility = View.INVISIBLE
        }

    }
}

Şimdi biraz daha komplike bir örnek yapalım.Determinate modda horizontal bir Progress Bar’ımız olsun, 0dan başlayıp 100e kadar devam etsin ve 50 milisaniyede bir +1 ilerlesin.Ve bir textView de bize ilerleyişin sayısal değerini göstersin.Görseldeki ekranı elde edeceğiz;

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            android:background="#ecf8ff"
            android:text=""/>
    <ProgressBar
            android:id="@+id/progress_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"/>
    <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Start"/>

</android.support.constraint.ConstraintLayout>

.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button.setOnClickListener{

            var progressStatus = 0;
            var progressBar : ProgressBar = this.progress_bar

            val handler: Handler = Handler()

            Thread(Runnable {
                while (progressStatus < 100) {
                    progressStatus += 1

                    try {
                        Thread.sleep(50)
                    } catch (e: InterruptedException) {
                        e.printStackTrace()
                    }

                    handler.post(Runnable {
                        progressBar.progress = progressStatus

                        text_view.text = progressStatus.toString()
                    })
                }
            }).start()
        }

    }
}

Not: Henüz bilmeyenler için, Runnable ve Handler sınıflarını zamanlayıcıyı sağlamak ve ilerleme durumunu görebilmemiz için kullandım, Progress Bar ile bağlantılı bir konu değil.

İlk örneğimizde Progress Bar’ı manuel başlatıp durdurduk, ikinci örneğimizde ise manuel başlatıp işlem bittiğinde durmaya programladık.Daha komplike bir ekran ve işlem dizininde kullanmak istediğimizde de pek farklı birşey yapmıyoruz aslında; beraberinde kullanmak istediğimiz işlemin başlamasıyla Progress Barı başlatıyor bitmesiyle durduruyoruz.İşte bu kadar :)

Progress Bar’ın ne olduğunu ve çalışma prensibini çok detaya girmeden anlatmaya çalıştım, umarım işinize yarar.

Kaynak;

ProgressBar | Android Developers

Burda olduğunuz için teşekkürler :)