带有遮罩效果的自定义SeekBar，带有两个可绘制对象？

Question

我正在使用自定义SeekBar显示一张图表。我已经完成了这个部分，现在我是通过将背景Drawable应用于SeekBar来显示这个图表。我的问题是，我需要将蓝色的内容设置为进度Drawable，并将SeekBar的背景设置为红色的图表。这样当进度发生时，拇指移动到红色区域上时，拇指经过的区域应该变成蓝色，就像遮罩效果一样。请问是否有最佳实现方式呢？下面是我的图片：

- Sreedev

Answer 1

阅读所有问题和答案后，我希望这应该是您完成任务的情况...

1.根据您的逻辑创建两个图表。

2.从特定位图生成两个可绘制对象...

Drawable G_bg = new BitmapDrawable(Red graph bitmap);
Drawable G_pg = new BitmapDrawable(Blue graph bitmap);

3.接下来，通过Java代码创建的图层列表来定制您的进度条。

ClipDrawable c=new ClipDrawable(G_pg, Gravity.LEFT,ClipDrawable.HORIZONTAL);
LayerDrawable ld =new LayerDrawable (new Drawable[]{G_bg,c}); 

4. 将这个图层列表应用到你的 seekbar 上。

Graphbar.setProgressDrawable(ld);

这应该像您想要的那样工作...谢谢！

- Aju

Answer 2

这不是你想要的吗？

my_seek_bar_progress.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/red_graph"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/blue_graph" />
    </item>

</layer-list>  

在Fragment或Activity布局中：

<com.example.seekbaroverlay.MySeekBar
    android:id="@+id/mySeekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100" />

MySeekBar.java:

public class MySeekBar extends SeekBar {

    public MySeekBar(Context context) {
        this(context, null);
    }

    public MySeekBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MySeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setProgressDrawable(context.getResources().getDrawable(R.drawable.my_seek_bar_progress));
        setThumb(context.getResources().getDrawable(R.drawable.my_thumb));
    }
}

- EricRobertBrewer

---

这段代码可行。但我的问题是，我通过代码动态生成了这2个图形，所以我将得到2个位图，稍后可以转换为Drawable。是否有任何解决方法，可以通过Java代码创建图层列表并将其添加到SeekBar中？ - Sreedev

我明白。是的，有一种编程方式可以创建一个图层列表 - 并且在被接受的答案中已经展示了。 - EricRobertBrewer

Answer 3

对于您的SeekBar，您应该使用自定义的progressDrawable。请参阅这篇博客文章以获得一个很棒的教程。

- Jschools

---

我已经看过这个了。它讲的是关于裁剪图像的一小部分并显示进度。我需要使用整个图像并像掩蔽一样显示进度。由于它是一个图表，我不能裁剪图像的一部分并使用它。 - Sreedev

Answer 4

您可以创建自定义视图。覆盖其onTouch()方法以更改拇指的位置。还要覆盖其onDraw()方法，并首先将红色图形绘制为视图的背景，然后从与拇指位置相对应的位置绘制蓝色图形。

- hasanghaforian