安卓seekbar與自定義拇指有動態文本里面

Question

我想創建安卓自定義SeekBar有拇指與文本裏面顯示當前的搜索位置。

這裏是我的代碼：

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); 
} 

，但是當我移動拇指它去搜索欄的開始。 有沒有人有解決方案移動自定義拇指seekbar位置？

Answer 1

我現在得到了解決方案，在setBound()方法中，我將左上角作爲0，這就是爲什麼它在開始時顯示seek bar。在做了下面的改變後，我得到了它的作品

呼叫setThumbPos()方法onProgressChanged()事件

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

我使用搜索欄來顯示我的應用程序定時器倒計時。計時器拇指內我將介紹使用下面的代碼當前搜索欄進度號碼：

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); 
    } 

的R.drawable.seek_thumb繪製的是我的拇指提拉。

Answer 3

我最終使用這個簡單的解決方案。它可能不是作爲高性能，就像一個適當的自定義SeekBar，但它很容易插入到現有的佈局，並使用SeekBar拇指頂部的任何標籤或其他視圖。

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

有了一些細微的變化可以覆蓋相對的定位，以拇指的中心：

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

Answer 4

選擇符合你這裏的情況，一個解決方案：http://www.helptouser.com/code/10722746-add-dynamic-text-over-android-seekbar-thumb.html