вертикальная панель поиска отображает прогресс на большом пальце

#android #android-canvas #seekbar

#Android #android-холст #панель поиска

Вопрос:

Я создал вертикальную панель поиска. Теперь я хочу отобразить прогресс на большом пальце панели поиска. Я успешно реализовал это, но теперь мой текст отображается под большим пальцем панели поиска. Я хочу нарисовать текст поверх большого пальца панели поиска, как я могу этого добиться? Я также добавляю свой код

 public class TextThumbSeekBar extends SeekBar {
    public TextThumbSeekBar(Context context) {
        super(context);
    }
    private int mThumbSize;
    private TextPaint mTextPaint;
    public TextThumbSeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        mThumbSize = 50;

        mTextPaint = new TextPaint();
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextSize(50);
        mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    public TextThumbSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);

        mThumbSize = 50;

        mTextPaint = new TextPaint();
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextSize(50);
        mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldh, oldw);
    }

    @Override
    public synchronized void setProgress(int progress)  // it is necessary for calling setProgress on click of a button
    {
        super.setProgress(progress);
        onSizeChanged(getWidth(), getHeight(), 0, 0);
    }
    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }

    protected void onDraw(Canvas c) {
        String progressText = String.valueOf(getProgress());
        c.drawText(progressText, getThumb().getBounds().centerY(), getHeight() - getThumb().getBounds().centerX(), mTextPaint);
        c.rotate(-90);
        c.translate(-getHeight(), 0);

        super.onDraw(c);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                super.onTouchEvent(event);
                setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
        }
        return true;
    }
}
  

Вот как я использовал этот класс в своем xml

 <demo.smart.com.smartchargeboxdemoapp.TextThumbSeekBar
            android:max="100"
            android:thumb="@drawable/shape_seek_bar_text_thumb"
            android:layout_gravity="center"
            android:id="@ id/seekbar"
            android:layout_width="30dp"
            android:layout_height="match_parent" />
  

И вот результат, который я получаю
введите описание изображения здесь

Комментарии:

1. Смотрите это, чтобы нарисовать текст: gist.github.com/yqritc/7b5c786930dfb9b47e7a

2. Я видел это раньше. Однако это мне не помогло.

3. Ваша проблема решена? Я также ищу реализацию аналогичного типа.

Ответ №1:

Хотя вопрос старый, в этом случае я сделал thumbTint прозрачным, а перед DrawText я сделал ‘drawRect’, чтобы нарисовать мой большой палец, который не будет поворачиваться. Надеюсь, я помог.