Searchbar Android con pollice personalizzato con testo dinamico al suo interno

Question

Voglio creare Android personalizzato SeekBar con pollice con testo all'interno per mostrare la posizione di ricerca corrente.

Ecco il mio codice:

SeekBar sb; 

@Override 
public void onCreate(Bundle savedInstanceState){ 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.custom_seek_bar_activity); 

    sb = (SeekBar)findViewById(R.id.slider); 
    sb.setMax(100); 
    sb.setProgress(10); 
    BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(50)); 

    sb.setThumb(bd); 

    sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){ 
     @Override 
     public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) 
     { 
      int pos = sb.getProgress(); 
      double star = pos/(20.0); 
      TextView tv = (TextView)findViewById(R.id.percent); 
      tv.setText(Double.toString(star)+"%"); 
      BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(star)); 
      bd.setBounds(new Rect(0,0, 
       bd.getIntrinsicWidth(), 
       bd.getIntrinsicHeight() 
      )); 
      seekBar.setThumb(bd); 
     } 

     @Override 
     public void onStartTrackingTouch(SeekBar arg0) { 
      // TODO Auto-generated method stub 

     } 

     @Override 
     public void onStopTrackingTouch(SeekBar arg0) { 
      // TODO Auto-generated method stub 

     } 
    }); 

} 

public BitmapDrawable writeOnDrawable(int drawableId, String text){ 

    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true); 

    Paint paint = new Paint(); 
    paint.setStyle(Style.FILL); 
    paint.setColor(Color.BLACK); 
    paint.setTextSize(10); 

    Canvas canvas = new Canvas(bm); 
    canvas.drawText(text, 0, bm.getHeight()/2, paint); 

    return new BitmapDrawable(bm); 
} 

ma quando mi muovo il pollice che va fino all'inizio della barra di ricerca. Qualcuno ha la soluzione per spostare il pollice personalizzato con la posizione della barra di ricerca?

Answer 1

Ho ottenuto la soluzione ora, nel metodo setBound() stavo passando in alto a sinistra come 0, è per questo che sta visualizzando la barra di ricerca all'inizio. Dopo aver fatto il seguente cambiamento, ho funzionato.

chiamata setThumbPos() metodo onProgressChanged() evento

public void setThumbPosition(SeekBar seekBar){ 
    int max = seekBar.getMax(); 

    int available = seekBar.getWidth() - seekBar.getPaddingLeft() - seekBar.getPaddingRight(); 
    float scale = max > 0 ? (float) seekBar.getProgress()/(float) max : 0; 

    //scale = 1; 
    int pos = sb.getProgress(); 
    double star = pos/(20.0); 

    BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(star)); 

    int thumbWidth = bd.getIntrinsicWidth(); 
    int thumbHeight = bd.getIntrinsicHeight(); 
    //available -= thumbWidth; 

    int thumbPos = (int) (scale * available); 
    if(thumbPos <= 0+thumbWidth){ 
     thumbPos += (thumbWidth/2); 
    }else if(thumbPos >= seekBar.getWidth()-thumbWidth){ 
     thumbPos -= (thumbWidth/2); 
    } 

    bd.setBounds(new Rect(thumbPos,0, 
      thumbPos+bd.getIntrinsicWidth(), 
     bd.getIntrinsicHeight() 
    )); 

    seekBar.setThumb(bd); 

    TextView tv = (TextView)findViewById(R.id.percent); 
    tv.setText(Double.toString(star)+"%"); 
} 

Answer 2

Io uso SeekBar per visualizzare un conto alla rovescia nella mia app. All'interno del pollice del timer vi mostro il numero di avanzamento SeekBar corrente utilizzando il codice qui sotto:

SeekBar timerBar = (SeekBar) findViewById(R.id.seekBarTimer); 
    if (timerBar != null) { 
     timerBar.setMax((int) (Settings.countdownSeconds + 1)); 
     timerBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { 

      @Override 
      public void onStopTrackingTouch(SeekBar arg0) { 
      } 

      @Override 
      public void onStartTrackingTouch(SeekBar arg0) { 
      } 

      @Override 
      public void onProgressChanged(SeekBar timerBar, int arg1, boolean arg2) { 
       Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.seek_thumb); 
       Bitmap bmp = bitmap.copy(Bitmap.Config.ARGB_8888, true); 
       Canvas c = new Canvas(bmp); 
       String text = Integer.toString(timerBar.getProgress()); 
       Paint p = new Paint(); 
       p.setTypeface(Typeface.DEFAULT_BOLD); 
       p.setTextSize(14); 
       p.setColor(0xFFFFFFFF); 
       int width = (int) p.measureText(text); 
       int yPos = (int) ((c.getHeight()/2) - ((p.descent() + p.ascent())/2)); 
       c.drawText(text, (bmp.getWidth()-width)/2, yPos, p); 
       timerBar.setThumb(new BitmapDrawable(getResources(), bmp)); 
      } 
     }); 
     timerBar.setProgress(0); 
    } 

Il disegnabile R.drawable.seek_thumb è il mio pollice disegnabile.

Answer 3

Ho finito per utilizzare questa soluzione semplice. Probabilmente non è come ad alte prestazioni, come ad esempio un SeekBar personalizzato, ma è davvero facile da collegare a un layout esistente e utilizzare qualsiasi etichetta o altra vista sopra il pollice SeekBar.

protected void positionThumbLabel(SeekBar seekBar, TextView label) 
{ 
    Rect tr = seekBar.getThumb().getBounds(); 
    label.setWidth(tr.width()); 
    label.setX(tr.left + seekBar.getPaddingLeft()); 
} 

Con alcune piccole modifiche è possibile posizionare una sovrapposizione rispetto al centro del pollice:

protected void positionThumbOverlayCenter(SeekBar seekBar, View overlay) 
{ 
    Rect tr = seekBar.getThumb().getBounds(); 
    overlay.setX(tr.centerX() - (overlay.getWidth() * 0.5f) + seekBar.getPaddingLeft()); 
} 

Answer 4

Scegli una soluzione che corrispondono alla vostra situazione qui: http://www.helptouser.com/code/10722746-add-dynamic-text-over-android-seekbar-thumb.html