自定义Android聊天气泡ChatView。仿微信聊天气泡，能自定义边框，颜色，点击特效。

原博客地址：https://blog.csdn.net/weixin_40400031/article/details/90755036

 

引言：最近公司准备做一款即时通讯的APP，就照着微信的功能模块做。于是我在网上找了很多聊天气泡BubbleView，要不就是样式太丑，要不就是对交互点击不太友好。所以小编就下定决心，自己画一个满足要求的自定义ChatView。由于即时通讯中有语音功能，所以这个ChatView内部还能够放下一个小喇叭的GIF，所以我准备从继承RelativeLayout着手，这样可以随意添加子View。

---

github地址：https://github.com/bigdongdong/ChatView

 

样式如下：

可以自定义气泡箭头的位置，宽高，气泡填充颜色，边框颜色，点击特效等......................

 

带边框的聊天气泡：

 

 

 

使用方式：

（详情请参考github项目地址）

 

1.项目配置

 allprojects {
      repositories {
          ...
          maven { url 'https://jitpack.io' }  //添加jitpack仓库
      }
  }
  
  dependencies {
	  implementation 'com.github.bigdongdong:ChatView:2.0' //添加依赖
  }

 

2.布局代码

<com.cxd.chatview.moudle.ChatView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="15dp"
        android:paddingRight="10dp"
        android:layout_marginRight="30dp"

        xmlns:chat="http://schemas.android.com/apk/res-auto"
        chat:arrow_direction="left"
        chat:is_arrow_center="true"
        chat:arrow_up_distance = "10dp"
        chat:arrow_width = "5dp"
        chat:arrow_height = "12dp"
        chat:stroke_width = "1px"
        chat:stroke_color = "#FFFFFF"
        chat:fill_color = "#FFFFFF"
        chat:press_stroke_color = "#50111111"
        chat:press_fill_color = "#50111111"
        chat:conner_radius = "6dp"
        >
        <TextView
            android:textSize="16dp"
            android:layout_centerVertical="true"
            android:id="@+id/text"
            android:text="这是箭头向左的聊天气泡"
            android:textColor="#4a4a4a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </com.cxd.chatview.moudle.ChatView>

 

3.效果图

 

XML属性说明

xmlns:chat="http://schemas.android.com/apk/res-auto"
        chat:arrow_direction="left"
        chat:is_arrow_center="true"
        chat:arrow_up_distance = "10dp"
        chat:arrow_width = "5dp"
        chat:arrow_height = "12dp"
        chat:stroke_width = "1px"
        chat:stroke_color = "#FFFFFF"
        chat:fill_color = "#FFFFFF"
        chat:press_stroke_color = "#50111111"
        chat:press_fill_color = "#50111111"
	chat:conner_radius = "6dp"

更多最新版本信息，请移步github:https://github.com/bigdongdong/ChatView