美文网首页
【实战】实现一个类似QQ的社交聊天工具

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

作者: passiontim | 来源:发表于2017-09-23 13:40 被阅读278次

本篇来自 fitzeng 的投稿,分享了他开发一个聊天工具的历程,希望大家喜欢!

fitzeng 的博客地址:

http://fitzeng.org

Part One

  • 效果图

*由于大小限制,这里的图片我做了压缩,大图可点击最后 阅读原文 查看

  • 原因

由于在间间断断的学Android,所以学的知识比较杂,想做个小项目来复习复习。所以之前在课后十天左右的时间完成了一个刚刚具备聊天功能的App,由于这几天拼命的搜寻资料,发现网上并没有一个完整的开发过程的文章。平时也就是看看大牛们的博客学习,现在觉得也要多和大家分享自己学到的知识,共同进步。可能你在这学不到技术深度的东西,但是说不定可以扩展你的技术广度。

  • 目标人群

推荐给正处于Android进阶的人群,想写一个App却不知道如何开始。希望我的这些文字对你能有帮助。最少基本过了一遍《第一行代码》,读过《Android群英传》就更好了。由于我是以一个遇到问题解决问题的视角来写的,所以基本会让你的开发过程思路清晰,知道这么做的目的和好处。同时这也是一个开始完全不知道怎么写到实现基本功能的心路历程描述。所以应该会有点价值吧。当然涉及的东西确实有点多,所以不可能一一叙述,欢迎大家留言讨论。

  • 知识

数据库相关知识(基本的增删改查)

Java(Java可视化界面编程,Socket网络通信)

Android

  • 软件

Android: Android Studio

本地服务器搭建: XAMPP(Apache + MySQL)

服务器界面:Eclipse JavaEE

  • 实现思路

在电脑上利用 Apache + MySQL 搭建一个供服务端访问的数据库,有了数据库,就要写一个服务端在电脑上运行,读写数据库数据。开启一个线程一直检测是否有客户发送连接请求,有的话 accept,并且给这个连接的用户开一个单独线程供客户端进行通讯。而客户端发送请求给服务器,所以客户端要有一个 Action 来激活发送请求,也就是我们的点击滑动等事件。但是同时又要接受来自服务端的数据,所以我们要使客户端的 Action 操作和与服务端通讯分别用两个不同的线程管理。不知道我讲没讲请,下面用图来描述一下。

Part Two

实现目标

按照最先开始的计划,我们只实现一个静态的 ZZChat 界面,考验的就是 Android 控件的基本知识。如果碰到没见到过的控件可以去 Google 看开发文档。

实现过程

在看到实现的设计下,我们最先想到的是有四的Activity(欢迎界面,引导页,登录注册,主界面),同时对应四个布局

  • 修改MANIFEST

欢迎界面

引导界面只在首次开启时显示

引导页

引导页我们使用一个ViewPager实现,如果之前不熟悉的可以看我的另一个

利用ViewPager做的轮播图

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

  • 布局

相信看了前面动图的效果对布局实现应该是有底了

  • 适配布局

到这了,如何实现 ViewPager 加载布局就是我们现在应该想的事了。

目前可以最先想到和做到的是实现三个加载的布局,为了方便我们只使用一个 ImageView来实现,同理其他三个页面也是类似,第三个多加一个 Enter 入口进入主页。

  • 适配器

现在的情况是有了布局和资源页面,怎么把资源页面加载进布局,这时就要用到 Adapter 了,也就是适配器。新建一个 adapter 资源包,新建一个 AdapterGuideViewPager类 继承 PagerAdapter

一定要注意 getCount() 和 isViewFromObject() 函数的实现。

有了适配器,只要给 adapter 添加之前的 guide 视图作为资源,再给 viewPager 设置资源适配器。基本效果就实现了。

  • 指示器实现

当前页面是第几页,要给用户一个比较明显的提示,可以利用两个不同颜色的小圆点。但是要想知道移动的改变就要实现监听事件。实现 onPageSelected() 方法就可以了。

登陆注册

  • 界面

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

  • 跳转

目前还没进行数据处理,所以我们直接跳转进入界面

  • 添加依赖库

如果你遇到上面的bug,说明到现在我们的TabHost是无法工作的,因为缺少一个依赖库。

compile ‘com.android.support:design:2x.x.x’

添加方式是在File->Project Structure 在弹出的窗口中选择app,之后操作看图:

此时需要重新 Gradle, 这时可能一个错误在 build.gradle。按 Alt + Enter, 选择忽略就好。

主界面

之前的页面基本实现,那么主界面如何实现,参考QQ,为了避免控件上的使用难度,我们直接用google提供的 DrawerLayout

写代码之前先理清思路,这个主界面明显是包含三个页面加一个侧换页面,也就是四个。
新建一个view资源文件,创建四个视图类。接着新建四个布局供类加载

  • 布局

这个布局有要主页的地方。侧滑视图要设置android:layout_gravity=”start” 属性。DrawerLayout 最好为根容器,推荐如下布局:

最外层就是 DrawerLayout,中间只有一个主内容和一个侧滑布局。你要添加的内容全部在主内容中实现。

这里采用 ViewPager + TabLayout 来实现,不熟悉的看这里:

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

  • 加载页面

以 Chats 为例:

十分简单,看代码就能懂

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

到这里基本的效果实现了,不清楚了可以参考阶段性源码。

最后

由于篇幅限制,这里只发布了前两部分(之后还有重要的网络部分),完整的项目笔记,大家可以点击最后 阅读原文 或者 访问作者的博客地址查看。

github地址:

https://github.com/mk43/ZZChat 

相关文章

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

    本篇来自fitzeng 的投稿,分享了他开发一个聊天工具的历程,希望大家喜欢! fitzeng 的博客地址: ht...

  • HiChat-仿QQ,微信的社交应用

    HiChat是一款移动社交应用,它实现了聊天(类似QQ,微信)以及段子(类似皮皮虾)功能。之所以会开发它,是刚毕业...

  • 左侧类似qq的菜单实现

    用RESideMenu第三方来实现链接:https://github.com/romaonthego/RESide...

  • 类似qq好友列表的实现

    今天在工作的过程中,有一个页面的实现类似于qq好友列表。经过上网查资料,自己进行了简单的实现。 通过代码,将上面的...

  • 私信对话框总结

    题记 私信对话框,类似于QQ,微信等等这些社交软件很常见的东西,但是实现起来却有它自己的难度。页面的实现还可以,关...

  • 你会偷偷翻看对方的手机吗

    手机已经成为人们生活中必不可缺的一个工具,人们已经习惯使用手机来与人社交,电话、微信、QQ等等很多的聊天工具,可以...

  • iOS 类似QQ分组菜单的实现

    序言 最近项目中遇到一个类似QQ分组菜单的需求,效果图如下: 分析 “问题”可以作为组头,答案作为row, 合着的...

  • 总有一天,我会卸载一切社交工具

    我有一个愿望,就是有一天,可以卸载我所有的聊天工具。我有的社交工具不多,QQ、微信和豆瓣。之前还有微博,前一任手机...

  • web即时通讯

    php实现即时聊天(基于融云通讯),目前只是简单的事例。今天看到了一个挺有意思的项目,即时聊天工具。虽然有QQ这样...

  • 类似QQ侧边栏效果实现

    最近项目中需要实现侧边菜单栏效果,跟QQ基本相似。在这里记录下实现过程。 主要思路:将主vc(tabBar/nav...

网友评论

      本文标题:【实战】实现一个类似QQ的社交聊天工具

      本文链接:https://www.haomeiwen.com/subject/arjcextx.html