Подтвердить что ты не робот

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

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

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

Есть ли какой-либо api на Android L для этого?

Спасибо

4b9b3361

Ответ 2

Вы можете использовать его: 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>

Ответ 3

Это сработало для меня, я использовал 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>
...

Ответ 4

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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