web-dev-qa-db-ja.com

Androidでカスタムシークバーを作成するにはどうすればよいですか？

この画像のような顧客シークバーを作成したい：

enter image description here

this と this をチェックしました。誰かがこれについて何か考えを持っているなら..それを共有してください。ありがとう

androidseekbar
11
Mehul Ranpara

私が正しく理解していれば、オーブに沿って移動する実際のスライダーの上に数値を作成する必要があります。

できることの1つは、オーブ画像の描画可能なファイルにテキストを直接「マージ」して、スライダーの実際の画像の上にテキストを書き込むことです。

私はあなたがあなたがあなたの元の質問で提供した 最初のチュートリアル を使用していると仮定しています

_public class CustomSeekBar extends Activity {
  SeekBar mybar;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_seek_bar);
        mybar = (SeekBar) findViewById(R.id.seekBar1);

        mybar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

      @Override
      public void onStopTrackingTouch(SeekBar seekBar) {

        //add here your implementation
      }

      @Override
      public void onStartTrackingTouch(SeekBar seekBar) {

        //add here your implementation
      }

      @Override
      public void onProgressChanged(SeekBar seekBar, int progress,
          boolean fromUser) {
            int value = seekBar.getProgress(); //this is the value of the progress bar (1-100)
            //value = progress; //this should also work
            String valueString = value + ""; //this is the string that will be put above the slider
            seekBar.setThumb(writeOnDrawable(R.drawable.thumbler_small, value));        
      }
    });
    }

    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); //Change this if you want other color of text
    Paint.setTextSize(20); //Change this if you want bigger/smaller font

    Canvas canvas = new Canvas(bm);
    canvas.drawText(text, 0, bm.getHeight()/2, Paint); //Change the position of the text here

    return new BitmapDrawable(bm);
}
} 
_

これは、リソースからドローアブルを取得し、その上にテキストを描画して、新しいドローアブルを返します。 seekBar.getProgress();を使用して、シークバーから必要な値を取得します。

コードを少しクリーンアップすることをお勧めします。シークバーに触れるたびに新しいPaintオブジェクトが作成されるため、これは非常に悪いことです。

オーブをクリックしたときにそれを機能させるにはonlyより多くのことをする必要があります...

8
Edward van Raak

カスタムシークバービューを作成してみませんか。

これは、シークバーのサムスライダーの中央にテキストを配置するためのサンプルコードであり、テキストはスライダーとともに移動します。スライダーの上にテキストを印刷するのに簡単に適応できるはずです。

public class CustomSeekBar extends SeekBar {

private Paint textPaint;

private Rect textBounds = new Rect();

private String text = "";


public CustomSeekBar(Context context) {
    super(context);
    textPaint = new Paint();
    textPaint.setColor(Color.WHITE);

}

public CustomSeekBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    textPaint = new Paint();
    textPaint.setColor(Color.WHITE);

}

public CustomSeekBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);


    textPaint = new Paint();
    textPaint.setColor(Color.WHITE);
        }

@Override
protected synchronized void onDraw(Canvas canvas) {
    // First draw the regular progress bar, then custom draw our text
    super.onDraw(canvas);

    // Now progress position and convert to text.
    text = Integer.toString(getProgress());

    // Now get size of seek bar.
    float width = getWidth();
    float height = getHeight();

    // Set text size.
    textPaint.setTextSize((height * 3) / 4);
    // Get size of text.
    textPaint.getTextBounds(text, 0, text.length(), textBounds);

    // Calculate where to start printing text.
    float position = (width / getMax()) * getProgress();

    // Get start and end points of where text will be printed.
    float textXStart = position - textBounds.centerX();
    float textXEnd = position + textBounds.centerX();

    // Check does not start drawing outside seek bar.
    if(textXStart < 0) textXStart = 0; 

    if(textXEnd > width)
        textXStart -= (textXEnd - width);

    // Calculate y text print position.
    float yPosition = (height / 2) - textBounds.centerY(); //- (textBounds.bottom / 2);

    canvas.drawText(text, textXStart, yPosition, textPaint);
}

public synchronized void setTextColor(int color) {
    super.drawableStateChanged();
    textPaint.setColor(color);
    drawableStateChanged();
}

}

これがお役に立てば幸いです。

6
A.R.P.

XMLコード

 <SeekBar
    Android:id="@+id/seekBar1"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" 
    Android:progressDrawable="@drawable/seek_bar"
    Android:paddingLeft="15dp"
    Android:paddingRight="15dp"
    Android:thumb="@drawable/thumbler_small"
    Android:indeterminate="false" />

seek_bar.xml

 <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item
        Android:id="@+Android:id/SecondaryProgress"
        Android:drawable="@drawable/first"/>
    <item
        Android:id="@+Android:id/progress"
        Android:drawable="@drawable/second"/>
</layer-list>

最初のドローアブルが空であるか、領域全体に色が表示されていません。

2番目のドローアブルは塗りつぶしまたはフルエリアのカラーです。

this リンクはあなたのより多くを助けます。

6
duggu

画像に表示されているものと同じ外観にしたい場合は、xmlファイルのseekbarにminHeightとmaxHeightの両方の属性を指定する必要があります。例えば：

<SeekBar
    Android:id="@+id/seekBar1"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" 
    Android:progressDrawable="@drawable/seek_bar"
    Android:paddingLeft="15dp"
    Android:paddingRight="15dp"
    Android:thumb="@drawable/thumbler_small"
    **Android:minHeight = "20dp"
    Android:maxHeight = "20dp"**   
    Android:indeterminate="false" />

強調表示されている上記のコードの属性を確認してください。

1
Mridul Shrivastava

こんにちは最初にドローアブルフォルダにxmlファイルを作成します（新しいものを作成しない場合）
そしてこのコードを貼り付けるか、 tutorial に従って、これをできるだけ早く実行します

repeatbottombackground.xml

     <bitmap Android:dither="true" Android:src="@drawable/bottom_bar_repeat" Android:tilemode="repeat"      xmlns:Android="http://schemas.Android.com/apk/res/Android">

    </bitmap>

seek_thumb.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
      <item Android:drawable="@drawable/seek_thumb_pressed" Android:state_pressed="true" Android:state_window_focused="true">

<item Android:drawable="@drawable/seek_thumb_pressed" Android:state_focused="true" Android:state_window_focused="true">
<item Android:drawable="@drawable/seek_thumb_pressed" Android:state_selected="true" Android:state_window_focused="true">
<item Android:drawable="@drawable/seek_thumb_normal">
 </item></item></item></item></selector>

私はあなたに リンク 私はそれがあなたを助けることができることを願っています

申し訳ありませんが、これ以上説明する必要はありません。チュートリアルに従ってください:)


REgards、

0
dondondon