Question Circular Progress avec un bouton d'action flottant [fermé]


J'étudie le nouveau design du matériel et j'ai des problèmes.

Je voudrais savoir si certains d'entre vous savent comment faire une barre de progression avec le bouton d'action flottant comme celui-ci https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with-integration-gif

Y a-t-il un api sur Android L pour cela?

Merci


20
2017-09-18 01:16


origine


Réponses:


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

https://github.com/ckurtm/FabButton


13
2018-03-16 16:01



Cela a fonctionné pour moi, j'ai utilisé une mise en page relative et adapté à la fois au centre de la disposition 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>
...

6
2018-03-31 10:55



Tu peux l'utiliser: https://github.com/DmitryMalkovich/circular-with-floating-action-button intégrer le progrès circulaire avec le bouton d'action flottant. La solution n'est pas une fabrique personnalisée, ce n'est qu'un simple conteneur pour votre fabuleux, donc vous pouvez styliser 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
2018-04-16 17:24



Vous pouvez utiliser la bibliothèque suivante pour obtenir le bouton de style de matière> https://github.com/makovkastar/FloatingActionButton (ou celui-ci> https://github.com/futuresimple/android-floating-action-button)

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

Vous pouvez ensuite combiner ces deux composants en les ajoutant à un RelativeLayout (l’un sur l’autre) et en ajoutant des animations, par exemple, en développant le bouton avec le zoom, en développant le zoom arrière. Tout ce que vous avez besoin de faire est alors de vous connecter au code-barres de progression pour le contracter une fois le chargement terminé, c'est-à-dire le rétrécir derrière le bouton.

Pour une animation rétro-compatible, regardez 9 anciens androïdes ici> http://nineoldandroids.com/

J'espère que cela t'aides.


0
2017-11-28 10:31



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

<?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 de 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 le 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);

Note: J'ai basé mon composant comportemental sur celui posté ici Comment déplacer une vue au-dessus de Snackbar, tout comme FloatingButton


0
2017-10-12 12:36



je voudrais suggerer Bouton d'action flottant par Jorge Costillo. C'est mieux que celui de Kurt de la réponse acceptée que j'ai aussi essayée.

Celui de Kurt ne prend pas en charge les éléments vectoriels (attribut srcCompat), les problèmes de dimensionnement d'image, l'absence de prise en charge de fab-mini, les erreurs de guidage des icônes de matériaux.

Le FAB de Costillo ressemble plus à un wrapper autour d'Android FAB standard.


0
2018-01-15 08:02