java - 如何使用进度文本作为拇指制作垂直搜索栏
问题描述
我想创建一个垂直搜索栏,进度显示在拇指附近。
我通过覆盖 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);
}
所以问题是如果我像这样drawText,文本也会旋转。那么如何解决这个问题呢?
同时,我尝试了一些自定义 View 实现,我对此很陌生。
解决方案
更新 Khemraj 的答案
实际上,改变拇指是 Khemraj 所说的简单技巧。但问题是当旋转画布时,它的所有内容都会旋转(简单逻辑)。更新拇指的时候也会反映这个问题。所以简单的事情就是做一个旋转的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 度。所以最后我们会得到实际的结果
在这里,我发布了工作示例。
谢谢, Khemraj
推荐阅读
- ios - 将 iOS 应用程序名称从一个 Apple 帐户转移到另一个
- python - TypeError: __init__() 接受 2 个位置参数,但给出了 3 个位置参数(和 3 个仅关键字参数)
- java - 我需要显示存储在 cloud firestore android studio 中的数据
- python - url 函数只显示 1 行?
- android - 如何在 Flutter 手机身份验证中删除验证码
- docker - docker容器文件访问
- javascript - 如何停止在 xmlHttpRequest 中将数字转换为字符串?
- firebase-cloud-messaging - Firebase 云消息统计
- javascript - 有什么办法可以让 JS 强类型化?
- javascript - Plotly 中的自定义图标。Js 颜色和尺寸