Android 自定聊天气泡消息气泡 BubbleView

一、BubbleView介绍

BubbleView 是一个类似微信聊天气泡但功能非常强大的控件（确切的说是一个容器）。
1.可以设置指示器（即箭头，后面统称指示器）的方向、位置、大小，如效果图所示。
2.可以自定义指示器样式（默认为等腰三角形）。
3.可以设置气泡Z轴方向高度和阴影颜色（有高度才会有阴影）。
4.可以设置子控件是否填充到指示器中（PC版微信中图片效果）。
5.可以设置气泡类型为边框线类型。

demo地址现在访问github比百度网盘还坑，能不能进的看运气了，hosts文件都改了无数遍了，更新一次提交搞了我半个小时

效果图

二、BubbleView使用

1、添加依赖

1.Add it in your root build.gradle at the end of repositories:

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

2.Add the dependency

    dependencies {
            implementation 'com.github.xiaohaozi9825:BubbleView:1.01'
    }

2、在layout文件中添加BubbleView

    <pw.xiaohaozi.bubbleview.BubbleView
        android:id="@+id/bv_defaule"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:padding="8dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="默认样式气泡"
            android:textColor="@color/colorPrimary"
            android:textSize="24sp"
            android:textStyle="bold" />
    </pw.xiaohaozi.bubbleview.BubbleView>

ok,一个普通的气泡就添加完成了，
默认效果是，白色底，指示器指向左，位置居中，无阴影。

3、BubbleView属性介绍

//Z轴方向高度
 app:bubbleElevation="dimension"

//子view是否填充到指示器中
 app:bubbleFillIndicator="boolean"

//指示器方向,枚举值：左上右下
 app:bubbleIndicatorDirection="left|top|right|bottom"

//指示器的位置
//centre：居中，start：上边或左边，end：下边或右边
//float：float类型范围在0-1之间，0对应start，0.5对应centre，1对应end
//dimension 0:中间，正数：从开始位置偏移，负数：从结束位置开始偏移
 app:bubbleIndicatorLocation="start|centre|end|float|dimension"

//指示器宽度和高度，指示器与圆角矩形平行的切边平行的边为宽，垂直的边为高
 app:bubbleIndicatorWidth="dimension"
 app:bubbleIndicatorHeight="dimension"

//气泡颜色
 app:bubbleColor="color"

//阴影颜色
 app:bubbleShadowColor="color"

//边线宽度
 app:bubbleStrokeWidth="dimension"

//圆角矩形圆角半径
app:bubbleRadius="dimension"

4、自定义指示器

如果你觉得默认的等腰三角形指示器不能满足你的需求，可以自定义一个指示器。

 class MyDrawIndicator implements BubbleView.DrawIndicator {
    @Override
    public void drawLeft(Path path, int left, int top, int right, int bottom) {
        int w = right - left;
        int h = bottom - top;
        path.moveTo(right, top + h / 2);
        path.arcTo(left, top - h * 3 / 2, right + h, bottom - h *2/ 3, 90, 72, false);
        path.arcTo(left, top - h, right + h, bottom, 180, -90, false);
        path.lineTo(right, bottom);
    }
    @Override
    public void drawTop(Path path, int left, int top, int right, int bottom) { }
    @Override
    public void drawRight(Path path, int left, int top, int right, int bottom) {
        int w = right - left;
        int h = bottom - top;
        path.moveTo(left, top + h / 2);
        path.arcTo(left - h, top - h * 3 / 2, right, bottom - h * 2/3, 90, -72, false);
        path.arcTo(left - h, top - h, right, bottom, 0, 90, false);
        path.lineTo(left, bottom);
    }
    @Override
    public void drawBottom(Path path, int left, int top, int right, int bottom) {  }
}

