如何創建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值進行操作以獲得適當的位置。 哦，如果您想在文本后面放置紅色矩形，我想您只需要對矩形做類似的事情。 希望這對任何遇到類似問題的人有所幫助！