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

一、BubbleView介绍

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

效果图

二、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.0'
    }

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、自定义指示器

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

        mBubbleView4 = findViewById(R.id.bubble_view_4);
        mBubbleView4.setDrawIndicator(new 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,
                        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) {
            }
            @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"?>
<LinearLayout 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"
    android:background="#2403DAC5"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <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>

    <pw.xiaohaozi.bubbleview.BubbleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:padding="8dp"
        app:bubbleElevation="8dp"
        app:bubbleIndicatorDirection="bottom"
        app:bubbleIndicatorLocation="centre"
        app:bubbleShadowColor="#00ff00"
        app:bubbleStrokeWidth="1dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="
阴影颜色：绿色\n
指示器方向：向下\n
指示器位置：居中\n
边线宽度：1dp\n
高度：8dp\n
下面这个气泡将内容填充到了指示器里\n默认不填充
"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="#2403DAC5"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <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>
    <pw.xiaohaozi.bubbleview.BubbleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:padding="8dp"
        app:bubbleElevation="8dp"
        app:bubbleIndicatorDirection="bottom"
        app:bubbleIndicatorLocation="centre"
        app:bubbleShadowColor="#00ff00"
        app:bubbleStrokeWidth="1dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="
阴影颜色：绿色\n
指示器方向：向下\n
指示器位置：居中\n
边线宽度：1dp\n
高度：8dp\n
下面这个气泡将内容填充到了指示器里\n默认不填充
"
            android:textColor="@color/colorPrimary" />
    </pw.xiaohaozi.bubbleview.BubbleView>
    <pw.xiaohaozi.bubbleview.BubbleView
        android:id="@+id/bv_guanji"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        app:bubbleColor="@color/colorAccent"
        app:bubbleElevation="8dp"
        app:bubbleFillIndicator="true"
        app:bubbleIndicatorDirection="right"
        app:bubbleIndicatorLocation="start"
        app:bubbleRadius="8dp"
        app:bubbleShadowColor="#00ff00">
        <ImageView
            android:layout_width="120dp"
            android:layout_height="200dp"
            android:scaleType="centerInside"
            android:src="@drawable/timg" />
    </pw.xiaohaozi.bubbleview.BubbleView>
    <pw.xiaohaozi.bubbleview.BubbleView
        android:id="@+id/bubble_view_4"
        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="#00ff00"
        app:bubbleStrokeWidth="1dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="
        自定义指示器\n
        app:bubbleElevation=&quot;8dp&quot;\n
        app:bubbleShadowColor=&quot;#00ff00&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="#00ff00" />
    </pw.xiaohaozi.bubbleview.BubbleView>
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private BubbleView mBvDefaule;
    private BubbleView mBvGuanji;
    private BubbleView mBubbleView4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBvDefaule = findViewById(R.id.bv_defaule);
        mBvGuanji = findViewById(R.id.bv_guanji);
        mBubbleView4 = findViewById(R.id.bubble_view_4);
        mBubbleView4.setDrawIndicator(new 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,
                        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) {
            }
            @Override
            public void drawBottom(Path path, int left, int top, int right, int bottom) {
            }
        });
    }
}