Как сделать вертикальную панель поиска с текстом прогресса в виде большого пальца - PullRequest
Новая
       21

Как сделать вертикальную панель поиска с текстом прогресса в виде большого пальца

0 голосов
/ 10 мая 2018

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

requirement

Я создал вертикальную панель поиска, переопределив класс Seekbar и вращая холст. Но я не знаю, как сделать текст рядом с большим пальцем. 

 @Override
protected final void onDraw(@NonNull final Canvas c) {
    if (null == mPaint) {
        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setTextSize(50);
    }
    c.rotate(ROTATION_ANGLE);
    c.translate(-getHeight(), 0);
    super.onDraw(c);
    Rect rect = getThumb().getBounds();
    c.drawText(getProgress()+"%", rect.exactCenterX(), rect.exactCenterY(), mPaint);
}

Так что проблема в том, что если я рисую текст, как этот, текст тоже поворачивается. Так как это исправить?

Тем временем я попробовал какую-то пользовательскую реализацию View, и я новичок в этом.

1 Ответ

0 голосов
/ 11 мая 2018

Обновление ответа Хемраджа

На самом деле смена большого пальца - это простой трюк, как сказал Хемрадж.Но проблема в том, когда вращая холст , все его содержимое будет вращаться (простая логика).При обновлении большого пальца также отразится эта проблема.Так что самое простое - сделать повернутый CustomTextView.

Метод создания большого пальца 

 public Drawable getThumb(int progress) {
    int width = getWidth();

    ((TextView) mThumbView.findViewById(R.id.tvProgress)).setText(String.format(Locale.getDefault(), "%d%%", progress));
    mThumbView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
    Bitmap bitmap = Bitmap.createBitmap(mThumbView.getMeasuredWidth(), mThumbView.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    mThumbView.layout(0, 0, mThumbView.getMeasuredWidth(), mThumbView.getMeasuredHeight());
    mThumbView.draw(canvas);
    return new BitmapDrawable(getResources(), bitmap);
}

Макет 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">

<ImageView
    android:layout_marginTop="30dp"
    android:id="@+id/imageView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/seek_thumb_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.samsung.lighting.presentation.ui.custom_views.RotatedTextView
    android:id="@+id/tvProgress"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="20%"
    android:textColor="#000000"
    android:textSize="12sp"
    app:angle="90"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView6" />
</android.support.constraint.ConstraintLayout>

RotatedTextView

public class RotatedTextView extends AppCompatTextView {
private int mRotationAngle = 90;


@Override
protected void onDraw(Canvas canvas) {
    if (mRotationAngle == 90) {
        canvas.rotate(mRotationAngle);
        canvas.translate(0, -getWidth());
    } else if (mRotationAngle == -90) {
        canvas.rotate(mRotationAngle);
        canvas.translate(-getHeight(), 0);
    }
    super.onDraw(canvas);
} 
}

Итак, сначала мы повернем текст на 90 или -90 градусов и установим для большого пальца значение VerticalSeekBar, а при повороте вертикальной панели поискахолст до 90 или -90 градусов.Итак, наконец мы получим фактический результат

Здесь я разместил рабочий пример.

Спасибо, Хемрай

...