我的客户想在应用程序中使用以下小部件:
Text
来自服务器。梯度角取决于也来自服务器的变量。此外,客户希望动态填充渐变(用户必须从0开始查看渐变的填充方式)。
现在我执行以下操作:我使用两个图像 - 一个是彩色圆圈,第二个是灰色圆圈。我创建一个具有特定角度的圆弧段并将其作为蒙版应用于灰色圆圈,然后将彩色圆圈与新的灰色圆圈(扇形截断的位置)组合在一起。
这是我的代码。我初始化调用initializeVarsForCompoundImDrawing
的变量,然后在第二次调用makeCompoundImage
几次,最后调用nullVarsForCompoundImDrawing
释放资源:
private static Bitmap notColoredBitmap;
private static Bitmap coloredBitmap;
private static Bitmap notColoredWithMaskBitmap;
private static Bitmap finalBitmap;
private static Canvas notColoredWithMaskCanvas;
private static Paint paintForMask;
private static Paint smoothPaint;
private static Canvas finalCanvas;
private static RectF rectForMask;
public static void initializeVarsForCompoundImDrawing()
{
Context context = MainApplication.getContext();
notColoredBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.not_colored);
coloredBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.colored);
paintForMask = new Paint(Paint.ANTI_ALIAS_FLAG);
paintForMask.setStyle(Paint.Style.FILL);
paintForMask.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
rectForMask = new RectF(0, 0, notColoredBitmap.getWidth(), notColoredBitmap.getHeight());
smoothPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
public static void nullVarsForCompoundImDrawing()
{
notColoredBitmap = null;
coloredBitmap = null;
paintForMask = null;
rectForMask = null;
smoothPaint = null;
}
public static void makeCompoundImage(ImageView imageView, int angle)
{
notColoredWithMaskBitmap = Bitmap.createBitmap(notColoredBitmap.getWidth(), notColoredBitmap.getHeight(), Bitmap.Config.ARGB_8888);
notColoredWithMaskCanvas = new Canvas(notColoredWithMaskBitmap);
notColoredWithMaskCanvas.drawBitmap(notColoredBitmap, 0, 0, smoothPaint);
notColoredWithMaskCanvas.drawArc(rectForMask, 270, angle, true, paintForMask);
finalBitmap = Bitmap.createBitmap(notColoredBitmap.getWidth(), notColoredBitmap.getHeight(), Bitmap.Config.ARGB_8888);
finalCanvas = new Canvas(finalBitmap);
finalCanvas.drawBitmap(coloredBitmap, 0, 0, smoothPaint);
finalCanvas.drawBitmap(notColoredWithMaskBitmap, 0, 0, smoothPaint);
imageView.setImageBitmap(finalBitmap);
}
第一个问题:是否可以改进此代码以减少使用资源?
第二个问题:如何将文字添加到finalBitmap
(现在它是TextView
,它显示在ImageView
顶部的图片上?
答案 0 :(得分:7)
回答你的问题:是的,它可以更简单,更轻松地完成:
public class Ring extends View {
private Bitmap mBack;
private Paint mPaint;
private RectF mOval;
private Paint mTextPaint;
public Ring(Context context) {
super(context);
Resources res = getResources();
mBack = BitmapFactory.decodeResource(res, R.drawable.back);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
Bitmap ring = BitmapFactory.decodeResource(res, R.drawable.ring);
mPaint.setShader(new BitmapShader(ring, TileMode.CLAMP, TileMode.CLAMP));
mOval = new RectF(0, 0, mBack.getWidth(), mBack.getHeight());
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setTextSize(24);
mTextPaint.setTextAlign(Align.CENTER);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.translate((getWidth() - mBack.getWidth()) / 2, (getHeight() - mBack.getHeight()) / 2);
canvas.drawBitmap(mBack, 0, 0, null);
float angle = 220;
canvas.drawArc(mOval, -90, angle, true, mPaint);
canvas.drawText("Text",
mBack.getWidth() / 2,
(mBack.getHeight() - mTextPaint.ascent()) / 2,
mTextPaint);
}
}
编辑:
这是一个替代解决方案(没有居中,没有文字,只是一个概念)
class Ring extends View {
private Bitmap back;
private Bitmap ring;
private RectF oval;
private Paint arcPaint;
public Ring(Context context) {
super(context);
Resources res = getResources();
back = BitmapFactory.decodeResource(res, R.drawable.back);
ring = BitmapFactory.decodeResource(res, R.drawable.ring);
arcPaint = new Paint();
arcPaint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
oval = new RectF(-1, -1, ring.getWidth()+1, ring.getHeight()+1);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawARGB(0xaa, 0, 255, 0);
canvas.drawBitmap(back, 0, 0, null);
canvas.saveLayer(oval, null, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
canvas.drawBitmap(ring, 0, 0, null);
float angle = 300;
canvas.drawArc(oval, angle-90, 360-angle, true, arcPaint);
canvas.restore();
}
}
答案 1 :(得分:6)
您可以将我的项目用作示例https://github.com/donvigo/CustomProgressControls。它还没有在github上记录,但我希望你能理解我的代码:)
编辑:圈内的文字不是TextView
,而是使用paint
绘制的。
答案 2 :(得分:2)
我一直在做类似的事情 - 动画进度条,就像你的照片一样,但每一个进度条的状态都在改变。在里面我有时间文本,直到进度到期。我将把我的整个观点放在这里,也许对某人有用。
public class TickerView extends View {
private Paint mPaint, backPaint;
private RectF mOval;
private Paint mTextPaint;
private int time;
private float progress = 100;
public TickerView(Context context) {
super(context);
init();
}
public TickerView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TickerView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.WHITE);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(UIHelper.getPixel(1));//1dp
mPaint.setDither(true); // set the dither to true
mPaint.setStrokeJoin(Paint.Join.ROUND); // set the join to round you want
mPaint.setStrokeCap(Paint.Cap.ROUND); // set the paint cap to round too
mPaint.setPathEffect(new PathEffect()); // set the path effect when they join.
backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
backPaint.setColor(ColorManager.roseLine);
backPaint.setStyle(Paint.Style.STROKE);
backPaint.setStrokeWidth(UIHelper.getPixel(1));//1dp
backPaint.setDither(true); // set the dither to true
backPaint.setStrokeJoin(Paint.Join.ROUND); // set the join to round you want
backPaint.setStrokeCap(Paint.Cap.ROUND); // set the paint cap to round too
backPaint.setPathEffect(new PathEffect()); // set the path effect when they join.
measure(MeasureSpec.EXACTLY, View.MeasureSpec.EXACTLY);
mOval = new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight());
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTypeface(FontSetter.HelveticaNeueLight);
mTextPaint.setTextSize(UIHelper.getPixel(15));
mTextPaint.setTextAlign(Paint.Align.CENTER);
mOval = new RectF(UIHelper.getPixel(1), UIHelper.getPixel(1), getWidth(), getHeight());
}
/**
*
* @param persent in range [0..1]
* @param time - seconds left before progress will be executed
*/
public void setProgress(float persent, int time){
this.progress = persent;
this.time = time;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawText("" + time,
getWidth() / 2,
(getHeight() - mTextPaint.ascent()) / 2,
mTextPaint);
mOval.right = getWidth() - UIHelper.getPixel(1);
mOval.bottom = getHeight() - UIHelper.getPixel(1);
canvas.drawArc(mOval, 0, 360, false, backPaint);
int angle = (int)( progress * 360 );
canvas.drawArc(mOval, -90, angle, false, mPaint);
}
}