實現一個類似QQ的社交聊天工具
日前，中國智慧手機品牌vivo宣佈，與國際足球聯合會（FIFA）達成為期6年的FIFA世界盃全球贊助合作，貫穿兩屆比賽。這意味著vivo將連續成為2018年及2022年兩屆世界盃全球官方贊助商。屆時，vivo標誌將出現在FIFA世界盃比賽的場邊廣告牌、門票、新聞釋出會背景板以及其他相關重要場合。vivo期望藉助FIFA世界盃在全球的影響力，將品牌帶到一個全新的高度。
作者簡介這周才上了三天班，突然發現明天就是週末啦，好開心有木有，提前祝大家週末愉快！
本篇來自 fitzeng 的投稿，分享了他開發一個聊天工具的歷程，希望大家喜歡！
fitzeng
Part Onehttp://fitzeng.org
效果圖
*由於大小限制，這裡的圖片我做了壓縮，大圖可點選最後 閱讀原文 檢視
原因
由於在間間斷斷的學Android，所以學的知識比較雜，想做個小專案來複習複習。所以之前在課後十天左右的時間完成了一個剛剛具備聊天功能的App，由於這幾天拼命的搜尋資料，發現網上並沒有一個完整的開發過程的文章。平時也就是看看大牛們的部落格學習，現在覺得也要多和大家分享自己學到的知識，共同進步。可能你在這學不到技術深度的東西，但是說不定可以擴充套件你的技術廣度。
目標人群
推薦給正處於Android進階的人群，想寫一個App卻不知道如何開始。希望我的這些文字對你能有幫助。最少基本過了一遍《第一行程式碼》，讀過《Android群英傳》就更好了。由於我是以一個遇到問題解決問題的視角來寫的，所以基本會讓你的開發過程思路清晰，知道這麼做的目的和好處。同時這也是一個開始完全不知道怎麼寫到實現基本功能的心路歷程描述。所以應該會有點價值吧。當然涉及的東西確實有點多，所以不可能一一敘述，歡迎大家留言討論。
知識
資料庫相關知識（基本的增刪改查）
Java（Java視覺化介面程式設計，Socket網路通訊）
Android
軟體
Android: Android Studio
本地伺服器搭建： XAMPP（Apache + MySQL）
伺服器介面：Eclipse JavaEE
實現思路
在電腦上利用 Apache + MySQL 搭建一個供服務端訪問的資料庫，有了資料庫，就要寫一個服務端在電腦上執行，讀寫資料庫資料。開啟一個執行緒一直檢測是否有客戶傳送連線請求，有的話 accept，並且給這個連線的使用者開一個單獨執行緒供客戶端進行通訊。而客戶端傳送請求給伺服器，所以客戶端要有一個 Action 來啟用傳送請求，也就是我們的點選滑動等事件。但是同時又要接受來自服務端的資料，所以我們要使客戶端的 Action 操作和與服務端通訊分別用兩個不同的執行緒管理。不知道我講沒講請，下面用圖來描述一下。
實現目標
按照最先開始的計劃，我們只實現一個靜態的 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
每天學習累了，看些搞笑的段子放鬆一下吧。關注最具娛樂精神的公眾號，每天都有好心情。
如果你有好的技術文章想和大家分享，歡迎向我的公眾號投稿，投稿具體細節請在公眾號主頁點選“投稿”選單檢視。
歡迎長按下圖 -> 識別圖中二維碼或者掃一掃關注我的公眾號：