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

Posted 2023-02-22

【中文标题】带有浮动操作按钮的循环进度[关闭]

【英文标题】：Circular Progress with a floating action button [closed]

【发布时间】：2014-11-12 04:57:24

【问题描述】：

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

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

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

谢谢

【参考方案1】：

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

https://github.com/ckurtm/FabButton

【讨论】：

有没有任何方法可以在没有任何库支持的情况下使用它？只是纯本机代码。

要逃避库支持 - 点击链接，下载演示项目并将代码复制到您自己的项目中。

【参考方案2】：

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

...
<RelativeLayout
    android:layout_
    android:layout_
    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_
        android:layout_
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:indeterminateTint="@color/colorPrimary"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/newReportButton"
        android:layout_
        android:layout_
        android:src="@android:drawable/ic_dialog_email"
        app:fabSize="normal"
        android:layout_centerInParent="true"
        />

</RelativeLayout>
...

【参考方案3】：

您可以使用它： https://github.com/DmitryMalkovich/circular-with-floating-action-button 将循环进度与浮动操作按钮相结合。 解决方案不是定制工厂，它只是您我们的工厂的简单容器，因此您可以像以前一样设计！

<com.dmitrymalkovich.android.ProgressFloatingActionButton
    android:layout_
    android:layout_
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true">

    <android.support.design.widget.FloatingActionButton
        android:layout_
        android:layout_
        android:src="@drawable/ic_backup_black_24dp" />

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar"
        android:layout_
        android:layout_ />

</com.dmitrymalkovich.android.ProgressFloatingActionButton>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

谢谢@MuhammedRefaat。现在好点了吗？

当然，这是一个完整且完整的答案。

【参考方案4】：

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

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

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

【讨论】：

测试过这个？ ***.com/a/36667320/304270

是的。我已经在我的项目中实现了它，但是在本地复制了这些类，而不是 gradle import。也做了一些调整。

酷...所以您仍然认为豪尔赫的作品是最好的吗？提前致谢

我都试过了，发现由于上述原因，Costillo 的 FAB 更适合采用。

这是一个很棒的库，但是当你的父布局是 FrameLayout 时不起作用。

【参考方案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/

希望这会有所帮助。

【参考方案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_
    android:layout_
    tools:context="es.mediaserver.newinterfacedlna.MainActivity">

    <android.support.design.widget.AppBarLayout android:layout_
        android:layout_ android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_ android:layout_
            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_
        android:layout_
        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_
        android:layout_
        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