在动画期间更改进度条颜色

时间:2017-09-14 10:54:59

标签: java android android-view

我想根据它的值更改我的进度条进度颜色。我有一个用XML创建的渐变背景。

Sphere

我的问题是这个,我想基于相同的背景颜色改变整个进度颜色。让我说我的进度来到%60,整个进度条应该是黄色。如果我的进度达到%90,则整个进度条应为红色。它应该动态变化,它应该是与进展的背景颜色相同的颜色。



这是我使用的动画颜色不起作用!

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dp"/>
            <gradient
                android:endColor="#55850000"<!-- green -->
                android:centerColor="#55e6ff00" <!-- yellow -->
                android:startColor="#5500c872" <!-- red -->
                />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <gradient
                    android:endColor="#c20600"<!-- green %100 alpha -->
                    android:centerColor="#e6ff00"<!-- yellow %100 alpha-->
                    android:startColor="#00c872"<!-- red  %100 alpha -->
                    />
            </shape>
        </clip>
    </item>

</layer-list>

1 个答案:

答案 0 :(得分:0)

最近我做了类似的事情,并且在找到一个简单的例子方面也遇到了一些麻烦,所以我想分享一下。主要区别在于,我在黄色(0%),橙色(50%)和红色(100%)之间的细粒度渐变上设置了进度条颜色:

...
ValueAnimator valueAnimator = ValueAnimator.ofInt(currentProgress, finalProgress);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
           int[] startRGBs = getRGBColors(activity, R.color.progress_bar_yellow);
           int[] midRGBs = getRGBColors(activity, R.color.progress_bar_orange);
           int[] endRGBs = getRGBColors(activity, R.color.progress_bar_red);

           // Change the start or end colors depending on which half the progress is at (< or > 50%)
           // (done to make the transition a bit smoother, since e.g. the Blue value between orange/red is the same)
           if(percentProgressed <= 50) endRGBs = midRGBs;
           else startRGBs = midRGBs;

           int r = calcRGBValue(startRGBs[0], endRGBs[0], percentProgressed);
           int g = calcRGBValue(startRGBs[1], endRGBs[1], percentProgressed);
           int b = calcRGBValue(startRGBs[2], endRGBs[2], percentProgressed);
           int progressColorId = Color.rgb(r,g,b);

           Drawable progressDrawable = progressBar.getProgressDrawable().mutate();
           progressDrawable.setColorFilter(progressColorId, PorterDuff.Mode.MULTIPLY);
           progressBar.setProgressDrawable(progressDrawable);
        }
});

...

private int[] getRGBColors(Activity activity, int colorResourceId){
    int colorId = activity.getResources().getColor(colorResourceId);
    return new int[]{Color.red(colorId), Color.green(colorId), Color.blue(colorId)};
}

private int calcRGBValue(int startColor, int endColor, int percentProgressed){
    int colorDiff = startColor - endColor;
    if(percentProgressed > 50) percentProgressed -= 50;
    return (startColor - (int)Math.round(((double)percentProgressed ) * ((double)colorDiff / 50)));
}

因此,如果您希望以一定的时间间隔(而不是渐变)对进度条颜色进行简单截断,则可以忽略上述所有RGB计算,而仅根据进度值设置ProgressDrawable颜色:

int progressColorId;
if(progressValue < 25) progressColorId = Color.GREEN;
else if(progressValue <= 50) progressColorId = Color.YELLOW;
else progressColorId = Color.RED;

Drawable progressDrawable = progressBar.getProgressDrawable().mutate();
progressDrawable.setColorFilter(progressColorId, PorterDuff.Mode.MULTIPLY);
progressBar.setProgressDrawable(progressDrawable);