动态更改背景颜色

Question

我正在使用RangeSeekBar为3个条件设置一些值（即Green = OK，Amber = Warning，Red = evacuate）...我正在使用xml drawable来设置这样的背景

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
        android:startColor="#27F70C" 
        android:centerColor="#FFBF00"
        android:endColor="#FC0505" 
        android:angle="0" />

    <corners android:radius="0px" />

    <stroke 
        android:width="2dp" 
        android:color="#70555555" />

    <stroke 
            android:width="0dp" 
            android:color="#70555555" />
</shape>

结果是这样的

现在我想根据搜索栏值更改背景颜色，这样如果我改变范围，它应该改变背景颜色，就像这样

我知道我可以通过编程方式更改渐变但是如何缩小开始颜色并增加结束颜色？ 有人有解决方案吗？

谢谢

Answer 1

尝试在RangeSeekBar下创建三个View ，并在移动滑块时更新每个View的宽度。

非常粗略，这可能看起来像：

<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
     <View
         android:id="@+id/green"
         android:layout_width="100dp"
         android:layout_height="match_parent"
         android:background="#00FF00"/>
     <View
         android:id="@+id/orange"
         android:layout_toRightOf="@id/green"
         android:layout_width="100dp"
         android:layout_height="match_parent"
         android:background="#FFFF00"/>
     <View
         android:id="@+id/red"
         android:layout_toRightOf="@id/orange"
         android:layout_width="100dp"
         android:layout_height="match_parent"
         android:background="#FF0000"/>
     <RangeSeekBar android:layout_width="300dp" android:layout_height="wrap_content">
</RelativeLayout>

在此示例中，您将更新三个颜色视图的宽度，以便在移动滑块时它们总计最多300dp。

您可以使用纯色作为三个视图的背景，这看起来像您的第二个图像，或创建三个渐变（绿色到绿色 - 黄色，黄色 - 橙色，橙色 - 红色）。

Answer 2

LinearGradient有一个名为position的可选参数 - 这些位置表示不同颜色部分的长度。

@miroslavign在这里发布了一个函数，似乎通过代码（而不是XML）为视图设置渐变背景 - 我没有尝试过，但看起来很有希望。 只需将其更改为您的颜色，并根据Seekbar设置渐变位置。

复制粘贴在此处，以供不喜欢以下链接的人使用：

private void FillCustomGradient(View v) {
    final View view = v;
    Drawable[] layers = new Drawable[1];

    ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
        @Override
        public Shader resize(int width, int height) {
            LinearGradient lg = new LinearGradient(
                    0,
                    0,
                    0,
                    view.getHeight(),
                    new int[] {
                             getResources().getColor(R.color.color1), // please input your color from resource for color-4
                             getResources().getColor(R.color.color2),
                             getResources().getColor(R.color.color3),
                             getResources().getColor(R.color.color4)},
                    new float[] { 0, 0.49f, 0.50f, 1 },  // positions
                    Shader.TileMode.CLAMP);
            return lg;
        }
    };
    PaintDrawable p = new PaintDrawable();
    p.setShape(new RectShape());
    p.setShaderFactory(sf);
    p.setCornerRadii(new float[] { 5, 5, 5, 5, 0, 0, 0, 0 });
    layers[0] = (Drawable) p;

    LayerDrawable composite = new LayerDrawable(layers);
    view.setBackgroundDrawable(composite);
} 

Answer 3

这就是我这样做的，万一有人在寻找完整的解决方案...感谢@Dave Morrissey的帮助:)

XML代码将是

<RelativeLayout
    android:id="@+id/layout4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/colorsLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <View
            android:id="@+id/bgGreen"
            android:layout_width="100dp"
            android:layout_height="25dp"
            android:background="#27F70C"/>
        <View
            android:id="@+id/bgAmber"
            android:layout_width="100dp"
            android:layout_height="25dp"
            android:background="#FFBF00"/>
        <View
            android:id="@+id/bgRed"
            android:layout_width="100dp"
            android:layout_height="25dp"
            android:background="#FC0505"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/seekBarLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    </LinearLayout>

</RelativeLayout>

Java代码就像

LinearLayout ll = (LinearLayout)findViewById(R.id.colorsLayout);
View viewGreen = (View)findViewById(R.id.bgGreen);
View viewAmber = (View)findViewById(R.id.bgAmber);
View viewRed = (View)findViewById(R.id.bgRed);

int sbMaxVal = 4999;
//Create RangeSeekBar as Integer range between 0 and sbMaxVal
seekBar = new RangeSeekBar(0, sbMaxVal, this);
seekBar.setNotifyWhileDragging(true);

//Add RangeSeekBar to Pre-defined layout
ViewGroup layout = (ViewGroup) findViewById(R.id.seekBarLayout);
layout.addView(seekBar);


//Set the onRangeChangeListener for the seekBar
seekBar.setOnRangeSeekBarChangeListener(new RangeSeekBar.OnRangeSeekBarChangeListener<Integer>() {
    @Override
    public void onRangeSeekBarValuesChanged(RangeSeekBar<?> bar, Integer minValue, Integer maxValue) {

        int width = ll.getWidth();
        int minVal = (int) Math.floor((Integer.parseInt(amberValue)*width)/sbMaxVal);
        int maxVal = (int) Math.floor((Integer.parseInt(redValue)*width)/sbMaxVal);

        int wg = minVal;
        int wy = maxVal-minVal;
        int wr = ll.getWidth()-wg-wy;

        //Change the length of background views green,amber,red
        LinearLayout.LayoutParams paramsGreen = (LinearLayout.LayoutParams)
        viewGreen.getLayoutParams();
        paramsGreen.width = wg;
        viewGreen.setLayoutParams(paramsGreen);

        LinearLayout.LayoutParams paramsAmber = (LinearLayout.LayoutParams)
        viewAmber.getLayoutParams();
        paramsAmber.width = wy;
        viewAmber.setLayoutParams(paramsAmber);

        LinearLayout.LayoutParams paramsRed = (LinearLayout.LayoutParams)
        viewRed.getLayoutParams();
        paramsRed.width = wr ;
        viewRed.setLayoutParams(paramsRed);
    }
});