最近做了聊天气泡功能,为自己的聊天室美化了一下聊天效果;

先来看一下效果:

主要的思路是:以一个JTextPane作为显示的面板,然后自定义一个组件JBubble气泡组件来实现他的聊天气泡,然后通过JTextPane中的insertComponent(jbubble);方法把组件添加
到JTextPane上。同时通过setCaretPosition(count);方法设置添加到末尾,count为当前以及有的组件的书目加一;

一:具体的过程:

(1)自定义JBubble组件:继承JComponent,重写paintComponent(Graphics g) 方法

在java中,所有的组件都是画出来的,所以这个聊天气泡画出来的;具体的步骤是:

  1. 首先画出发消息的人的头像 :g.drawImage(img, x, y, width, height, observer);
  2. 再画出消息箭头 g.fillPolygon(xPoints, yPoints, nPoints):通过给定缺点的几点来画一个多边形出来,第一个参数是一个是该多边形的所有的点的X轴坐标,第二个参数是该多边形的所有的点的Y轴的坐标,第三个点是该多边形的点数;
  3. 然后在根据消息的宽度,以及高度,画出消息矩形框:g.fillRoundRect(x, y, width, height, arcWidth, arcHeight);
  4. 最后画出文字:g.drawString(str, x, y);

在构建组件的时候需要去区分一下是自己发的消息,还是他人发的消息,这样不同的发送方,画的位置不一样。

在实现这个组件中需要解决的问题是:

  • 确定文字的高度和宽度

消息矩形框的高度和宽度是根据一段字符串的高度以及宽度来确定的。然后还需要考虑的是当字符串的宽度大于组件的宽度的时候我们就需要来考虑一下文字的换行问题;

在java中提供了一个FontMetrics类来可以获取文字的大小:

   FontMetrics fm = FontDesignMetrics.getMetrics(font);int width = fm.stringWidth(message);// 获取整个字符串的宽度int height = fm.getHeight();//获取字符的高度

在JBubble组件中利用了一个ArrayList来存储以及分好行的字符串,之前用过一个String类型的数组来存储,但是后面发现,每一个字符的宽度是不一样的(中文与英文以及数字之间是不一样的),所以不能够通过整除来确定划分的字符串的长度。虽然想过通过正则表达式来区分英文以及中文,数字这样,然后来进行分行,但最后还是选择了一种简单地方法;

(2) MessagePane类:实现文字和图片的处理,然后添加到JTextPane上面

为了划分字符串,实现分行,定义了一个MessagePane来管理所有的消息气泡;

主要的属性是:一个JTextPane对象,以及两个ImageICon对象来表示自己的头像以及他人的头像;然后两个int,分别表示一个组件的宽度以及 JTextPane中的组件的数目;

主要的方法是:

  • addTextMessage(String messages, boolean fla);添加文字消息;

换行的操作比较简单,利用while循环来遍历整个字符串,当一段字符串的长度大于字符的时候就存入ArrayList中;

