类似qq的聊天软件 【实战】实现一个类似QQ的社交聊天工具

这个来自fitzeng的贡献分享了他开发聊天工具的历史，希望大家喜欢！

菲次的博客地址:

http://fitzeng.org

第一部分

效果图

*由于尺寸限制，我在这里压缩了图片，点击最后一个阅读原文就可以看到大图

理由

因为断断续续学安卓，学到了很多知识，所以想做个小项目复习。所以我大概在下课十天左右完成了一个带聊天功能的App，发现由于这几天拼命的搜索信息，网上没有完整的文章在开发过程中。平时只是看看大牛的博客。现在觉得要和大家分享自己的知识，一起进步。也许你在这里学不到什么技术深度的东西，但也许你可以拓展你的技术广度。

人口指标

推荐给高级安卓的人，想写一个App但是不知道怎么下手。希望我的话能帮到你。第一行代码我至少看过一遍，看了安卓群英传更好。因为我在遇到问题的时候是站在解决问题的角度来写的，基本上会让你的开发过程清晰，知道这样做的目的和好处。同时也是一开始不知道怎么写才能实现基本功能的心路历程描述。所以应该有点价值。当然涉及的东西很多，不可能一一描述。请留言讨论。

知识

数据库相关知识

Java

机器人

软件

安卓:安卓工作室

设置本地服务器:XAMPP

服务器界面:Eclipse JavaEE

实现理念

使用Apache+MySQL构建一个数据库，供服务器在计算机上访问。有了数据库，就需要写一个服务器在计算机上运行，读写数据库数据。打开一个线程来检查客户端是否发送了连接请求，如果是，则接受它，并为连接的用户打开一个单独的线程来与客户端通信。并且客户端将请求发送到服务器，所以客户端应该有一个Action来激活发送请求，也就是我们的click slip和其他事件。但与此同时，我们必须接受来自服务器的数据，所以我们需要用两个不同的线程来管理客户端的Action操作和与服务器的通信。我不知道我有没有告诉你，但我会用下面的图片来描述。

第二部分

达成目标

按照最初的计划，我们只实现了一个静态的ZZChat界面，测试了Android控件的基础知识。如果遇到从未见过的控件，可以去Google阅读开发文档。

实施程序

当我们看到实现的设计时，首先想到的是有四个Activity，同时对应四个布局

修改MANIFEST

欢迎界面

启动界面仅在首次打开时显示

指南页面

我们使用可视寻呼机来实现引导页面。如果你以前不熟悉，你可以看看我的另一个

由可视寻呼机制作的旋转图片

http://fitzeng.org/2017/04/07/SlideShow

布局

相信看完前面动画的效果，布局实现应该有个底

调整布局

至此，如何实现ViewPager的加载布局是我们现在应该思考的问题。

目前我们能想到做的第一件事就是实现三载布局。为了方便，我们只用一个ImageView来实现。同样的，其他三个页面也差不多，第三个添加了一个Enter入口进入首页。

适配器

现在，有了布局和资源页，如何将资源页加载到布局中需要一个适配器，即适配器。创建一个新的适配器资源包，并创建一个新的AdapterGuideViewPager类来继承PagerAdapter

注意getCount和isViewFromObject函数的实现。

有了适配器，只需将前面的指南视图作为资源添加到适配器中，然后为viewPager设置一个资源适配器。基本效果实现。

指标实施

当前页面是哪一页？为了给用户一个明显的提示，可以用两个不同颜色的小点。但要想知道运动的变化，就需要监控事件。实现onPageSelected方法。

登录注册

连接

我可以自己在这里设计。我用TabHost来实现，学习使用不同的控件。但是，值得首页布局的是ID的设置。我可以试试不这样会出现什么效果。

跳跃

还没有数据处理，所以我们直接跳到界面

添加依赖库

如果你遇到了上面的bug，说明我们的TabHost到现在还不能工作，因为缺少一个依赖库。

compile ' com . Android . support:design:2x . x . x '

添加方式在文件->项目结构在弹出窗口选择app，然后操作图片:

此时，Gradle需要重新评分，然后build.gradle中可能会出现错误..按下Alt+回车，并选择忽略。

主接口

上一页基本实现了，那么主界面怎么实现呢，参考QQ，为了避免使用控件的难度，我们直接使用google提供的DrawerLayout

写代码前先理清思路。这个主界面明显包含三页加一页边，也就是四页。

创建一个新的视图资源文件，并创建四个视图类。然后为类加载创建四个新布局

布局

这个布局有一个主页。Android:侧滑视图要设置layout _ gravity = "start "属性。DrawerLayout是最好的根容器，建议使用以下布局:

最外层是DrawerLayout，中间只有一个主要内容和一个侧滑布局。您想要添加的所有内容都在主要内容中实现。

这里用viewprager+TabLayout实现。如果你不熟悉，看这里:

http://fitzeng.org/2017/04/07/TabLayout

加载页面

以聊天为例:

很简单，看代码就明白了

之前用过侧滑视图，接下来的三个视图分别加载了三个类。如何将这些视图加载到主界面，我已经说了如何加载viewPager，这里也是如此。实现一个适配器。

这里，基本达到了效果。如果不知道，可以参考周期源代码。

最后的

由于篇幅限制，这里只发表前两部分和完整的项目笔记。你可以点击最后一个阅读原文或访问作者的博客地址。

Github地址:

https://github.com/mk43/ZZChat