web-dev-qa-db-fra.com

Android barre de progression dans le bouton

Est-il possible d'afficher une barre de progression de rotation dans un bouton? par exemple. comme arrière-plan dessinable?

androidbuttonprogress-bar
36
Fabian

Oui.

Vous pouvez créer un AnimationDrawable, comme décrit ici , puis utiliser la balise drawableLeft (par exemple) dans le XML de votre bouton. ainsi:

<Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/your_background_drawable_resource"
        Android:drawableLeft="@drawable/your_animation_drawable_resource"
        Android:text="@string/your_text_res">
</Button>
33
Lior

Oui ... Il suffit d'enrouler le bouton et la barre de progression dans une disposition relative, comme ça ...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical" Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:weightSum="1">

    <RelativeLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center_horizontal">

        <ProgressBar
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:id="@+id/progressBar"
            Android:layout_gravity="right"
            Android:layout_alignTop="@+id/btnConnect"
            Android:layout_alignRight="@+id/btnConnect"
            Android:layout_alignEnd="@+id/btnConnect" />

        <Button
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Connect"
            Android:id="@+id/btnConnect"
            Android:layout_gravity="center_horizontal"
            Android:layout_marginTop="30dp"
            Android:width="200dp"
            Android:focusable="false"
            Android:focusableInTouchMode="false" />
    </RelativeLayout>

    <TextView
        Android:id="@+id/txtConnectStatus"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_below="@+id/btnConnect"
        Android:layout_alignParentBottom="true"
        Android:layout_centerHorizontal="true"
        Android:text="Status : Not connected"
        Android:textSize="12dp"
        Android:layout_gravity="center_horizontal" />

    <LinearLayout
        Android:orientation="vertical"

Je voulais publier l'exemple d'image, mais je n'ai pas encore assez de réputation ...;)

25
sam byte

J'avais le même problème, j'ai donc créé un bouton spécialisé pour cela: LoadingProgressButton

Incluez le bouton comme ceci:

    <br.com.simplepass.loading_button_lib.CircularProgressButton
Android:id="@+id/btn_id"
     Android:layout_width="match_parent"
     Android:layout_height="wrap_content"
     Android:background="@drawable/circular_border_shape"
     app:spinning_bar_width="4dp" <!-- Optional -->
     app:spinning_bar_color="#FFF" <!-- Optional -->
     app:spinning_bar_padding="6dp" <!-- Optional -->

Et utilisez-le comme ceci:

    CircularProgressButton btn = (CircularProgressButton) findViewById(R.id.btn_id)
            btn.startAnimation(); 
                [do some async task. When it finishes]

                 //You can choose the color and the image after the loading is finished
                 btn.doneLoagingAnimation(fillColor, bitmap);
                 [or just revert de animation]
                 btn.revertAnimation();

enter image description here

24
Leandro Borges Ferreira

J'ai fait un exemple de code comme ci-dessous .. J'espère que mes codes vous aideront :)

[main.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    Android:gravity="center"
    >

    <Button
        Android:id="@+id/wheel_button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/icon_spin_animation"
        />
</LinearLayout>

[icon_spin_animation.xml]

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/selected" Android:oneshot="false">

    <item Android:drawable="@drawable/wheel_db_update01" Android:duration="50"/>
    <item Android:drawable="@drawable/wheel_db_update02" Android:duration="50"/>
    <item Android:drawable="@drawable/wheel_db_update03" Android:duration="50"/>
    <item Android:drawable="@drawable/wheel_db_update04" Android:duration="50"/>
    <item Android:drawable="@drawable/wheel_db_update05" Android:duration="50"/>
    <item Android:drawable="@drawable/wheel_db_update06" Android:duration="50"/>

 </animation-list>

[Code d'activité]

public class ProgressOnTheButtonActivity extends Activity implements OnClickListener {
    /** Called when the activity is first created. */
     AnimationDrawable mFrameAnimation = null;

     boolean mbUpdating = false;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Button btnWheel = (Button)findViewById(R.id.wheel_button);
        btnWheel.setOnClickListener(this);

        mFrameAnimation = (AnimationDrawable) btnWheel.getBackground();
    }

    public void onClick(View v) {
        if(v.getId() == R.id.wheel_button) {
            if(!mbUpdating) {
                mbUpdating = true;
                new AsyncTaskForUpdateDB().execute("");
            }
        }

    }

    private class AsyncTaskForUpdateDB extends AsyncTask<String, Integer, ResultOfAsyncTask> {      

        @Override
        protected void onPreExecute() {

            mFrameAnimation.start();
            super.onPreExecute();
        }

        @Override
        protected ResultOfAsyncTask doInBackground(String... strData) {
            ResultOfAsyncTask result = new ResultOfAsyncTask();

            try {
                Thread.sleep(5000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            return result;
        }

        @Override
        protected void onPostExecute(ResultOfAsyncTask result) {
            mFrameAnimation.stop();
            mbUpdating = false;
        }

        @Override
        protected void onCancelled() {
            mFrameAnimation.stop();
            mbUpdating = false;
            super.onCancelled();
        }

        @Override
        protected void onProgressUpdate(Integer... progress) {
        }
    }

    private class ResultOfAsyncTask {
        int iErrorCode = 0;
    }
}
3
cmcromance

Pour faire fonctionner Animatable drawables, vous devez étendre la classe Button et appeler Animatable.start() pour les drawables. J'ai fait une implémentation pour cela:

package com.example.yourapplication;

import Android.content.Context;
import Android.graphics.drawable.Animatable;
import Android.graphics.drawable.Drawable;
import Android.support.v7.widget.AppCompatButton;
import Android.util.AttributeSet;

public class AnimateCompoundDrawableButton extends AppCompatButton {

    public AnimateCompoundDrawableButton(Context context) {
        super(context);
    }

    public AnimateCompoundDrawableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public AnimateCompoundDrawableButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom) {
        super.setCompoundDrawables(left, top, right, bottom);

        startIfAnimatable(left);
        startIfAnimatable(top);
        startIfAnimatable(right);
        startIfAnimatable(bottom);
    }

    @Override
    public void setCompoundDrawablesRelative(Drawable start, Drawable top, Drawable end, Drawable bottom) {
        super.setCompoundDrawablesRelative(start, top, end, bottom);

        startIfAnimatable(start);
        startIfAnimatable(top);
        startIfAnimatable(end);
        startIfAnimatable(bottom);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        // Makes a copy of the array, however we cannot do this otherwise.
        for (Drawable drawable : getCompoundDrawables()) {
            startIfAnimatable(drawable);
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();

        // Makes a copy, however we cannot do this otherwise.
        for (Drawable drawable : getCompoundDrawables()) {
            stopIfAnimatable(drawable);
        }
    }

    private void startIfAnimatable(Drawable drawable) {
        if (drawable instanceof Animatable) {
            ((Animatable) drawable).start();
        }
    }

    private void stopIfAnimatable(Drawable drawable) {
        if (drawable instanceof Animatable) {
            ((Animatable) drawable).stop();
        }
    }
}
2
Hai Zhang

Une autre option consiste à utiliser le nifty Spezi-Views , il contient un ProgressButton qui est assez facile à utiliser:

<de.halfreal.spezi.views.ProgressButton
        Android:id="@+id/button1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Press me"
        app:selectedText="I am loaded"
        app:unselectedText="Press me again"
        app:loadingDrawable="@drawable/spinner"
        />

et en code:

...
//show a rotation spinner, and no text (or the loading text)
progressButton.enableLoadingState();

//show no animation, but the selected/ unselected text
progressButton.disableLoadingState();
...
1
joecks