[英]How to create ChatHead style ImageView?
I've created an ImageView
subclass which utilizes a BitmapShader
, Paint
, and the Canvas
to draw the image into a circle creating a circular ImageView
feel and look. 我创建了一个
ImageView
子类,该子类利用BitmapShader
, Paint
和Canvas
将图像绘制成一个圆形,从而创建圆形ImageView
感觉和外观。 One thing Facebook's ChatHeads do is put a notification box on top of their ImageView
stating how many new messages there are. Facebook的ChatHeads要做的一件事是在其
ImageView
顶部放置一个通知框,说明有多少新消息。 I would like to mimic this look and be able to apply a notification box on top of my CircularImageView
. 我想模仿这种外观,并能够在我的
CircularImageView
顶部应用一个通知框。 Here is an example of what I'm talking about: 这是我正在谈论的示例:
Notice the red box with the number one in the photo? 注意到照片中带有第一位的红色框了吗? I would like to place something like that above my
ImageView
but am unsure how I would go about this. 我想在
ImageView
上方放置类似的内容,但不确定如何处理。 Perhaps I could override the onDraw
method and use the drawText
method on the canvas
object but how would I provide the correct coordinates for the text? 也许我可以重写
onDraw
方法并在canvas
对象上使用drawText
方法,但是如何为文本提供正确的坐标? Are the coordinates relative to the ImageView
? 坐标相对于
ImageView
吗?
So, to sum it all up, what would be the best approach to placing a notifcation box over an ImageView
? 因此,总而言之,将通知框放在
ImageView
的最佳方法是什么?
The solution to my problem was precisely what I thought. 我的问题的解决方案正是我的想法。 I had to override the
onDraw
method and after drawing the Bitmap
to the Canvas
in a circle (already done before my question), I just had to call the drawText
method on the Canvas
instance which draws over whatever was previously drawn. 我必须重写
onDraw
方法,并在将Bitmap
绘制到Canvas
上一圈之后(已经在我的问题之前完成),我只需要在Canvas
实例上调用drawText
方法,该方法将覆盖先前绘制的内容。
Here's the code: 这是代码:
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);
Note, the bitmap object was already drawn to the canvas as a circle and was not the emphasis of this question, therefore I did not post that code. 请注意,位图对象已经作为圆形绘制到画布上了,并且不是此问题的重点,因此我没有发布该代码。 All that's left is playing around with the x and y values to get the appropriate positioning.
剩下的就是围绕x和y值进行操作以获得适当的位置。 Oh and if you want to put the red rectangle behind the text I assume you'd have to do something similar just with a rectangle.
哦,如果您想在文本后面放置红色矩形,我想您只需要对矩形做类似的事情。 I hope this helps anyone stuck with a similar problem!
希望这对任何遇到类似问题的人有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.