为什么 seekbar 刻度标记显示在拇指前面？

Question

我的seekBar样式是androidWidget.AppCompat.SeekBar.Discrete。我有自己的刻度标记，但正如您所见，它显示在拇指标记的前面，但我不想看到拇指后面的刻度。

我想要的：

以及我所拥有的：

我的XML:

 <android.support.v7.widget.AppCompatSeekBar
    style="@style/seekbarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="4"
    android:padding="4dp"
    android:progress="0"/>

我的风格：

<style name="seekbarStyle" parent="Widget.AppCompat.SeekBar.Discrete">
    <item name="tickMark">@drawable/seekbar_tickmark</item>
    <item name="android:thumb">@drawable/circle</item>
</style>

Answer 1

这是 AppCompatSeekBar 的一个错误。我使用扩展 AppCompatSeekBar:

的自定义 Class 解决了这个问题

public class CustomSeekBar extends AppCompatSeekBar {

    private Drawable mTickMark;

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

    public CustomSeekBar(Context context, AttributeSet attrs) {
        this(context, attrs, android.support.v7.appcompat.R.attr.seekBarStyle);
    }

    public CustomSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        applyAttributes(attrs, defStyleAttr);
    }

    private void applyAttributes(AttributeSet rawAttrs, int defStyleAttr)
    {
        TypedArray attrs = getContext().obtainStyledAttributes(rawAttrs, R.styleable.CustomSeekBar, defStyleAttr, 0);
        try {
            mTickMark = attrs.getDrawable(R.styleable.CustomSeekBar_tickMarkFixed);
        } finally {
            attrs.recycle();
        }
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawTickMarks(canvas);
    }

    @Override
    public int getThumbOffset() {
        return super.getThumbOffset();
    }

    void drawTickMarks(Canvas canvas) {
        if (mTickMark != null) {
            final int count = getMax();
            if (count > 1) {
                final int w = mTickMark.getIntrinsicWidth();
                final int h = mTickMark.getIntrinsicHeight();
                final int halfThumbW = getThumb().getIntrinsicWidth() / 2;
                final int halfW = w >= 0 ? w / 2 : 1;
                final int halfH = h >= 0 ? h / 2 : 1;
                mTickMark.setBounds(-halfW, -halfH, halfW, halfH);
                final float spacing = (getWidth() - getPaddingLeft() - getPaddingRight() + getThumbOffset() * 2 - halfThumbW * 2) / (float) count;
                final int saveCount = canvas.save();
                canvas.translate(getPaddingLeft() - getThumbOffset() + halfThumbW, getHeight() / 2);
                for (int i = 0; i <= count; i++) {
                    if(i!=getProgress())
                        mTickMark.draw(canvas);
                    canvas.translate(spacing, 0);
                }
                canvas.restoreToCount(saveCount);
            }
        }
    }
}

与 attrs.xml:

<resources>
    <declare-styleable name="CustomSeekBar">
        <attr name="tickMarkFixed" format="reference"/>
    </declare-styleable>
</resources>

并且在布局中您必须使用 tickMarkFixed 而不是 tickMark.

Answer 2

我在这里找到了一个很好的图书馆：

IndicatorSeekBar

Answer 3

我将在 kotlin 中分享修复，以获得更好的解决方案并避免拇指使用前的刻度标记：

    if (i > progress)

完整代码：

    class CustomSeekBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0) : AppCompatSeekBar(context, attrs, defStyle) {
private var mTickMark: Drawable? = null

init {
    applyAttributes(attrs, defStyle)
}

private fun applyAttributes(rawAttrs: AttributeSet?, defStyleAttr: Int) {
    val attrs = context.obtainStyledAttributes(rawAttrs, R.styleable.CustomSeekBar, defStyleAttr, 0)
    try {
        mTickMark = attrs.getDrawable(R.styleable.CustomSeekBar_customTickMark)
    } finally {
        attrs.recycle()
    }
}


override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    drawTickMarks(canvas)
}


private fun drawTickMarks(canvas: Canvas) {
    if (mTickMark != null) {
        val count = max

        val w = mTickMark!!.intrinsicWidth
        val h = mTickMark!!.intrinsicHeight
        val halfThumbW = thumb.intrinsicWidth / 2
        val halfW = if (w >= 0) w / 2 else 1
        val halfH = if (h >= 0) h / 2 else 1
        mTickMark!!.setBounds(-halfW, -halfH, halfW, halfH)
        val spacing = (width - paddingLeft - paddingRight + thumbOffset * 2 - halfThumbW * 2) / count.toFloat()
        val saveCount = canvas.save()
        canvas.translate((paddingLeft - thumbOffset + halfThumbW).toFloat(), (height / 2).toFloat())
        for (i in 0..count) {
            if (i > progress)
                mTickMark!!.draw(canvas)
            canvas.translate(spacing, 0F)
        }
        canvas.restoreToCount(saveCount)
    }
}
}

记得在res/values中的attrs.xml文件中创建属性，像这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomSeekBar">
        <attr name="customTickMark" format="integer" />
    </declare-styleable>
</resources>

Answer 4

问题似乎是 AppCompatSeekBar 小部件调用 super，它绘制了拇指，然后在其上绘制了刻度。

这是一个 Kotlin class，它通过在 canvas 上重新绘制拇指来解决问题（此时有拇指，然后在其上绘制刻度：

class SeekBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.seekBarStyle
) : AppCompatSeekBar(context, attrs, defStyleAttr) {
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        drawThumb(canvas)
    }

    private fun drawThumb(canvas: Canvas) {
        if (thumb != null) {
            val saveCount = canvas.save()
            canvas.translate((paddingLeft - thumbOffset).toFloat(), paddingTop.toFloat())
            thumb.draw(canvas)
            canvas.restoreToCount(saveCount)
        }
    }
}

注意：此解决方案可能会留下一些瑕疵，因为拇指被绘制了两次。解决方法可能是定义一个辅助拇指并在隐藏原始拇指的同时使用它。

为什么 seekbar 刻度标记显示在拇指前面？

Why seekbar tick marker shown in front of thumb?

android

android-styles

android-seekbar