自定义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:1.2' //添加依赖
  }

 

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

 

 

 

 

发布了10 篇原创文章 · 获赞 6 · 访问量 3390
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览