使背景部分的形状变化与进度部分相反

Question

我为我的应用制作动画甜甜圈进度条。在此之前，我使用 class 进行绘图，但用户告诉我自 Android 8.

以来应用程序在此时崩溃

我说了"OK"，让我改一下ProgressBar的类型。我找到了这样的解决方案（其他元素，看起来像以前的）。并设置半透明颜色以查看每个图层的碰撞。如您所见，New 中没有空闲像素（橙色和绿色之间）。橙色部分就像绿色（进度）部分的背景：

我在 Activity 上的进度条：

        <ProgressBar
        android:id="@+id/pb"
        android:layout_width="150dp"
        android:layout_height="150dp"
        style="?android:progressBarStyleHorizontal"
        android:progressDrawable="@drawable/circle"/>

以及这个 PB 的形状：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="ring"
            android:thicknessRatio="10"
            android:useLevel="false">
            <solid android:color="#55ffa500" />
        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape
                android:shape="ring"
                android:thicknessRatio="10"
                android:useLevel="true">
                <solid android:color="#5589c154" />
            </shape>
        </rotate>
    </item>
</layer-list>

和简单的动画：

ProgressBar progressBar = findViewById(R.id.pb);
        ObjectAnimator progressAnimator = ObjectAnimator.ofInt(progressBar, "Progress", 0,80);
        progressAnimator.setStartDelay(500);
        progressAnimator.setDuration(1000);
        progressAnimator.start();

看来我应该为带空格的橙色部分设置进度 (100%-progress-spaces)。

Answer 1

问题可以用两条 "clock-arrow" 行作为分隔符来解决：

可以指定的背景颜色：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="ring"
            android:thicknessRatio="10"
            android:useLevel="false">
            <solid android:color="@color/orange" />
        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape
                android:shape="ring"
                android:thicknessRatio="10"
                android:useLevel="true">
                <solid android:color="@color/green" />
            </shape>
        </rotate>
    </item>
    <item android:left="75dp" android:gravity="center">
        <rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="270">
            <shape
                android:shape="line"
                android:useLevel="false">

                <size android:width="75dp" android:height="75dp"/>
                <stroke android:width="3dp" android:color="@color/material"/>
            </shape>
        </rotate>
    </item>
    <item android:left="75dp" android:gravity="center">
        <rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="630">
            <shape
                android:shape="line"
                android:useLevel="false">

                <size android:width="75dp" android:height="75dp"/>
                <stroke android:width="3dp" android:color="@color/material"/>
            </shape>
        </rotate>
    </item>
</layer-list>

使背景部分的形状变化与进度部分相反

Make background part of the shape change opposite of progress part

android

shapes

android-layout

layer-list