更改背景颜色动态

Question

我使用RangeSeekBar为3个条件（即绿色=正常，黄色=警告，红色=疏散）...我使用XML绘制设置这样

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

的backgroung设置一些值

导致这样

现在我想根据搜索条值来改变背景颜色，这样如果我改变的范围应该改变背景颜色像这样

我知道我可以以编程方式更改渐变，但如何缩小开始颜色并增加最终颜色？ 任何人都有这个解决方案？

由于

Answer 1

尝试RangeSeekBar下方创建三个View s和更新每个的宽度为滑块移动。

大致来说，这可能是这样的：

<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具有一个称为位置的可选参数 - 这些位置表示不同颜色部分的长度。

@miroslavign发布了一个函数here它似乎为代码（而不是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

这是我做到了，万一有人寻找一个完整的解决方案... 感谢@戴夫·莫里西的帮助:)

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); 
    } 
});