如何在SeekBar中制作颜色渐变?

发布于 2024-10-05 14:12:39 字数 95 浏览 4 评论 0原文

我想使用 SeekBar(即老式 Java 滑块)作为颜色渐变选择器。我见过一些这样的例子,但它们都需要创建新的类等。必须有一种方法来修改或覆盖原始类。或者只是用渐变替换背景。

I want to use a SeekBar (i.e. old school Java Slider) into a color gradient picker. I have seen some examples like this but they all require making new classes and such. There has got to be a way to modify or override the original classes. Or just replace the background with a gradient.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

久随 2024-10-12 14:12:39

我发现这就是你如何做到的。

您在 XML 中创建一个标准搜索栏。

<SeekBar
       android:id="@+id/seekbar_font"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10px"
       android:layout_below="@id/color_font_text"
       android:max="100"
       android:progress="50"></SeekBar>

然后,通过创建 boxShape 来自定义 onCreate() 中的搜索栏,然后在其中强制使用 LinearGradient。

LinearGradient test = new LinearGradient(0.f, 0.f, 300.f, 0.0f,  

      new int[] { 0xFF000000, 0xFF0000FF, 0xFF00FF00, 0xFF00FFFF,
      0xFFFF0000, 0xFFFF00FF, 0xFFFFFF00, 0xFFFFFFFF}, 
      null, TileMode.CLAMP);
ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.getPaint().setShader(test);

SeekBar seekBarFont = (SeekBar)findViewById(R.id.seekbar_font);
seekBarFont.setProgressDrawable( (Drawable)shape );

这是上面当前代码的图像 SeekBar 颜色渐变

I figured it out here is how you do it.

You create a standard seekbar in your XML.

<SeekBar
       android:id="@+id/seekbar_font"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10px"
       android:layout_below="@id/color_font_text"
       android:max="100"
       android:progress="50"></SeekBar>

Then you customize the seekbar in your onCreate() by creating a boxShape and then force a LinearGradient inside it.

LinearGradient test = new LinearGradient(0.f, 0.f, 300.f, 0.0f,  

      new int[] { 0xFF000000, 0xFF0000FF, 0xFF00FF00, 0xFF00FFFF,
      0xFFFF0000, 0xFFFF00FF, 0xFFFFFF00, 0xFFFFFFFF}, 
      null, TileMode.CLAMP);
ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.getPaint().setShader(test);

SeekBar seekBarFont = (SeekBar)findViewById(R.id.seekbar_font);
seekBarFont.setProgressDrawable( (Drawable)shape );

Here is an image of the current code up above SeekBar Color Gradient

葬シ愛 2024-10-12 14:12:39

这是对使用 LinearGradient 提供的解决方案的补充。尝试使用以下逻辑将进度转换为 RGB:

lineColorSeekbar.setMax(256*7-1);
        lineColorSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                if(fromUser){
                    int r = 0;
                    int g = 0;
                    int b = 0;

                    if(progress < 256){
                        b = progress;
                    } else if(progress < 256*2) {
                        g = progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*3) {
                        g = 255;
                        b = progress%256;
                    } else if(progress < 256*4) {
                        r = progress%256;
                        g = 256 - progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*5) {
                        r = 255;
                        g = 0;
                        b = progress%256;
                    } else if(progress < 256*6) {
                        r = 255;
                        g = progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*7) {
                        r = 255;
                        g = 255;
                        b = progress%256;
                    }

                    lineColorSeekbar.setBackgroundColor(Color.argb(255, r, g, b));
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

This is in addition to the solution provided using LinearGradient. Try this logic for translating the progress to rgb:

lineColorSeekbar.setMax(256*7-1);
        lineColorSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                if(fromUser){
                    int r = 0;
                    int g = 0;
                    int b = 0;

                    if(progress < 256){
                        b = progress;
                    } else if(progress < 256*2) {
                        g = progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*3) {
                        g = 255;
                        b = progress%256;
                    } else if(progress < 256*4) {
                        r = progress%256;
                        g = 256 - progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*5) {
                        r = 255;
                        g = 0;
                        b = progress%256;
                    } else if(progress < 256*6) {
                        r = 255;
                        g = progress%256;
                        b = 256 - progress%256;
                    } else if(progress < 256*7) {
                        r = 255;
                        g = 255;
                        b = progress%256;
                    }

                    lineColorSeekbar.setBackgroundColor(Color.argb(255, r, g, b));
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
暗喜 2024-10-12 14:12:39

需要这个(只有 XML 代码的答案):

  <SeekBar
                        android:id="@+id/sb_saturation"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxHeight="4dp"
                        android:minHeight="4dp"
                        android:progressDrawable="@drawable/style_seekbar_saturation" />

这个问题很老了,但也许有人

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

    <item android:id="@android:id/progress">
        <shape>
            <corners android:radius="2dp" />
            <gradient
                android:endColor="@color/custom_green"
                android:startColor="@android:color/black" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <shape android:shape="rectangle">
            <size android:height="3dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</layer-list>

The question is pretty old but maybe someone needs this (the answer with only XML code):

  <SeekBar
                        android:id="@+id/sb_saturation"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxHeight="4dp"
                        android:minHeight="4dp"
                        android:progressDrawable="@drawable/style_seekbar_saturation" />

and

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

    <item android:id="@android:id/progress">
        <shape>
            <corners android:radius="2dp" />
            <gradient
                android:endColor="@color/custom_green"
                android:startColor="@android:color/black" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <shape android:shape="rectangle">
            <size android:height="3dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</layer-list>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文