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

作者: 小耗子_20da | 来源:发表于2020-06-26 18:10 被阅读0次

一、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) {
            }
        });
    }
}

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

一、BubbleView介绍

二、BubbleView使用

1、添加依赖

2、在layout文件中添加BubbleView

3、BubbleView属性介绍

4、自定义指示器

三、demo代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

一、BubbleView介绍

二、BubbleView使用

1、添加依赖

2、在layout文件中添加BubbleView

3、BubbleView属性介绍

4、自定义指示器

三、demo代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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