Android - Seekbar с текстом

Question

Я хочу создать пользовательский SeekBar со следующим текстом, который обновляет его положение (и прогресс) в соответствии с расположением большого пальца.

Что необходимо для достижения:

Предположения:

1. Минимальное значение = 1000
2. Максимальное значение = 30000

Дело 1: Прогресс на 0% (или минимальное значение = 1000), и текст должен совпадать с левой границей большого пальца.

Корпус 2: Текст прогресса отображается над Thumb drawable и centered, так как в нем есть место для рисования.

Случай 3: Прогресс на 100% (или максимальное значение = 3000) и текст должен выравнивать по правому краю эмпирическое.

Что у меня уже есть:

public class CustomSeekBar extends SeekBar { 
    private Paint paint; 
    private int[] coordCenterTemp = new int[]{0, 0}; 

    // ..... 

private void init() { 
    paint = new Paint(); 
    paint.setColor(Color.BLACK); 
    paint.setStyle(Paint.Style.STROKE); 
    paint.setTextSize(sp2px(20)); 
    paint.setTextAlign(Paint.Align.CENTER); 
} 

private int sp2px(int sp) { 
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, getResources().getDisplayMetrics()); 
} 

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

    String str = String.valueOf(getProgress()); 

    int thumb_x = (int) (((double)this.getProgress()/this.getMax()) * (double)(this.getWidth())); 
    int thumb_y = 30; 

    int textMeasure = (int) paint.measureText(str, 0, str.length()); 

    if ((textMeasure/2) + thumb_x <= getRight()) { 
     coordCenterTemp[0] = thumb_x; 
     coordCenterTemp[1] = thumb_y; 
    } 
    canvas.drawText(str, coordCenterTemp[0], coordCenterTemp[1], paint); 
} 
} 

Это работает, когда прогресс 50%. Как только я сдвигаюсь вправо или влево, текст нарисован с некоторым смещением в неправильном направлении.

Как это сделать?

Answer 1

Я делаю это в последнее время в моем проекте, и это мой код:

первым определит ThumbTextView которого TextView над вами Seekbar как это:

public class ThumbTextView extends TextView { 

    private LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
    private int width = 0; 

    public ThumbTextView(Context context) { 
     super(context); 
    } 

    public ThumbTextView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public void attachToSeekBar(SeekBar seekBar) { 
     String content = getText().toString(); 
     if (TextUtils.isEmpty(content) || seekBar == null) 
      return; 
     float contentWidth = this.getPaint().measureText(content); 
     int realWidth = width - seekBar.getPaddingLeft() - seekBar.getPaddingRight(); 
     int maxLimit = (int) (width - contentWidth - seekBar.getPaddingRight()); 
     int minLimit = seekBar.getPaddingLeft(); 
     float percent = (float) (1.0 * seekBar.getProgress()/seekBar.getMax()); 
     int left = minLimit + (int) (realWidth * percent - contentWidth/2.0); 
     left = left <= minLimit ? minLimit : left >= maxLimit ? maxLimit : left; 
     lp.setMargins(left, 0, 0, 0); 
     setLayoutParams(lp); 

    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
     if (width == 0) 
      width = MeasureSpec.getSize(widthMeasureSpec); 
    } 
} 

Затем определите ваш ThumbTextSeekBar который содержит Seekbar & ThumbSeekbar следующим образом:

public class ThumbTextSeekBar extends LinearLayout { 

    public ThumbTextView tvThumb; 
    public SeekBar seekBar; 
    private SeekBar.OnSeekBarChangeListener onSeekBarChangeListener; 

    public ThumbTextSeekBar(Context context) { 
     super(context); 
     init(); 
    } 

    public ThumbTextSeekBar(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(); 
    } 

    private void init() { 
     LayoutInflater.from(getContext()).inflate(R.layout.view_thumb_text_seekbar, this); 
     setOrientation(LinearLayout.VERTICAL); 
     tvThumb = (ThumbTextView) findViewById(R.id.tvThumb); 
     seekBar = (SeekBar) findViewById(R.id.sbProgress); 
     seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { 
      @Override 
      public void onStopTrackingTouch(SeekBar seekBar) { 
       if (onSeekBarChangeListener != null) 
        onSeekBarChangeListener.onStopTrackingTouch(seekBar); 
      } 

      @Override 
      public void onStartTrackingTouch(SeekBar seekBar) { 
       if (onSeekBarChangeListener != null) 
        onSeekBarChangeListener.onStartTrackingTouch(seekBar); 
      } 

      @Override 
      public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { 
       if (onSeekBarChangeListener != null) 
        onSeekBarChangeListener.onProgressChanged(seekBar, progress, fromUser); 
       tvThumb.attachToSeekBar(seekBar); 
      } 
     }); 

    } 

    public void setOnSeekBarChangeListener(SeekBar.OnSeekBarChangeListener l) { 
     this.onSeekBarChangeListener = l; 
    } 

    public void setThumbText(String text) { 
     tvThumb.setText(text); 
    } 

    public void setProgress(int progress) { 
     if (progress == seekBar.getProgress() && progress == 0) { 
      seekBar.setProgress(1); 
      seekBar.setProgress(0); 
     } else { 
      seekBar.setProgress(progress); 
     } 
    } 
} 

Используйте его с чем-то вроде этого:

thumbTextSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { 
      @Override 
      public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { 

       thumbTextSeekbar.setThumbText(seekBar.getProgress())); 

      } 

      @Override 
      public void onStartTrackingTouch(SeekBar seekBar) { 
       thumbTextSeekbar.showTxt(); 
      } 

      @Override 
      public void onStopTrackingTouch(SeekBar seekBar) { 
       thumbTextSeekbar.hideTxt(); 
      } 
     }); 

Выход: