it-swarm.com.ru

Круговой прогресс с плавающей кнопкой действия

Я изучаю новый дизайн материала, и у меня есть некоторые проблемы.

Я хотел бы знать, если некоторые из вас знают, как я могу сделать индикатор выполнения с плавающей кнопкой действия, как это https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with -интеграция-gif

Есть ли на Android L API для этого?

Спасибо

20
Marco Souza

Я нашел библиотеку, которая делает это, кажется довольно простым

https://github.com/ckurtm/FabButton

14
Marco Souza

Это сработало для меня, я использовал Relative-Layout и поместил оба в центре Relative-Layout. 

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

Вы можете использовать его:https://github.com/DmitryMalkovich/circular-with-floating-action-button Для интеграции кругового хода с плавающей кнопкой действия . Решение - это не просто фабрика, а просто контейнер для нашей фабрики, так что вы можете делать стили, как раньше! 

<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

Я бы предложил Плавающая кнопка действия Хорхе Костильо . Это лучше, чем у Курта из принятого ответа, который я тоже попробовал. 

У Курта нет поддержки векторных объектов рисования (атрибут srcCompat), проблем с размером изображения, нет поддержки fab-mini, ошибочных указаний по значкам материалов.

Costillo FAB также больше похож на оболочку вокруг стандартного Android FAB.

1
Zon

Я решил проблему, добавив в макет панель с прогами, а затем с помощью пользовательского поведения для индикатора выполнения . Макет:

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

Пользовательский компонент поведения

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

И, наконец, в onCreate (или в макете с приложением: 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);

Примечание. Я основал свой компонент поведения на компоненте, размещенном здесь Как переместить представление над снэк-баром так же, как FloatingButton

0
Jose Luis Larraz

Вы можете использовать следующую библиотеку для создания кнопки стиля материала> https://github.com/makovkastar/FloatingActionButton (или эта> https://github.com/futuresimple/Android-floating-action кнопка )

Для прядильщика вы также можете использовать эту библиотеку> https://github.com/oguzbilgener/CircularFloatingActionMenu

Затем вы можете объединить эти два компонента, добавив их в RelativeLayout (один поверх другого), а также добавить некоторые анимации, т. Е. Кнопку «Развернуть» с увеличением, а затем увеличить прогресс с увеличением. Все, что вам нужно сделать, это подключиться к штрих-коду, чтобы свернуть его после завершения загрузки, т.е. сжать его за кнопкой.

Для обратной совместимости анимации посмотрите на 9 старых Android здесь> http://nineoldandroids.com/

Надеюсь это поможет. 

0
Andy B