Панель поиска или индикатор хода с несколькими цветами

enter image description here

Я хочу создать панель, как это первоначально, когда прогресс будет равен нулю, он будет исчезать по цвету, но и по мере продвижения по нему он станет ярким на этой части (это лучше всего я могу объяснить), главное, я хочу, чтобы панель для одновременного отображения всех цветов.

Ответ 1

Скопируйте "on": enter image description here
над вашим "выключенным" тиражом: enter image description here

используя res/drawable/custom_progress_drawable.xml

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

    <!-- Background -->
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/custom_progress_bar_off"/>

    <!-- Secondary progress - this is optional -->
    <item android:id="@android:id/secondaryProgress">
        <clip android:drawable="@drawable/custom_progress_bar_secondary" />
    </item>

    <!-- Progress -->
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/custom_progress_bar_on" />
    </item>

</layer-list>

Из Activity используйте

Drawable progressDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.custom_progress_drawable, getTheme());
myProgressBar.setProgressDrawable(progressDrawable);

или в xml, используйте

android:progressDrawable="@drawable/custom_progress_drawable"

И вот результат при использовании android:max="10" в xml:

enter image description here

Немного от него, но вы можете использовать setMax() с чем-то более похожим на 10000 и делать некоторые корреляционные вычисления при вызове setProgress(), чтобы сделать его более чистым.

Ответ 2

Наконец-то! Я отправился на миссию, чтобы понять это для вас, поэтому, если этого достаточно, не стесняйтесь дать мне эту щедрость, ха-ха.


Попробуйте использовать это в своем макете:

    <View android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight=".20"/>

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:orientation="horizontal"
                android:gravity="center"
                android:layout_weight="0.62">
                <View android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight=".03"/>
                <ProgressBar style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="0.94"
                    android:progressDrawable="@drawable/progressmask"
                    android:progress="0"
                    android:max="10"
                    android:rotation="180"/>
                <View android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight=".03"/>
            </LinearLayout>
    <View
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight=".18"/>
</LinearLayout>

который ссылается на этот drawable (progressmask.xml):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="50dip" />
        <gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270" />
        <stroke android:width="1dp" android:color="#00000000" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="50dip" />
            <gradient android:startColor="#aa000000" android:endColor="#aa000000"
                android:angle="270" />
            <stroke android:width="1dp" android:color="#00000000" />
        </shape>
    </clip>
</item>
</layer-list>

и это изображение (colorprogress.png)

enter image description here

То, что он делает, задает изображение как фон linearlayout, в котором находится индикатор прогресса. Панель прогресса добавляет полупрозрачную черную маску к изображению, чтобы было видно, что свет выключен.

ПРИМЕЧАНИЕ. Чтобы получить этот эффект, мне пришлось обезьяну с индикатором выполнения (т.е. перевернуть его и установить для него только 10 интервалов). Вам нужно будет сделать некоторую математику, чтобы добиться прогресса, чтобы выстроить изображение то есть setprogress ((100-trueprogress)/10). Извините, я не сделал эту часть для вас.

Это то, что будет выглядеть на 50% (маленькие x и треугольники исчезнут на устройстве)

enter image description here

Надеюсь, это ответит на ваш вопрос!

Ответ 3

Как уже было сказано, я думаю, вам следует перейти на список слоев и затем установить несколько ярлыков. Основная проблема заключается в том, что мне нужно изменить размер. Решение с фиксированным размером было бы довольно легко реализовать.

Ответ 4

Вы не можете установить индикаторы выполнения в разные цвета. Однако вы можете использовать только on drawable и получить необходимый эффект. Вы можете применить маску слоя. Я имею в виду добавление Относительной компоновки, изначально говорящей dark grey на всем протяжении. Градиент имеет только ОДИН цвет, который темно-серый. Теперь используйте code, чтобы программно настроить цвет градиента слева. Очевидно, что цвет слева будет прозрачным. Подробнее о Линейные градиенты. Это об этом. Вам просто нужно вычислить положение, из которого начинается правильный градиент, а где заканчивается левый градиент (transparent).

Этот метод немного испорчен и может не работать на всех устройствах.

Безупречный метод состоял бы в создании нескольких изображений .9png и программном программировании с возможностью рисования программного программирования каждый раз.