更改背景顏色動態

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