23

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

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

Android L上有没有为此的api？

谢谢

4

5 回答 5

15

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

...
<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>
...
于 2017-03-31T10:55:12.127 回答
4

您可以使用它： 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>
于 2016-04-16T17:24:30.303 回答
2

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

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

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

于 2018-01-15T08:02:17.840 回答
0

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

对于微调器，您还可以使用此库 > https://github.com/oguzbilgener/CircularFloatingActionMenu

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

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

希望这可以帮助。

于 2014-11-28T10:31:57.270 回答
0

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

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

注意：我的行为组件基于此处发布的 如何在 Snackbar 上方移动视图，就像 FloatingButton

于 2017-10-12T12:36:39.813 回答