带有浮动操作按钮的循环进度[关闭]

Question

我正在研究新的材料设计，但遇到了一些问题。

我想知道你们中的一些人是否知道如何使用像这样的浮动操作按钮来制作进度条 https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with-integration-gif

Android L 上是否有用于此的 api？

谢谢

Answer 1

我找到了一个可以做到这一点的库，看起来很简单

https://github.com/ckurtm/FabButton

Answer 2

这对我有用，我使用了相对布局并将两者都安装在相对布局的中心。

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

Answer 3

您可以使用它： 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>

Answer 4

我建议Floating Action Button by Jorge Costillo。从我也尝试过的公认答案中，它比库尔特的要好。

Kurt 不支持矢量可绘制对象（srcCompat 属性）、图像大小问题、不支持 fab-mini、材质图标指南不正确。

Costillo 的 FAB 也更像是标准 Android FAB 的封装。

Answer 5

你可以使用下面的库来实现材质样式按钮>https://github.com/makovkastar/FloatingActionButton（或者这个>https://github.com/futuresimple/android-floating-action-button）

对于微调器，你也可以使用这个库 > https://github.com/oguzbilgener/CircularFloatingActionMenu

然后，您可以通过将这两个组件添加到 RelativeLayout（一个在另一个之上）来组合这两个组件，还可以添加一些动画，即用缩放扩展按钮，用缩放扩展后面的进度。然后，您需要做的就是钩入进度条代码，以便在完成加载后收缩它，即将它缩小到按钮后面。

对于向后兼容的动画，请在此处查看 9 个旧 Android > http://nineoldandroids.com/

希望这会有所帮助。

Answer 6

我已经解决了在布局中添加进度条然后为进度条使用自定义行为的问题。 布局：

<?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 中（或在 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);

注意：我的行为组件基于此处发布的组件 How to move a view above Snackbar just like FloatingButton