web-dev-qa-db-fra.com

Progression circulaire avec un bouton d'action flottante

Je suis en train d'étudier le nouveau design des matériaux et j'ai quelques problèmes.

J'aimerais savoir si certains d'entre vous savent comment faire une barre de progression avec le bouton d'action flottante comme ceci https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with-integration- gif

Existe-t-il une api sur Android L pour cela?

Merci

androidandroid-5.0-lollipopmaterial-designfloating-action-button
20
Marco Souza

J'ai trouvé une lib qui fait ça, ça semble assez simple

https://github.com/ckurtm/FabButton

14
Marco Souza

Cela a fonctionné pour moi, j'ai utilisé une mise en page relative et les ai placés au centre de la mise en page relative. 

...
<RelativeLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|right"
    Android:layout_margin="16dp"
    app:layout_anchor="@id/my_recycler_view"
    app:layout_anchorGravity="bottom|right|end"
    >

    <ProgressBar
        Android:id="@+id/fabProgress"
        style="?android:attr/progressBarStyleLarge"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true"
        Android:layout_centerInParent="true"
        Android:indeterminateTint="@color/colorPrimary"
        />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/newReportButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@Android:drawable/ic_dialog_email"
        app:fabSize="normal"
        Android:layout_centerInParent="true"
        />

</RelativeLayout>
...
7
kunmi

Vous pouvez l'utiliser:https://github.com/DmitryMalkovich/circular-with-floating-action-button Pour intégrer la progression circulaire au bouton d'action flottante . La solution n'est pas une fabrique sur mesure, c'est seulement un simple conteneur pour votre notre fab, vous pouvez donc styler comme avant! 

<com.dmitrymalkovich.Android.ProgressFloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="@dimen/fab_margin"
    Android:clickable="true">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/ic_backup_black_24dp" />

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

</com.dmitrymalkovich.Android.ProgressFloatingActionButton>
4
Dmitry

Je suggérerais Floating Action Button de Jorge Costillo . Il vaut mieux que celui de Kurt parmi les réponses acceptées que j'ai également essayées. 

Celui de Kurt ne prend pas en charge les dessins vectoriels (attribut srcCompat), les problèmes de dimensionnement des images, pas de support fab-mini, les incohérences des directives relatives aux icônes des matériaux.

Le FAB de Costillo est également plus comme une enveloppe autour du FAB standard Android.

1
Zon

J'ai résolu le problème en ajoutant une barre de progression à la présentation, puis en utilisant un comportement personnalisé pour la barre de progression .

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools" Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="es.mediaserver.newinterfacedlna.MainActivity">

    <Android.support.design.widget.AppBarLayout Android:layout_width="match_parent"
        Android:layout_height="wrap_content" Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar Android:id="@+id/toolbar"
            Android:layout_width="match_parent" Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"
        Android:id="@+id/include" />

    <Android.support.design.widget.FloatingActionButton Android:id="@+id/fab"
        Android:layout_width="56dp"
        Android:layout_height="56dp"
        Android:layout_margin="28dp"
        Android:layout_gravity="bottom|center"
        app:srcCompat="@Android:drawable/ic_media_play" />

    <ProgressBar
        Android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyle"
        Android:layout_width="80dp"
        Android:layout_height="80dp"
        Android:layout_gravity="bottom|center"
        Android:indeterminate="true"
        Android:layout_margin="@dimen/fab_margin"
        />

</Android.support.design.widget.CoordinatorLayout>

Composant Comportement personnalisé

    public static class SnackBarBehavior extends CoordinatorLayout.Behavior<View> {
    private static final boolean SNACKBAR_BEHAVIOR_ENABLED;
    public SnackBarBehavior() {
        super();
    }
    public SnackBarBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return SNACKBAR_BEHAVIOR_ENABLED && dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }

    @Override
    public void onDependentViewRemoved(CoordinatorLayout parent, View child, View dependency) {
        child.setTranslationY(0);
    }

    static {
        SNACKBAR_BEHAVIOR_ENABLED = Build.VERSION.SDK_INT >= 11;
    }
}

Et enfin dans onCreate (ou dans la mise en page avec app: layout_behavior = "xxx.xxx.SnackBarBehavior")

ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar2);
SnackBarBehavior snackBarBehavior = new SnackBarBehavior();
        CoordinatorLayout.LayoutParams coordinatorParams = (CoordinatorLayout.LayoutParams) progressBar.getLayoutParams();
        coordinatorParams.setBehavior(snackBarBehavior);

Remarque: j'ai basé mon composant comportemental sur celui posté ici Comment déplacer une vue au-dessus de Snackbar exactement comme FloatingButton

0
Jose Luis Larraz

Vous pouvez utiliser la bibliothèque suivante pour créer le bouton de style de matériau> https://github.com/makovkastar/FloatingActionButton (ou celui-ci> https://github.com/futuresimple/Android-floating-action -bouton )

Pour le spinner, vous pouvez aussi utiliser cette bibliothèque> https://github.com/oguzbilgener/CircularFloatingActionMenu

Vous pouvez ensuite combiner ces deux composants en les ajoutant à un RelativeLayout (l'un au-dessus de l'autre) et également ajouter des animations, par exemple un bouton Développer avec zoom, élargir la progression derrière avec zoom. Tout ce que vous devez faire ensuite est d’accrocher le code à barres de progression pour le contracter une fois le chargement terminé, c’est-à-dire le réduire sous le bouton.

Pour une animation rétro-compatible, jetez un coup d'œil à 9 anciens Androids ici> http://nineoldandroids.com/

J'espère que cela t'aides. 

0
Andy B