Android - Schaltfläche mit rotierenden/rotierenden "loading" Bild bei gedrückter

Question

Ich habe eine große "Login" -Taste in meiner App. Wenn der Benutzer auf diese Schaltfläche klickt, möchte ich den Text durch "Anmelden ..." ersetzen, ihn nach links anstatt nach Mitte ausrichten und einen Kreis auf der rechten Seite (aber immer noch innerhalb der Schaltfläche) platzieren. Ich möchte im Wesentlichen den gleichen Knopf (aber mit anderem Anfangs- und Ladetext) an anderen Orten in meiner App verwenden.

Was ist der beste Weg, dies zu tun? Für die eigentliche drehende Grafik wollte ich die @drawable/spinner_white_16 verwenden, die mit Android kommt.

Danke.

Answer 1

Sie können Ihre eigene Schaltfläche mit einem RelativeLayout erstellen, das eine TextView und eine ImageView enthält.

<RelativeLayout android:id="@+id/login" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    onClick="[yourLoginMethod]" > 

    <TextView android:id="@+id/login_text" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:text="Log In" /> 

    <ImageView android:id="@+id/login_loading" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@id/login_text" 
     android:visibility="gone" /> 

</RelativeLayout> 

Und dann in was auch immer Ihre Login-Methode aufgerufen, um den Inhalt des Textview ändern, macht es Eltern rechts auszurichten, und stellen Sie die Image Sichtbarkeit sichtbar.

loginText.setText("Logging In..."); 
LayoutParams params = loginText.getLayoutParams(); 
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); 
loginText.setLayoutParams(params); 
loginLoading.setVisibility(View.VISIBLE); 

Und dann hätte ich auch etwas Code, der diese Änderungen rückgängig macht, wenn die Anmeldung fehlschlägt.

Answer 2

Erstellen Sie Ihren eigenen Knopf, der aus einem zentrierten TextView und GONEImageView besteht. Nach dem Klick bewegen Sie TextView nach links und machen ImageView mit Ihrem Zeichen sichtbar.

Answer 3

Hier ist eine Implementierung, die ich mit aufkommen, hoffentlich seine wiederverwendbar:

ProgressButton

Im Moment, wenn der Benutzer auf die Schaltfläche klickt, wird es die ziehbar (und animiert) für Sie anzeigen, aber Sie wird die Lade Animation manuell schließen, sobald Sie mit Ihrer Hintergrundaufgabe über beendet haben:

_progressButton.stopLoadingAnimation(); 

Dies wird entlassen jede Animation für dich und zeigen all vorherigen Text, der dort war. Es fehlt nur, dass es während der Animation keinen Text gibt, aber ich denke, dass man dafür etwas zusammenhacken kann. Ich plane, dies ein wenig weiter zu erweitern, so dass Sie so etwas wie _progressButton.setProgress(10) anrufen können und dann den Prozentsatz, der getan wird, einstellen. Ich kann es sogar sicher machen.

Auf diese Weise müssen Sie nicht mehrere Layouts verwenden und Textansichten über Schaltflächen einbetten, und alles wird für Sie behandelt.