简体   繁体   English

使用xml文件在android中聊天时自定义形状

[英]Custom Shape while chatting in android using xml file

I am able to draw custom back ground to xml file using Shape 我能够使用Shape将自定义背景绘制到xml文件中

But how to add arc or curv at specified place. 但是如何在指定的地方添加弧形或曲线。

在此输入图像描述

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: 可以在任何地方指定标记的位置:

在此输入图像描述在此输入图像描述

Code from source : 源代码

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. 我已经反编译了WhatsappViber ,他们都使用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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM