Question

我正在创建一个水平进度条，在相关点处带有圆圈=

问题是，当我添加进度时，它将填充进度条的整个容器=

所以显然我只想填写进度条本身。我不能弄清楚我在做什么错。

这是我的xml =

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

    <item android:id="@+id/background">
        <shape>
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>

    <item android:id="@+id/progressHolder"
        android:gravity="center_horizontal">
        <shape>
            <solid
                android:color="#C7C7C7"/>
            <corners android:radius="10dp"/>
            <size android:width="5dp"/>
        </shape>
    </item>

    <item
        android:gravity="top|center">
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>

    <item
        android:bottom="70dp"
        android:gravity="center"
        >
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>

    <item
        android:top="70dp"
        android:gravity="center"
        >
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>

    <item
        android:gravity="bottom|center"
        >
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>

    <item android:id="@+id/progress">
        <clip
            android:clipOrientation="vertical"
            android:gravity="bottom">
            <shape>
                <solid
                    android:color="@color/info_blue"/>
                <corners
                    android:radius="10dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

所以我想剪切蓝色进度，会剪切灰色进度条周围的蓝色边缘，但是事实并非如此。

任何帮助都将非常感谢

Answer 1

进度条只是一个可绘制对象，位于另一个可绘制对象的顶部。顶部可绘制对象被修剪以覆盖/暴露底部可绘制对象。您将在背景上方放置一个矩形，因此，随着进度的增加，矩形将覆盖越来越多的背景。（简而言之，ProgressBar不能很好地填充背景颜色。）

因此，您将需要两个可绘制对象：背景可绘制对象是灰色，顶部是蓝色。这样的事情会起作用：

progress_unfilled.xml

<layer-list>

    <item android:id="@+id/progressHolder"
        android:gravity="center_horizontal">
        <shape>
            <solid
                android:color="#C7C7C7"/>
            <corners android:radius="10dp"/>
            <size android:width="5dp"/>
        </shape>
    </item>

    <item
        android:gravity="top|center">
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>

    <item
        android:bottom="70dp"
        android:gravity="center"
        >
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>

    <item
        android:top="70dp"
        android:gravity="center"
        >
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>

    <item
        android:gravity="bottom|center"
        >
        <shape
            android:shape="oval">
            <size
                android:height="20dp"
                android:width="20dp"/>
            <solid
                android:color="#C7C7C7"/>
        </shape>
    </item>
</layer-list>

progress_filled.xml 相同，但颜色为@color/info_blue。

现在，我们将它们放入progress_drawable.xml：

progress_drawable.xml

<layer-list>

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/progress_unfilled"
        android:gravity="center_horizontal" />

    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="vertical"
            android:drawable="@drawable/progress_filled"
            android:gravity="bottom" />
    </item>
</layer-list>

和XML布局文件：

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:progress="75"
        android:progressDrawable="@drawable/progress_drawable"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

这是显示的内容：

对于API 21+，如果您使用progressBackgroundTint，则进度条只需要一个可绘制对象。

我在图层列表中遇到了进度条剪切的问题

1 个答案: