具有多种颜色的搜索栏或进度条

Question

我想创建一个这样的条形图，最初当进度为零时，它会淡出颜色，但随着进度的进行，该部分会变亮（这是我能解释的最好的）主要是我想要条形图同时显示所有颜色。

Answer 1

剪辑你的“on”drawable：
在您的“关闭”可绘制对象上：

通过使用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"

这是在 xml 中使用 android:max="10" 时的结果：

有点偏离，但您可以将setMax() 与10000 类似的东西一起使用，并在调用setProgress() 时进行一些偏移计算以使其更清晰。

Answer 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）

它所做的是将图像设置为线性布局的背景，其中包含一个进度条。进度条为图像添加了一个半透明的黑色蒙版，使其看起来灯已关闭。

注意：为了获得这种效果，我不得不对进度条进行猴子处理（即翻转它，并将其设置为仅 10 个间隔。您必须进行一些数学运算才能使进度与图像对齐. 即 setprogress((100-trueprogress)/10)。对不起，我没有为你做这部分。

这是进度 50% 时的样子（小 x 和三角形将在设备上消失）

我希望这能回答你的问题！

Answer 3

就像已经建议的那样，我认为您应该选择一个图层列表并设置多个可绘制对象。 这方面的主要问题是我需要调整大小。固定大小的解决方案很容易实现。

Answer 4

您实际上无法将进度条设置为不同的颜色。但是，您只能使用 on 可绘制对象并获得您想要的效果。你可以只应用一个图层蒙版。我的意思是添加一个相对布局，最初说是dark grey，即渐变只有一种深灰色的颜色。现在，使用code 以编程方式设置左侧的渐变颜色。显然左边的颜色是透明的。了解有关Linear Gradients 的更多信息。就是这样。您只需要计算右侧渐变开始的位置，而不是左侧渐变（transparent）结束的位置。

此方法存在少许缺陷，可能不适用于所有设备。

完美的方法是创建多个.9png 图像并每次以编程方式设置进度对话框的可绘制对象。