聊天机器人(一)-UI篇

  • 内容
  • 评论
  • 相关

聊天机器人的聊天界面是仿照着QQ来的,加了一个聊天气泡,看起来还看的过去,哈哈,废话不多说,先看看最后的样子吧

wechat2

主要的用到的控件只有三个一个用于显示消息的ListView,一个Button,以及一个EditText,我们先来看看UI是怎样弄出来的

主布局文件

主布局文件其实没什么好讲的,使用了相对布局,摆放好了三个控件的位置,EditText和Button使用线性布局,然后ListView在它们上面,标题栏是新建项目的时候默认的,没有更改,至于ListView为什么看起来不像平时使用的那么呆板,待会再说,先来看看主布局文件

从上面可以很清楚的看到,一个LinearLayout包裹着文本框和按钮,然后ListView在这个线性布局的上面,这里重点要提到ListView几个重要属性

去除ListView的分割线

android:divider="@null"

去除ListView点击时背景颜色发生变化

android:focusable="false"

android:focusableInTouchMode="false"

android:listSelector="#00000000"

android:cacheColorHint="#00000000"

当ListView添加新的项的时候,自动滚到新的项那里

android:transcriptMode="alwaysScroll"

从上面的图中可以看出来,EditText和Button都不是默认的样式,这是因为我设置他们的background属性,使用的是shape.xml,下面只列出EditText的shape.xml

聊天界面的布局ListView

ListView并没有使用特殊的设置,而是在使用的适配器上面做的文章,这里使用的是自定义适配器,关于自定义适配器的用法请参看自定义适配器,主要的是BaseAdapter的getView方法,通过判断消息是属于发出的还是接收的,来加载不同的布局文件

消息的封装,为了便于操作,我将消息简单的封装了,消息包括类型,消息内容,以及头像

然后我们再看看getView的实现,可以看到,我们根据消息的来源来加载不同的视图

看看”我“发出的消息对应的布局文件,很简单的一个ImageView,一个TextView,气泡的效果是给TextView设置了一个背景图片,背景图片的格式为*.9.png,关于这种格式的更多解析,请参看Android中的.9.png图片

到这里,我们的布局就说完了,主要是ListView是通过自定义适配器,根据消息的种类来加载不同的视图,源码等说完了聊天功能的实现一起提供下载链接好了,如果有不懂的地方,欢迎给我留言哈。

相关:聊天机器人(二)

 

 

评论

0条评论

发表评论

邮箱地址不会被公开。