Question

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

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

Android L上有api吗？

由于

Answer 1

我发现了一个lib，它看起来非常简单

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更好。

Kurt的不支持矢量drawables（srcCompat属性），图像大小调整问题，没有fab-mini支持，材料图标指南错误。

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

Answer 5

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

对于微调器，您也可以使用此库＆gt; https://github.com/oguzbilgener/CircularFloatingActionMenu

然后，您可以将这两个组件添加到RelativeLayout（一个在另一个上面），并添加一些动画，例如展开按钮和缩放，通过缩放展开后面的进度。所有你需要做的就是挂钩进度条代码，一旦它完成加载就缩小它，然后将它缩小到按钮后面。

对于向后兼容的动画，请查看此处的9个旧机器人＆gt; http://nineoldandroids.com/

希望这会有所帮助。

Answer 6

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

<?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 =＆＃34; xxx.xxx.SnackBarBehavior＆＃34;）

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

循环进度使用浮动操作按钮

6 个答案: