原博客地址:自定义Android聊天气泡ChatView。仿微信聊天气泡,能自定义边框,颜色,点击特效。_安卓仿微信聊天气泡图-CSDN博客
引言:最近公司准备做一款即时通讯的APP,就照着微信的功能模块做。于是我在网上找了很多聊天气泡BubbleView,要不就是样式太丑,要不就是对交互点击不太友好。所以小编就下定决心,自己画一个满足要求的自定义ChatView。由于即时通讯中有语音功能,所以这个ChatView内部还能够放下一个小喇叭的GIF,所以我准备从继承RelativeLayout着手,这样可以随意添加子View。
github地址:GitHub - bigdongdong/ChatView: 自定义的聊天气泡View
样式如下:
可以自定义气泡箭头的位置,宽高,气泡填充颜色,边框颜色,点击特效等......................
带边框的聊天气泡:
使用方式:
(详情请参考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:GitHub - bigdongdong/ChatView: 自定义的聊天气泡View