Android - Przycisk z obracającym się/wirującym obrazkiem "ładującym" po naciśnięciu

Question

Mam duży przycisk "Zaloguj się" na mojej aplikacji. Kiedy użytkownik dotknie tego przycisku, chcę zamienić tekst na "Logowanie ...", wyrównaj go w lewo zamiast w środku i umieść obracający się okrąg po prawej stronie (ale wciąż w środku przycisku). Chciałbym użyć tego samego przycisku (ale z innym początkowym tekstem i ładowaniem tekstu) w innych miejscach w mojej aplikacji.

Jaki jest najmilszy sposób na zrobienie tego? Jeśli chodzi o rzeczywistą grafikę, planowałem użyć urządzenia @drawable/spinner_white_16 dostarczanego z systemem Android.

Dzięki.

Answer 1

Możesz utworzyć swój własny przycisk za pomocą RelativeLayout zawierającego TextView i ImageView.

<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> 

A potem bez względu na sposób logowania się nazywa, zmień zawartość TextView, sprawiają, że dostosowanie prawa nadrzędnego i ustaw widoczność ImageView się widoczne.

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

A także chciałbym mieć kod, który odwraca te zmiany, jeśli logowanie się nie powiedzie.

Answer 2

Utwórz własny przycisk, który składa się z wyśrodkowanego TextView i GONEImageView. Po kliknięciu przenieś TextView w lewo i wprowadź ImageView z widocznym wyciągiem.

Answer 3

Oto implementacja że wymyśliłem, mam nadzieję, że jej wielokrotnego użytku:

ProgressButton

W momencie, gdy użytkownik kliknie przycisk, wyświetli się rozciągliwej (i ożywiony) dla ciebie, ale ciebie będzie musiał ręcznie odwołać animację ładowania raz skończysz z zadania w tle poprzez:

_progressButton.stopLoadingAnimation(); 

to będzie odrzucić dowolną animację dla Ciebie i wyświetlić dowolny tekst, który wcześniej był tam. Jedyne, czego mu brakuje, że nie ma tekstu podczas trwania animacji, ale myślę, że możesz zhackować coś razem. Mam zamiar rozszerzyć to nieco bardziej, aby umożliwić ci wywołanie czegoś takiego jak _progressButton.setProgress(10), a następnie ustawić procent, który jest wykonywany. Może nawet sprawię, że wątek będzie bezpieczny.

W ten sposób nie trzeba używać wielu układów i osadzać żadnych widoków tekstowych na przyciskach, a wszystkie one są obsługiwane.