/**** 添加文本消息* * @param messages*            要添加的消息* @param fla*            是否是自己发送的消息*/public void addTextMessage(String messages, boolean fla) {Font font = jtextpane.getFont();// 获取字符串的高度int sHeight = getWordHeight(font, messages);System.out.println("字符串取得的高度为" + sHeight);// 获取字符串的宽度int sWidth = getWordsWidth(font, messages);System.out.println("字符串取得的宽度为" + sWidth);//存储分行的字符串ArrayList<String> str = new ArrayList<String>();if (sWidth > width - 100) {//            int i=0;int  beginIndex=0;int endIndex=1;while( endIndex<messages.length()){String s=messages.substring(beginIndex,endIndex);if(getWordsWidth(font, s)>(width - 100)||endIndex==messages.length()-1){str.add(messages.substring(beginIndex,endIndex-1));beginIndex=endIndex-1;            }endIndex++;}    } elsestr.add(messages);JBubble jbubble
= new JBubble(sHeight,   getWordsWidth(font,str.get(0)), str, fla);if (fla)jbubble.setUserIcon(userIcon);elsejbubble.setUserIcon(otherIcon);
jbubble.setPreferredSize(new Dimension(width, sHeight * (str.size() + 1) + 30));jtextpane.insertComponent(jbubble);count++;jtextpane.setCaretPosition(count);// jtextpane.repaint();}

转载于:https://www.cnblogs.com/hesi/p/6445264.html

JAVA实现QQ聊天气泡相关推荐

  1. HTML怎么做类似QQ聊天气泡,h5实现QQ聊天气泡的实例介绍

    这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...

  2. qq气泡php接口,h5实现QQ聊天气泡的实例介绍

    这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...

  3. 【HTML5】简单实现QQ聊天气泡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. java qq聊天界面代码,Java简易qq聊天,代码

    Java简易qq聊天,代码 关注:156  答案:2  手机版 解决时间 2021-02-26 11:56 提问者心死旳很干净 2021-02-25 16:17 Java简易qq聊天,代码 最佳答案 ...

  5. winform实现QQ聊天气泡200行代码

    c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...

  6. QQ聊天气泡拖动效果实现

    #QQ聊天气泡拖动效果实现 ##概述 本文的目的是实现类似于QQ消息提醒的气泡的拖拽效果.网上已有大神的实现效果是通过监听控件的OnTouchEvent事件的ACTION_DOWN,ACTION_MO ...

  7. java怎么做qq的聊天气泡_【HTML5】实现QQ聊天气泡效果

    今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...

  8. java 气泡_JAVA实现QQ聊天气泡

    最近做了聊天气泡功能,为自己的聊天室美化了一下聊天效果: 先来看一下效果: 主要的思路是:以一个JTextPane作为显示的面板,然后自定义一个组件JBubble气泡组件来实现他的聊天气泡,然后通过J ...

  9. html做一个qq气泡,HTML5实现QQ聊天气泡效果

    今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...

最新文章

  1. Java并发编程(五)JVM指令重排
  2. 训练深度学习网络时候,出现Nan是什么原因,怎么才能避免?——我自己是因为data有nan的坏数据,clear下解决...
  3. springboot 按钮权限验证_springboot学习之权限系统登录验证SpringSecurity
  4. CTFshow php特性 web128
  5. 数据更改后推送_合格的数据科学家,这些Github知识必须了解
  6. python构建知识库_手把手教导实战Python Web项目
  7. ubuntu完全卸载apache2
  8. 1001.害死人不偿命的(3n+1)猜想
  9. STM32F1笔记(一)GPIO输出
  10. Adobe illustrator 多个对象进行环形布局 - 连载22
  11. docker 容器 日志_如何为Docker容器设置日志轮换
  12. Scikit-Learn 新版本发布!一行代码秒升级
  13. 孙正义辞任阿里董事 阿里:软银仍有权提名一名董事进董事会
  14. 学习笔记 十八: kickstart
  15. 初入前端框架bootstrap--Web前端
  16. iOS开发-使用dSYM文件符号化Crash日志
  17. 容器化部署openvpn,访问策略配置
  18. 06-CSS盒模型详解
  19. Qgis教程3:数据美化
  20. layui+croppers完成图片剪切上传

热门文章

  1. 【RHCE学习笔记】基于安全的NFS认证(kerberos)
  2. Map获取键值,Map的几种遍历方法
  3. AIX 查看进程的内存使用情况
  4. oracle rownum分页 出现重复数据
  5. python部署到hadoop上_python实现mapreduce(2)——在hadoop中执行
  6. python模拟布朗运动_python开发之thread实现布朗运动的方法
  7. carthage update --no-use-binaries --platform mac,ios
  8. SQLite的sqlite_sequence表
  9. ubuntu 安装docker_Docker: 教程04 - (初始化安装之在 Ubuntu 安装Docker CE)
  10. mac云显卡服务器_重磅!NVIDIA GeForce NOW登陆Mac:云显卡玩吃鸡逆天