我在图层列表中有一个进度条剪裁问题

问题描述 投票:0回答:1

我在相关点创建一个带圆圈的水平进度条=

enter image description here

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

enter image description here

显然我只想填写进度条本身。我无法弄清楚我做错了什么。

继承人我的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>

所以我想削减蓝色进度,会剪掉我灰色进度条周围的蓝色边缘,但这似乎并非如此。

任何帮助都会非常感谢

android android-layout
1个回答
1
投票

进度条只是一个可绘制的,位于另一个drawable的顶部。顶部抽屉被夹住以覆盖/暴露底部抽屉。您正在背景上放置一个矩形,因此随着进度的增加,矩形覆盖越来越多的背景。 (简而言之,ProgressBar在填充背景颜色方面并不聪明。)

因此,您将需要两个drawable:背景drawable,灰色,顶部是蓝色。这样的东西会起作用:

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>

这是显示:

enter image description here

对于API 21+,如果使用progressBackgroundTint,则进度条只需要一个drawable。

© www.soinside.com 2019 - 2024. All rights reserved.