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>

结果是这样的 enter image description here

现在我想根据搜索栏值更改背景颜色，这样如果我改变范围，它应该改变这样的背景颜色 enter image description here

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

由于

Answer 1

尝试在View下创建三个RangeSeekBar，并在移动滑块时更新每个<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>的宽度。

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

{{1}}

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

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

Answer 2

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

@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

这就是我这样做的，如果有人在寻找完整的解决方案...... 感谢@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);
    }
});

动态更改背景颜色

3 个答案: