【问题标题】:How to implement a material design circular progress bar in android如何在android中实现材料设计圆形进度条
【发布时间】:2015-01-05 01:04:38
【问题描述】:

我想制作一个类似于 Inbox by Gmail android 应用中的 Material Design 圆形进度条。我如何实现这一点(在棒棒糖之前的设备中)?

我正在尝试实现类似的效果。 Inbox by Gmail material design circular progress bar

【问题讨论】:

标签: android material-design android-progressbar


【解决方案1】:
<ProgressBar
android:id="@+id/loading_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/your_customized_color"
android:layout_gravity="center" />

效果如下:

【讨论】:

  • 这不适用于棒棒糖之前的设备。 Pre Lollipop 设备使用不同的旋转drawable
【解决方案2】:

材料设计圆形进度条的不错实现(来自rahatarmanahmed/CircularProgressView),

<com.github.rahatarmanahmed.cpv.CircularProgressView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/progress_view"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:cpv_indeterminate="true"/>

【讨论】:

  • 嗨 Fahim,你所说的 Native progressBar 是什么意思?那是来自Android平台吗?我想实现相同类型的对话框,如果它可以从 android 本身或任何支持库中获得,效果会更好。
  • @cgr Native ProgressBar 是使用 Android SDK 实现的进度条。如果您在两个具有不同 Android 风格的设备(例如:Jelly Beans 和 Lollipop)上运行此应用程序,您将看到不同的进度条。自己试试吧。
  • 超级简单,谢谢。添加不透明背景颜色的最佳方法是什么?就像我想在一个更大的白色背景圆圈上做一个带有黑色圆弧圈的 gmail 类型的指示器?
【解决方案3】:

我已将三个 Material Design 进度可绘制对象向后移植到 Android 4.0,它可以用作常规 ProgressBar 的直接替代品,外观完全相同。

这些可绘制对象还向后移植了着色 API(和 RTL 支持),并使用 ?colorControlActivated 作为默认着色。为方便起见,还引入了扩展 ProgressBarMaterialProgressBar 小部件。

DreaminginCodeZH/MaterialProgressBar

该项目也已被afollestad/material-dialogs 用于进度对话框。

在 Android 4.4.4 上:

在 Android 5.1.1 上:

【讨论】:

  • 感谢您的所有努力!很棒的图书馆!坚持下去!
  • 非常优雅的解决方案,在我看来是最好的解决方案
  • 感谢图书馆!有没有办法改变微调器的颜色?
  • @Roymunson 查看自述文件和关于 app:mpb_progressTint 等的段落
【解决方案4】:

更新

截至 2019 年,这可以使用 Material Components 库中的 ProgressIndicator 轻松实现,与 Widget.MaterialComponents.ProgressIndicator.Circular.Indeterminate 样式一起使用。

更多详情请查看 Gabriele Mariotti's 下面回答。

旧实现

这里是材料设计圆形中间进度条https://gist.github.com/castorflex/4e46a9dc2c3a4245a28e 的一个很棒的实现。该实现仅缺乏通过 android 应用程序在收件箱中添加各种颜色的能力,但这做得非常好。

【讨论】:

    【解决方案5】:

    通过材料组件库,您可以使用CircularProgressIndicator

    类似:

    <com.google.android.material.progressindicator.CircularProgressIndicator
          android:indeterminate="true"          
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:indicatorColor="@array/progress_colors"
          app:indicatorSize="xxdp"
          app:indeterminateAnimationType="contiguous"/>
    

    array/progress_colors 是一个包含颜色的数组:

      <integer-array name="progress_colors">
        <item>@color/yellow_500</item>
        <item>@color/blue_700</item>
        <item>@color/red_500</item>
      </integer-array>
    

    注意:至少需要版本1.3.0

    【讨论】:

    • 这个进度条的支持是什么,它在 PreLolipop 上工作吗?
    • @StoychoAndreev 目前 minSdk = 14
    • Tnx 获取您的代码。但是这个类没有像“circularRadius”和“growMode”这样的属性。如果存在,请纠正我。
    • @GabrieleMariotti 再次感谢您的编辑。我想建议编辑,但不允许编辑答案。
    【解决方案6】:

    除了 cozeJ4 的 答案,这里是updated version of that gist

    原始版本缺少导入并包含一些错误。这个可以使用了。

    【讨论】:

    • 您能解释一下我们如何使用它吗?
    • 复制这些类,将包更改为项目的包,并在布局中使用 MaterialProgressBar 作为视图,仅此而已
    • 但我想在异步任务结束时显示这个,pro.bar aiso 必须完成。
    • 哇!多谢,伙计。使用 com.rey.material 库使我免于许多麻烦。
    • 你也有线性版本吗?
    【解决方案7】:

    该平台使用矢量可绘制对象,因此您不能像在旧版本中那样重复使用它。
    但是,支持 lib v4 包含此可绘制对象的反向移植: http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java 它有一个 @hide 注释(这里是 SwipeRefreshLayout),但没有什么能阻止你在代码库中复制这个类。

    【讨论】:

    • 好吧,现在我们有了 VectorDrawableCompat,你也许可以重复使用同一个 drawable
    【解决方案8】:

    正在寻找一种使用简单的xml 的方法,但找不到任何有用的答案,所以想出了这个。

    这也适用于棒棒糖之前的版本,并且非常接近材料设计进度条。你只需要在ProgressBar布局中使用这个drawable作为indeterminate drawable

    <?xml version="1.0" encoding="utf-8"?><!--<layer-list>-->
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="0"
        android:toDegrees="360">
        <layer-list>
            <item>
                <rotate xmlns:android="http://schemas.android.com/apk/res/android"
                    android:fromDegrees="-90"
                    android:toDegrees="-90">
                    <shape
                        android:innerRadiusRatio="2.5"
                        android:shape="ring"
                        android:thickness="2dp"
                        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
    
                        <gradient
                            android:angle="0"
                            android:endColor="#007DD6"
                            android:startColor="#007DD6"
                            android:type="sweep"
                            android:useLevel="false" />
                    </shape>
                </rotate>
            </item>
            <item>
                <rotate xmlns:android="http://schemas.android.com/apk/res/android"
                    android:fromDegrees="0"
                    android:toDegrees="270">
                    <shape
                        android:innerRadiusRatio="2.6"
                        android:shape="ring"
                        android:thickness="4dp"
                        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
                        <gradient
                            android:angle="0"
                            android:centerColor="#FFF"
                            android:endColor="#FFF"
                            android:startColor="#FFF"
                            android:useLevel="false" />
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </rotate>
    

    在ProgressBar中设置上述drawable如下:

      android:indeterminatedrawable="@drawable/above_drawable"
    

    【讨论】:

    • 未知属性 android:indeterminatedrawable
    • 动画完全不同。
    猜你喜欢
    • 1970-01-01
    • 2016-08-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-02
    • 2018-01-25
    • 2017-09-17
    • 1970-01-01
    相关资源
    最近更新 更多