如何创建ChatHead风格的ImageView？

Question

我创建了一个ImageView子类，它使用BitmapShader，Paint和Canvas将图像绘制成圆形，创建一个圆形{{1}感觉和看。 Facebook的ChatHeads做的一件事是在ImageView之上放置一个通知框，说明有多少新消息。我想模仿这种外观，并能够在ImageView之上应用通知框。以下是我所说的一个例子：

请注意照片中第一个红色方框？我想在CircularImageView之上放置类似的内容，但我不确定如何解决这个问题。也许我可以覆盖ImageView方法并在onDraw对象上使用drawText方法，但是如何为文本提供正确的坐标？坐标是否相对于canvas？

那么，总而言之，将一个通知框放在ImageView上的最佳方法是什么？

Answer 1

解决我的问题正是我的想法。我必须覆盖onDraw方法，然后将Bitmap绘制成一个圆圈中的Canvas（在我的问题之前已经完成），我只需调用drawText方法在Canvas实例上，它覆盖了以前绘制的任何内容。

以下是代码：

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值以获得适当的定位。哦，如果你想把红色矩形放在文本后面，我认为你必须做一些类似于矩形的东西。我希望这可以帮助任何陷入类似问题的人！