如何创建ChatHead风格的ImageView？

Question

我创建了一个ImageView子类，该子类利用BitmapShader ， Paint和Canvas将图像绘制成一个圆形，从而创建圆形ImageView感觉和外观。 Facebook的ChatHeads要做的一件事是在其ImageView顶部放置一个通知框，说明有多少新消息。 我想模仿这种外观，并能够在我的CircularImageView顶部应用一个通知框。 这是我正在谈论的示例：

注意到照片中带有第一位的红色框了吗？ 我想在ImageView上方放置类似的内容，但不确定如何处理。 也许我可以重写onDraw方法并在canvas对象上使用drawText方法，但是如何为文本提供正确的坐标？ 坐标相对于ImageView吗？

因此，总而言之，将通知框放在ImageView的最佳方法是什么？

Answer 1

我的问题的解决方案正是我的想法。 我必须重写onDraw方法，并在将Bitmap绘制到Canvas上一圈之后（已经在我的问题之前完成），我只需要在Canvas实例上调用drawText方法，该方法将覆盖先前绘制的内容。

这是代码：

BitmapDrawable bitDraw = (BitmapDrawable) this.getDrawable();
Bitmap bitmap = bitDraw.getBitmap();

//paint for the text
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setTextSize((int) getTextSize() * scale);
paint.setShadowLayer(1f, 0f, 1f, Color.BLACK);

//draw the text to specific position
Rect bounds = new Rect();
paint.getTextBounds(String.valueOf(getNotificationAmount()), 0, String.valueOf(getNotificationAmount()).length(), bounds);
int x = bitmap.getWidth() - bounds.width();
int y = bitmap.getHeight() - bounds.height();
canvas.drawText(String.valueOf(getNotificationAmount()), x, y, paint);

请注意，位图对象已经作为圆形绘制到画布上了，并且不是此问题的重点，因此我没有发布该代码。 剩下的就是围绕x和y值进行操作以获得适当的位置。 哦，如果您想在文本后面放置红色矩形，我想您只需要对矩形做类似的事情。 希望这对任何遇到类似问题的人有所帮助！