三、demo代码

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="16dp"
            tools:context=".MainActivity">

            <pw.xiaohaozi.bubbleview.BubbleView
                android:id="@+id/bv_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                app:bubbleElevation="8dp"
                app:bubbleFillIndicator="true"
                app:bubbleIndicatorDirection="left"
                app:bubbleIndicatorHeight="8dp"
                app:bubbleIndicatorLocation="start"
                app:bubbleIndicatorWidth="16dp"
                app:bubbleShadowColor="#ff0000"
                app:bubbleStrokeWidth="1dp">

                <ImageView
                    android:layout_width="120dp"
                    android:layout_height="200dp"
                    android:scaleType="centerInside"
                    android:src="@drawable/test" />

            </pw.xiaohaozi.bubbleview.BubbleView>

            <pw.xiaohaozi.bubbleview.BubbleView
                android:id="@+id/bv_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:layout_margin="8dp"
                app:bubbleColor="#00ff00"
                app:bubbleElevation="8dp"
                app:bubbleFillIndicator="true"
                app:bubbleIndicatorDirection="right"
                app:bubbleIndicatorHeight="8dp"
                app:bubbleIndicatorLocation="start"
                app:bubbleIndicatorWidth="16dp"
                app:bubbleShadowColor="#ff0000"
                app:bubbleStrokeWidth="1dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#00ff00"
                    android:padding="8dp"
                    android:text="
        自定义指示器\n
        app:bubbleElevation=&quot;8dp&quot;\n
        app:bubbleShadowColor=&quot;#ff0000&quot;\n
        app:bubbleFillIndicator=&quot;false&quot;\n
        app:bubbleIndicatorHeight=&quot;8dp&quot;\n
        app:bubbleIndicatorWidth=&quot;8dp&quot;\n
        app:bubbleIndicatorDirection=&quot;left&quot;\n
        app:bubbleStrokeWidth=&quot;1dp&quot;\n
        app:bubbleIndicatorLocation=&quot;start&quot;"
                    android:textColor="@android:color/white" />
            </pw.xiaohaozi.bubbleview.BubbleView>

            <pw.xiaohaozi.bubbleview.BubbleView
                android:id="@+id/bv_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="8dp"
                app:bubbleColor="@android:color/black"
                app:bubbleElevation="8dp"
                app:bubbleIndicatorDirection="bottom"
                app:bubbleIndicatorLocation="0.8"
                app:bubbleShadowColor="#ff0000"
                app:bubbleStrokeWidth="2dp">

                <TextView
                    android:id="@+id/tv_1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:gravity="center"
                    android:text="
阴影颜色：红色\n
指示器方向：向下\n
指示器位置：居中\n
边线宽度：1dp\n
高度：8dp\n
下面这个气泡将内容填充到了指示器里\n默认不填充
"
                    android:textColor="@color/colorPrimary" />
            </pw.xiaohaozi.bubbleview.BubbleView>

        </LinearLayout>

        <pw.xiaohaozi.bubbleview.BubbleView
            android:id="@+id/bv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_margin="8dp"
            android:padding="8dp"
            app:bubbleColor="#464646"
            app:bubbleIndicatorDirection="top"
            app:bubbleIndicatorHeight="4dp"
            app:bubbleIndicatorLocation="end"
            app:bubbleIndicatorWidth="8dp"
            tools:ignore="DuplicateIds">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:text="发起群聊"
                    android:textColor="@android:color/white" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:text="添加朋友"
                    android:textColor="@android:color/white" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:text="扫一扫"
                    android:textColor="@android:color/white" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:text="收付款"
                    android:textColor="@android:color/white" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:text="帮助与反馈"
                    android:textColor="@android:color/white" />
            </LinearLayout>
        </pw.xiaohaozi.bubbleview.BubbleView>
    </FrameLayout>
</androidx.core.widget.NestedScrollView>

MainActivity.java

package pw.xiaohaozitest.bubbleview;

import androidx.appcompat.app.AppCompatActivity;
import pw.xiaohaozi.bubbleview.BubbleView;

import android.graphics.Path;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private BubbleView mBv1;
    private BubbleView mBv2;
    private BubbleView mBv3;
    private BubbleView mBv4;
    private MyDrawIndicator mMyDrawIndicator = new MyDrawIndicator();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBv1 = findViewById(R.id.bv_1);
        mBv2 = findViewById(R.id.bv_2);
        mBv3 = findViewById(R.id.bv_3);
        mBv4 = findViewById(R.id.bv_4);

        mBv2.setDrawIndicator(mMyDrawIndicator);
        mBv3.setDrawIndicator(mMyDrawIndicator);
    }

class MyDrawIndicator implements BubbleView.DrawIndicator {

    @Override
    public void drawLeft(Path path, int left, int top, int right, int bottom) {
        int w = right - left;
        int h = bottom - top;
        path.moveTo(right, top + h / 2);
//                path.lineTo(left, top);
        path.arcTo(left, top - h * 3 / 2, right + h, bottom - h *2/ 3, 90, 72, false);
        path.arcTo(left, top - h, right + h, bottom, 180, -90, false);
        path.lineTo(right, bottom);

    }

    @Override
    public void drawTop(Path path, int left, int top, int right, int bottom) {
    }

    @Override
    public void drawRight(Path path, int left, int top, int right, int bottom) {
        int w = right - left;
        int h = bottom - top;
        path.moveTo(left, top + h / 2);
//                path.lineTo(right, top);
        path.arcTo(left - h, top - h * 3 / 2, right, bottom - h * 2/3, 90, -72, false);
        path.arcTo(left - h, top - h, right, bottom, 0, 90, false);
        path.lineTo(left, bottom);
    }

    @Override
    public void drawBottom(Path path, int left, int top, int right, int bottom) {
    }
}
}

2021年5月17日
增加了drawRight（）；
修复了重绘后出现多个指示器的bug

Android 自定聊天气泡 消息气泡 BubbleView