Erstellung benutzerdefinierter Fortschrittsbalken in Android

Fortschrittsbalken sind wesentliche UI-Elemente in Android-Anwendungen, insbesondere um den Status laufender Aufgaben anzuzeigen. Die Anpassung dieser Fortschrittsanzeigen ermöglicht es Ihnen, ein einzigartiges Erscheinungsbild für Ihre App beizubehalten. Dieser Leitfaden führt Sie durch die Erstellung eines benutzerdefinierten Fortschrittsbalkens unter Verwendung der in Android integrierten Funktionen.

Grundlegende kreisförmige Fortschrittsbalken

Werfen wir zunächst einen Blick auf eine einfache Möglichkeit, einen Fortschrittsanzeiger darzustellen. Das folgende Beispiel zeigt drei kreisförmige ProgressBar-Elemente, die vertikal in einem ConstraintLayout ausgerichtet sind.

< ?xml version="1.0" encoding="utf-8"?>

In diesem Layout haben Sie drei Arten von Fortschrittsbalken (Large, Small und Medium), die jeweils ihre eigene Größe und Position innerhalb der Ansicht haben. Die Fortschrittsbalken drehen sich endlos und signalisieren eine laufende Hintergrundaufgabe.

Hinzufügen eines benutzerdefinierten Fortschrittsbalkens mit einem Symbol

Als Nächstes gehen wir einen Schritt weiter und fügen dem ProgressBar ein Symbol hinzu. Das Attribut indeterminateDrawable ermöglicht es Ihnen, den standardmäßigen rotierenden Indikator durch ein benutzerdefiniertes Bild oder Symbol zu ersetzen.

Hier ist das aktualisierte Layout, bei dem ein Symbol anstelle des Standard-Fortschrittsbalken-Indikators rotiert:

< ?xml version="1.0" encoding="utf-8"?>

Auf den ersten Blick mag das Symbol statisch erscheinen. Dies liegt daran, dass wir es animieren müssen. Dazu verwenden wir das RotateDrawable, um die Animationsparameter wie Rotationswinkel und Drehpunkte zu definieren.

Verwendung von RotateDrawable für einen Drehungseffekt

Ein RotateDrawable wird erstellt, indem eine Grafik (wie ein Bild oder Symbol) innerhalb eines rotate-Tags umschlossen wird. Sie können Parameter wie den Rotationswinkel und die Geschwindigkeit festlegen. Hier erfahren Sie, wie Sie eine rotierende Grafik in progress_icon.xml definieren:

< ?xml version="1.0" encoding="utf-8"?>

In diesem Beispiel definiert das Attribut toDegrees die Anzahl der Grad für eine vollständige Drehung. Sie können diesen Wert anpassen, um die Rotationsgeschwindigkeit zu ändern. Eine vollständige Drehung wird in der Regel durch 360 Grad dargestellt.

Aktualisieren Sie jetzt das Layout, um dieses Drawable in Ihrer ProgressBar zu verwenden:

&lt ProgressBar
    android:id="@+id/progressBar"
   
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminateDrawable="@drawable/progress_icon"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" >

Ein einfaches Beispiel mit Fortschrittsverzögerungen

Kombinieren wir den rotierenden Fortschrittsbalken mit einer verzögerten Aktion. Der folgende Code zeigt nach einigen Sekunden des Ladens eine zufällige Nachricht aus einer Liste an, was einen häufigen Anwendungsfall zum Anzeigen eines Lade-Spinners vor dem Inhalt darstellt.

XML-Layout (activity_main.xml)

< ?xml version="1.0" encoding="utf-8"?>


    

    

MainActivity.java Code

package com.example.customprogressbar;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    TextView textView;
    List quotesList;
    ProgressBar progressBar;
    int i = 0;

    Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        quotesList = new ArrayList<>();

        quotesList.add("Hi");
        quotesList.add("Happy New Year");
        quotesList.add("Hope you have a good day");
        quotesList.add("Merry Christmas");

        Button btnTap = findViewById(R.id.button);
        textView = findViewById(R.id.textView);
        progressBar = findViewById(R.id.progressBar);

        btnTap.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                progressBar.setVisibility(View.VISIBLE);
                textView.setVisibility(View.GONE);
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {

                        if (i == quotesList.size())
                            i = 0;

                        textView.setVisibility(View.VISIBLE);
                        textView.setText(quotesList.get(i++));
                        progressBar.setVisibility(View.GONE);

                    }
                }, 3000);
            }
        });
    }
}

Schlussgedanken

Dieser Leitfaden zeigt, wie Sie einen benutzerdefinierten rotierenden Fortschrittsindikator in Android mit RotateDrawable erstellen können. Diese Funktion bietet eine reibungslose und anpassbare Möglichkeit, Ladeanimationen anzuzeigen, die das Branding Ihrer App unterstützen. Sie können dies in verschiedenen Szenarien implementieren, um das Benutzererlebnis zu verbessern, während Hintergrundaufgaben ausgeführt werden.