[英]Custom Shape while chatting in android using xml file
In my library Facebook Like Button I implemented custom Path in order to achieve this goal. 在我的库Facebook Like Button我实现了自定义路径以实现这一目标。
There is ability to specify location of marker wherever you want: 可以在任何地方指定标记的位置:
import android.graphics.Path;
import android.graphics.RectF;
public class CalloutPath extends Path {
public static final int MARKER_NONE = 0x0;
public static final int MARKER_LEFT = 0x1;
public static final int MARKER_TOP = 0x2;
public static final int MARKER_RIGHT = 0x4;
public static final int MARKER_BOTTOM = 0x8;
public static final int MARKER_ALL = 0xf;
private final RectF oval = new RectF();
/**
* @param m marker
* @param w width
* @param h height
* @param s stroke thickness
* @param r corners radius
*/
public void build(int m, float w, float h, float s, float r) {
int fl = factor(m, MARKER_LEFT);
int ft = factor(m, MARKER_TOP);
int fr = factor(m, MARKER_RIGHT);
int fb = factor(m, MARKER_BOTTOM);
float x0 = s + 0f;
float x1 = s + r * fl;
float x2 = s + r + r * fl;
float x3 = w / 2f - r;
float x4 = w / 2f;
float x5 = w / 2f + r;
float x6 = w - 1f - s - r - r * fr;
float x7 = w - 1f - s - r * fr;
float x8 = w - 1f - s;
float y0 = s + 0f;
float y1 = s + r * ft;
float y2 = s + r + r * ft;
float y3 = h / 2f - r;
float y4 = h / 2f;
float y5 = h / 2f + r;
float y6 = h - 1f - s - r - r * fb;
float y7 = h - 1f - s - r * fb;
float y8 = h - 1f - s;
reset();
moveTo(x1, y2);
oval.set(x2 - r, y2 - r, x2 + r, y2 + r);
arcTo(oval, 180f, 90f);
if (ft != 0) {
lineTo(x3, y1);
lineTo(x4, y0);
lineTo(x5, y1);
}
lineTo(x6, y1);
oval.set(x6 - r, y2 - r, x6 + r, y2 + r);
arcTo(oval, 270f, 90f);
if (fr != 0) {
lineTo(x7, y3);
lineTo(x8, y4);
lineTo(x7, y5);
}
lineTo(x7, y6);
oval.set(x6 - r, y6 - r, x6 + r, y6 + r);
arcTo(oval, 0f, 90f);
if (fb != 0) {
lineTo(x5, y7);
lineTo(x4, y8);
lineTo(x3, y7);
}
lineTo(x2, y7);
oval.set(x2 - r, y6 - r, x2 + r, y6 + r);
arcTo(oval, 90f, 90f);
if (fl != 0) {
lineTo(x1, y5);
lineTo(x0, y4);
lineTo(x1, y3);
}
close();
}
public static int factor(int marker, int mask) {
return (marker & mask) != 0 ? 1 : 0;
}
}
Because you have this arc or curv you should create a custom jpg
. 因为你有这个弧或曲线,你应该创建一个自定义的
jpg
。
But you can use with corners
and have below : 但你可以使用
corners
并在下面:
You do not need to do it programmatically, you should just use a nine patch
image resource that make a perfect image for you. 您不需要以编程方式执行此操作,只需使用
nine patch
图像资源即可为您创建完美的图像。 If you want to know more about nine patch
and how it works, have a look at this and this links. 如果您想了解更多关于
nine patch
以及它是如何工作,看看这个和这个链接。
As you can see this image makes a perfect chat bubble for you. 正如您所看到的,此图像为您提供了完美的聊天气泡。 I already decompiled
Whatsapp
, Viber
and they all using a nine patched
image to make a chat bubble. 我已经反编译了
Whatsapp
, Viber
,他们都使用nine patched
图像来制作聊天泡泡。 As you can see, the Telegram app also using a nine patched image to achieve this. 正如您所看到的,Telegram应用程序还使用九个修补图像来实现此目的。
My sample chat bubble image: 我的示例聊天气泡图片:
I also should mention that you don't need any custom path. 我还应该提到你不需要任何自定义路径。 It is a typical patched image without any customization.
这是一个典型的修补图像,没有任何自定义。
make 9patch image like this so that if in conversation lots of text then also it can be adjusted itself and also not stretch or compressed from curve . 像这样制作9patch图像,这样如果在对话中有很多文本,那么它也可以自己调整,也不会从曲线拉伸或压缩。
Hope it will help you 希望它会对你有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.