Пользовательский виджет ProgressBar

Question

Я пытаюсь сделать что-то похожее на это , но в Android.

В Android я могу расширить ProgressBar, но я сомневаюсь, как добавить TextViews сверху. В iphone это было легко, потому что я могу использовать абсолютные позиции, но не здесь.

Есть идеи?

EDIT: Я решил использовать SeekBar вместо ProgressBar для добавления большого пальца. Я прокомментировал ниже. Некоторые моменты, на которые следует обратить внимание:

• Я использую жестко закодированные значения, фактически три, но это может быть больше или меньше.
• Когда большой палец перемещается, он перемещается на 50, но он должен перейти к различным опциям.
• Я использую пиксели вместо точек на дюйм. Я должен это исправить.
• Мне нужно решить проблему отсутствия анимации при движении большого пальца.

Мой прогресс до сих пор:

public class SliderFrameLayout extends FrameLayout implements OnSeekBarChangeListener {
    private SeekBar mSlider;
    private Context mContext;
    private int mSize = 3;
    private TextView[] mTextViews;
    private String[] mTexts = {"Nafta", "Gas", "Gasoil"};

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

        mContext = context;
        setWillNotDraw(false);
        mTextViews = new TextView[mSize];
        addSlider();
        addTextViews();
    }

    private void addTextViews() {
        for ( int i=0 ; i < mSize ; i++ ) {
            TextView tv;
            tv = new TextView(mContext);
            tv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
                    LayoutParams.WRAP_CONTENT));
            tv.setText(mTexts[i]);
            mTextViews[i] = tv;
            addView(tv);    
        }
    }

    private void addSlider() {
        FrameLayout fl = new FrameLayout(mContext, null);
        LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
        fl.setLayoutParams(params);
        fl.setPadding(30, 30, 30, 0);


        mSlider = new SeekBar(mContext, null);
        LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
        //lp.setMargins(30, 30, 30, 0);
        //mSlider.setPadding(30, 30, 30, 0);
        mSlider.setLayoutParams(lp);
        //mSlider.setMax(mSize-1);
        mSlider.setThumbOffset(30);
        //mSlider.setProgressDrawable(mContext.getResources().getDrawable(R.drawable.slider_track));
        //mSlider.setThumb(mContext.getResources().getDrawable(R.drawable.slider_thumb));
        mSlider.setOnSeekBarChangeListener(this);
        //addView(mSlider);

        fl.addView(mSlider);
        addView(fl);

    }

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


        Rect rectf = new Rect();
        mSlider.getLocalVisibleRect(rectf);

    Log.d("WIDTH        :",String.valueOf(rectf.width()));
    Log.d("HEIGHT       :",String.valueOf(rectf.height()));
    Log.d("left         :",String.valueOf(rectf.left));
    Log.d("right        :",String.valueOf(rectf.right));
    Log.d("top          :",String.valueOf(rectf.top));
    Log.d("bottom       :",String.valueOf(rectf.bottom));

        int sliderWidth = mSlider.getWidth();

        int padding = sliderWidth / (mSize-1);

        for ( int i=0 ; i < mSize ; i++ ) {
            TextView tv = mTextViews[i];
            tv.setPadding(i* padding, 0, 0, 0);
        }
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress,
            boolean fromUser) {
        // TODO Auto-generated method stub

    }

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

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        Log.d("SEEK", "value: " + seekBar.getProgress());
        seekBar.setProgress(50);
    }
}

Answer 1

Вы уже переопределяете onDraw, почему бы просто не нарисовать текстовые строки самостоятельно?Вместо того, чтобы проходить через накладные расходы по добавлению TextViews и работе с отступами, просто используйте canvas.drawText для физического рисования текстовых строк в нужном месте.

Вы можете указать стиль и цвет текста, используя Paint object:

Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint.setColor(r.getColor(R.color.text_color));
textPaint.setFakeBoldText(true);
textPaint.setSubpixelText(true);
textPaint.setTextAlign(Align.LEFT);

И получить точное позиционирование, используя метод measureText для этого объекта Paint, чтобы определить, какой ширины будет конкретная строка при рисовании на холсте:

textWidth = (int)textPaint.measureText(mTexts[i]);

Затем вы можете перебрать свой массив текстовых строк и нарисовать каждую строку в нужном месте.

@Override 
protected void onDraw(Canvas canvas) {
  int myWidth = getMeasuredWidth()-LEFT_PADDING-RIGHT_PADDING;
  int separation = myWidth / (mSize-1);

  for (int i = 0; i++; i < mSize) {
    int textWidth = (int)textPaint.measureText(mTexts[i]);
    canvas.drawText(mTexts[i], 
                    LEFT_PADDING+(i*separation)-(int)(textWidth/2), 
                    TOP_PADDING, 
                    textPaint);
  }
}

Вы, вероятно, захотите выполнять измерения в onMeasure вместо onDraw, и вам, вероятно, следует измерять толькоширина каждой строки, когда вы изменяете текст или рисование, но я поместил все это в одном месте, чтобы (надеюсь) было легче следовать.

Answer 2

Просто попробуй. Вы можете поместить свой пользовательский прогрессбар в FrameLayout, а затем, внутри этого макета, вы должны добавить три TextViews с fill_parent в качестве ширины. Затем вы можете выровнять три текста таким образом: слева, по центру и справа. Ваши тексты не должны перезаписываться, и вы можете немного изменить их положение, используя поля.

Answer 3

Вы можете установить для TextViews:

android:layout_width="0dp"
android:layout_weight="1"

Это позволит платформе Android позаботиться о размещении TextView и избавит вас от необходимости вручную вычислять заполнение каждого из них.

Answer 4

Вы можете использовать это ... не совсем то, что вы ищете ... но очень легко настроить и настроить ...