从下到上逐渐填充一个圆圈android

Question

我使用 xml 创建了一个带有笔划和白色背景的圆圈。如何根据用户操作（例如连续按下按钮）从下到上逐渐填充？

有没有免费的库可以用来实现类似的事情？

Answer 1

如果你像这样安排你的drawable：

res/drawable/custom_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingMode="stack">

    <item android:id="@android:id/background">
        <inset android:inset="@dimen/border_width">
            <shape android:shape="oval">
                <solid android:color="@color/background" />
            </shape>
        </inset>
    </item>

    <item android:id="@android:id/progress">
        <inset android:inset="@dimen/border_width">
            <clip
                android:clipOrientation="vertical"
                android:gravity="bottom">
                <shape android:shape="oval">
                    <solid android:color="@color/progress" />
                </shape>
            </clip>
        </inset>
    </item>

    <item>
        <shape android:shape="oval">
            <stroke
                android:width="@dimen/border_width"
                android:color="@color/border" />
        </shape>
    </item>

</layer-list>

它可以直接与

ProgressBar

一起使用，如下所示：

res/layout/activity_example.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/custom_progress_bar"
        style="?android:progressBarStyleHorizontal"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginVertical="10dp"
        android:progressDrawable="@drawable/custom_progress" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:valueTo="100"
        app:labelBehavior="gone" />

</LinearLayout>

然后可以将其连接到

Slider

，如下所示：

class ExampleActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val ui = ActivityExampleBinding.inflate(layoutInflater)
        setContentView(ui.root)

        ui.slider.addOnChangeListener { _, value, _ ->
            ui.customProgressBar.progress = value.roundToInt()
        }
    }
}

你会得到这样的结果：

<item>

中的

custom_progress

只是可以设置的常规绘图 像在任何其他上下文中一样启动和配置。例如里面的

<solid>

<shape>

可以替换为

<gradient>

，如上所示 相关开发者页面。

---

此答案的以前版本使用了定制的自定义

View

去做这个。现在我不一定会推荐这种方法，既然 我对事物比较熟悉，但它确实显示出一个漂亮的 自定义属性的简单示例（如果您需要的话） 设置。

ProgressBar

可以被子类化以将自定义属性应用于 进度可绘制，尽管需要一些繁琐的工作才能找到实际的 包裹在

InsetDrawable

和

ClipDrawable

中并添加到的可绘制对象 a

LayerDrawable

（当然，除非您想手动实例化它们）。

从 API 级别 24 开始，自定义属性的另一个选项是 创建一个

Drawable

子类来覆盖

inflate()

来处理它们， 允许在可绘制 XML 中对其进行配置。

<drawable xmlns:app="http://schemas.android.com/apk/res-auto"
    class="com.your.package.CustomDrawable"
    app:progressColor="@color/blue"
    … />

您可以咨询平台

Drawable

课程看看如何

inflate()

应该实施。