仿陌陌客戶端原始碼研究
阿新 • • 發佈：2019-02-09
最近看到一個很NB的仿陌陌的客戶端。不知道是哪個大神寫的，在此謝過。本帖記錄下學習的成果。。帖子最後給出這個demo，我肯定不收費，要是網站收費不要怪我。
1.WelcomeActivity有一個巢狀動畫，上升的同時逐漸變大。
2.RegisterActivity註冊過程有6步，填寫完成一步後點擊下一步進入另一個註冊步驟，這裡的實現方式是用ViewFlipper，包含6個ViewGroup，點選下一步直接執行mVfFlipper.showNext()，當然執行showNext之前要設定下過渡的動畫
mVfFlipper.setInAnimation(this, R.anim.push_left_in);
mVfFlipper.setOutAnimation(this, R.anim.push_left_out);
3.主頁面MainTabActivity是用TabActivity做的。有5個標籤。這裡只做了第一個標籤頁面。也就是附近的人和群組的列表頁面NearByActivity。NearByActivity主要是兩個Fragement，NearByPeopleFragment和NearByGroupFragment。也就是MainTabActivity主要框架是用TabActivity實現的，然後子Activity的頁面交替是用Fragement做的。
4.這個專案的listView全都是下拉重新整理ListView---MoMoRefreshListView。實現過程是這樣的：設定一個滾動監聽器setOnScrollListener。在onScroll方法中判斷是不是到頂了：判斷方法很簡單，onScroll回撥方法第二個引數firstVisibleItem就是判斷當前完整顯示的item的第一個item的index。所以只要firstVisibleItem為0，就說明已經到頂了。同理還能判斷是不是已經到底了。然後還監聽touch事件回撥onTouch方法，在move方法中如果到頂了，就把listView的header的padding重新設定一下，控制這個header露出來的高度。
其它的事就是header的各種動畫的繪製了，比如上箭頭在露出一定高度後變成下箭頭，鬆開手指後loding動畫開始播放，也是兩個動畫的重疊，效果是有一個勻速轉動的效果加一個加速轉動的效果。
5.點選某個使用者進入使用者詳情頁OtherProfileActivity，上面有一個2行4列的照片牆並能左右滾動。實現方式是自定義了一個LinearLayout的子類UserPhotosView，裡面包含了一個ViewPager，每一頁又包含了一個2行4列的佈局。
6.點選使用者動態進入使用者動態頁OtherFeedListActivity，點選其中一項又進入FeedProfileActivity，這兩個頁面都相對簡單，用的上面說的下拉重新整理ListView。
7.從個人詳情頁面點選對話進入ChatActivity，首先是一個類似微信的左右顯示的對話列表頁，這個列表頁的實現方式作者用了一個MessageItem進行封裝，ChatAdapter中返回這個物件包含的view。但是並沒有重用convertView，所以效能並不好。重點記錄一下ScrollLayout這個類。聊天頁面底下有一個類似PagerView的控制元件，實現了控制元件隨手指滑動而滑動，手指鬆開根據滑動的距離確定是往哪個頁面滾動，而且可以根據手指滑動的速度判斷往哪個頁面滾動。這個控制元件就是用ScrollLayout實現的。
8.ScrollLayout：
①首先講解VelocityTracker，這個類是一個測量速度的類，用起來比較簡單，只要在onTouchEvent中mVelocityTracker.addMovement(event)，就 可以在up的時候測量你手指的滑動速度了。
②然後是Scroller，這個類是用來進行緩慢移動的。注意這個類本身和view完全無關，它只是一個包裝類，包裝了一些引數用於記錄view滾動時候的各 種臨時資料（比如x座標，y座標，滾動了多長時間等），我們完全是用view去控制scroll而不是用scroll去控制view。這個類的主要方法有兩個：
startScroll(int startX, int startY, int dx, int dy, int duration)：開始一個動畫控制，由(startX , startY)在duration時間內前進(dx,dy)個單 位，到達座標為 (startX+dx , startY+dy)處。
computeScrollOffset：根據當前已經消逝的時間計算當前的座標點，儲存在mCurrX和mCurrY值中。如果動畫還沒結束，返回true。
這個類肯定是和view類的computeScroll方法一起使用的，這就是上面說的是用view去控制Scroller，控制方式就是在computeScroll中根據Scroller 記錄的當前的x，y座標，scrollTo到指定的位置。而這個computeScroll方法是在draw方法中呼叫的，所以上面的startScroll方法執行後，必須要呼叫 一遍invalidate方法，然後就會執行到computeScroll，就可以根據當前進度滾動view了。
這個類的其它一些就好理解了，move的時候根據move的距離滾動scroll一定的距離就實現了隨手指滑動view滾動。然後onInterceptTouchEvent方法要保證滾動的時候返回ture執行自己的onTouch方法，點選輸入等情況要返回false，讓子view執行onTouch方法。
9.ChatActivity裡有個表情輸入的解決方案很不錯，實現原理比較簡單，就是兩個GridView分別顯示兩個不同的表情包，然後點選了就將輸入框的內容變一下。輸入框顯示錶情的方式作者也有很好的實現。具體看EmoteInputView和EmoticonsEditText吧。
10.網路loading的彈出框效果不錯，就是一個陌陌的logo不斷的前後翻轉。現在看來這個實現比較簡單。主要類是FlippingLoadingDialog和FlippingImageView。FlippingLoadingDialog包含一個FlippingImageView，FlippingImageView裡包含了一個翻轉的動畫，啟動dialog時候，在onAttachedToWindow和onSizeChanged方法會播放動畫，在onDetachedFromWindow會停掉動畫。
11.其它可能還會有細節，最大的感覺就是各種動畫的運用，各種手勢演算法的配合，還有各種自定義元件的運用。總之UI不是好學的東西，通過這個專案確實獲益匪淺。稍微總結在這裡，希望大家都能回去好好看看這個demo，很不錯。
1.WelcomeActivity有一個巢狀動畫，上升的同時逐漸變大。
2.RegisterActivity註冊過程有6步，填寫完成一步後點擊下一步進入另一個註冊步驟，這裡的實現方式是用ViewFlipper，包含6個ViewGroup，點選下一步直接執行mVfFlipper.showNext()，當然執行showNext之前要設定下過渡的動畫
mVfFlipper.setInAnimation(this, R.anim.push_left_in);
mVfFlipper.setOutAnimation(this, R.anim.push_left_out);
3.主頁面MainTabActivity是用TabActivity做的。有5個標籤。這裡只做了第一個標籤頁面。也就是附近的人和群組的列表頁面NearByActivity。NearByActivity主要是兩個Fragement，NearByPeopleFragment和NearByGroupFragment。也就是MainTabActivity主要框架是用TabActivity實現的，然後子Activity的頁面交替是用Fragement做的。
4.這個專案的listView全都是下拉重新整理ListView---MoMoRefreshListView。實現過程是這樣的：設定一個滾動監聽器setOnScrollListener。在onScroll方法中判斷是不是到頂了：判斷方法很簡單，onScroll回撥方法第二個引數firstVisibleItem就是判斷當前完整顯示的item的第一個item的index。所以只要firstVisibleItem為0，就說明已經到頂了。同理還能判斷是不是已經到底了。然後還監聽touch事件回撥onTouch方法，在move方法中如果到頂了，就把listView的header的padding重新設定一下，控制這個header露出來的高度。
其它的事就是header的各種動畫的繪製了，比如上箭頭在露出一定高度後變成下箭頭，鬆開手指後loding動畫開始播放，也是兩個動畫的重疊，效果是有一個勻速轉動的效果加一個加速轉動的效果。
5.點選某個使用者進入使用者詳情頁OtherProfileActivity，上面有一個2行4列的照片牆並能左右滾動。實現方式是自定義了一個LinearLayout的子類UserPhotosView，裡面包含了一個ViewPager，每一頁又包含了一個2行4列的佈局。
6.點選使用者動態進入使用者動態頁OtherFeedListActivity，點選其中一項又進入FeedProfileActivity，這兩個頁面都相對簡單，用的上面說的下拉重新整理ListView。
7.從個人詳情頁面點選對話進入ChatActivity，首先是一個類似微信的左右顯示的對話列表頁，這個列表頁的實現方式作者用了一個MessageItem進行封裝，ChatAdapter中返回這個物件包含的view。但是並沒有重用convertView，所以效能並不好。重點記錄一下ScrollLayout這個類。聊天頁面底下有一個類似PagerView的控制元件，實現了控制元件隨手指滑動而滑動，手指鬆開根據滑動的距離確定是往哪個頁面滾動，而且可以根據手指滑動的速度判斷往哪個頁面滾動。這個控制元件就是用ScrollLayout實現的。
8.ScrollLayout：
①首先講解VelocityTracker，這個類是一個測量速度的類，用起來比較簡單，只要在onTouchEvent中mVelocityTracker.addMovement(event)，就 可以在up的時候測量你手指的滑動速度了。
②然後是Scroller，這個類是用來進行緩慢移動的。注意這個類本身和view完全無關，它只是一個包裝類，包裝了一些引數用於記錄view滾動時候的各 種臨時資料（比如x座標，y座標，滾動了多長時間等），我們完全是用view去控制scroll而不是用scroll去控制view。這個類的主要方法有兩個：
startScroll(int startX, int startY, int dx, int dy, int duration)：開始一個動畫控制，由(startX , startY)在duration時間內前進(dx,dy)個單 位，到達座標為 (startX+dx , startY+dy)處。
computeScrollOffset：根據當前已經消逝的時間計算當前的座標點，儲存在mCurrX和mCurrY值中。如果動畫還沒結束，返回true。
這個類肯定是和view類的computeScroll方法一起使用的，這就是上面說的是用view去控制Scroller，控制方式就是在computeScroll中根據Scroller 記錄的當前的x，y座標，scrollTo到指定的位置。而這個computeScroll方法是在draw方法中呼叫的，所以上面的startScroll方法執行後，必須要呼叫 一遍invalidate方法，然後就會執行到computeScroll，就可以根據當前進度滾動view了。
這個類的其它一些就好理解了，move的時候根據move的距離滾動scroll一定的距離就實現了隨手指滑動view滾動。然後onInterceptTouchEvent方法要保證滾動的時候返回ture執行自己的onTouch方法，點選輸入等情況要返回false，讓子view執行onTouch方法。
9.ChatActivity裡有個表情輸入的解決方案很不錯，實現原理比較簡單，就是兩個GridView分別顯示兩個不同的表情包，然後點選了就將輸入框的內容變一下。輸入框顯示錶情的方式作者也有很好的實現。具體看EmoteInputView和EmoticonsEditText吧。
10.網路loading的彈出框效果不錯，就是一個陌陌的logo不斷的前後翻轉。現在看來這個實現比較簡單。主要類是FlippingLoadingDialog和FlippingImageView。FlippingLoadingDialog包含一個FlippingImageView，FlippingImageView裡包含了一個翻轉的動畫，啟動dialog時候，在onAttachedToWindow和onSizeChanged方法會播放動畫，在onDetachedFromWindow會停掉動畫。
11.其它可能還會有細節，最大的感覺就是各種動畫的運用，各種手勢演算法的配合，還有各種自定義元件的運用。總之UI不是好學的東西，通過這個專案確實獲益匪淺。稍微總結在這裡，希望大家都能回去好好看看這個demo，很不錯。