it-swarm.com.de

Zirkularer Fortschritt mit einer schwebenden Aktionstaste

Ich studiere das neue Materialdesign und habe einige Probleme.

Ich würde gerne wissen, ob einige von Ihnen wissen, wie ich einen Fortschrittsbalken mit der schwebenden Aktionsschaltfläche wie diesem ausführen kann https://dribbble.com/shots/1644982-Animated-circle-loader-FAB- with-integration-gif

Gibt es eine API für Android L?

Vielen Dank

20
Marco Souza

Ich habe eine lib gefunden, die das macht, es scheint ziemlich einfach zu sein

https://github.com/ckurtm/FabButton

14
Marco Souza

Das funktionierte für mich, ich verwendete ein Relativ-Layout und passte beides in die Mitte des Relativ-Layouts. 

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

Sie können es verwenden:https://github.com/DmitryMalkovich/circular-with-floating-action-button , Um den zirkulären Fortschritt mit der schwebenden Aktionsschaltfläche ..__ zu integrieren. Die Lösung ist keine Spezialanfertigung, es ist nur ein einfacher Behälter für Ihre Anfertigung, Sie können also wie gewohnt stylen! 

<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

Ich würde vorschlagen Floating Action Button von Jorge Costillo . Es ist besser als der von Kurt aus der akzeptierten Antwort, die ich auch ausprobiert habe. 

Das von Kurt hat keine Unterstützung für Vektorzeichnungen (srcCompat-Attribut), Probleme bei der Bildgröße, keine fab-mini-Unterstützung und Material-Icon-Richtlinien.

Costillo's FAB ist auch eher eine Hülle für Android FAB.

1
Zon

Ich habe das Problem gelöst, indem eine Fortschrittsleiste zum Layout hinzugefügt wurde und dann ein benutzerdefiniertes Verhalten für die Fortschrittsleiste verwendet wurde . Layout:

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

Benutzerdefinierte Verhaltenskomponente

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

Und zum Schluss im onCreate (oder im Layout mit 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);

Hinweis: Ich habe meine Verhaltenskomponente in der hier veröffentlichten Komponente erstellt Wie man eine Ansicht über die Snackbar bewegt, genau wie bei FloatingButton

0

Sie können die folgende Bibliothek verwenden, um die Schaltfläche für den Materialstil> https://github.com/makovkastar/FloatingActionButton (oder dieses> https://github.com/futuresimple/Android-floating-action) zu erreichen -Taste )

Für den Spinner können Sie auch diese Bibliothek verwenden> https://github.com/oguzbilgener/CircularFloatingActionMenu

Sie können diese beiden Komponenten dann kombinieren, indem Sie sie zu einem RelativeLayout hinzufügen (übereinander) und außerdem einige Animationen hinzufügen, d. H. Die Schaltfläche zum Erweitern mit Zoom, den Fortschritt hinter dem Zoom. Sie müssen dann nur noch den Fortschritts-Barcode einhaken, um ihn zu kontrahieren, sobald der Ladevorgang abgeschlossen ist, d. H. Er hinter der Schaltfläche schrumpfen.

Für abwärtskompatible Animationen werfen Sie einen Blick auf 9 alte Androiden hier> http://nineoldandroids.com/

Hoffe das hilft. 

0
Andy B