У меня есть проблема отсечения индикатора выполнения в списке слоев

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, тогда для индикаторов выполнения требуется только один вывод для рисования.