今日科技快訊

昨日騰訊QQ宣稱，今年春節紅包將會從小年持續到除夕，并會推出“LBS+AR天降紅包”、“刷一刷紅包”和“面對面”紅包三大玩法。另外活動期間，會有多個當紅明星與知名品牌派發2.5億現金紅包和價值30億的卡券禮包。另一方面，微信已宣布：不會參加2017年春節紅包大戰。這意味著，今年紅包大戰QQ肩上的擔子更重了，將要獨自迎戰阿里的兩個參賽選手：一個是支付寶，還有一個是阿里持股的新浪微博。

作者簡介

今天是周五啦，提前祝大家周末愉快！本篇來自 偽文藝大叔 的投稿，自己動手實現豌豆莢應用詳情列表。我自己對比了下原版，幾乎是高度還原。感興趣的朋友趕快看看吧！

偽文藝大叔 的博客地址：

http://www.jianshu.com/u/030d732a71d2

前言

前兩天買了個Android手機（ps：之前一直使用IPhone手機）打算給手機下載個應用市場，自己挺喜歡豌豆莢的，就下了個豌豆莢，在豌豆莢里下載App的時候發現它的列表進入詳情效果挺好玩的，就想試試自己模仿一下。效果如下：

思路

當初看到這個效果的時候就在想列表界面和詳情界面是一個 Activity + dialog 還是兩個Activity，后來想了想詳情界面數據挺多的應該不大可能是一個Activity，應該是一個列表Activity，一個詳情Activity，那么針對這個設計就會有很多問題需要解決：

• 跳轉的時候如何無縫實現點擊的 Item View 顯示在詳情Activity里是同一個位置呢？

• 跳轉成功以后如何還可以看到前面 Activit y的內容呢？

• 如何讓被點擊的 Item View 慢慢的變化成詳情頁呢？

• 詳情 View 下拉出屏幕的時候如何退出詳情 Activity？

• 下拉的時候如何動態的改變背景色透明度呢？

帶著這些問題我們來一個一個分析解決。

實現

• 跳轉的時候如何無縫實現點擊的 Item View 顯示在詳情Activity里是同一個位置呢？

我們知道 View 在布局完成以后會有一個距離 父類View 頂部的屬性 top，那么在兩個 Activity 中把 View 距離頂部的高度 top 設成一致就可以了，然后在跳轉的時候去掉跳轉動畫就可以實現視覺上的無縫連接，下面我們來看看具體代碼：

view 就是當前被點擊的 Item View，view.getTop() 就是 Item View 距離 RecyclerView 頂部的高度，getResources().getDimensionPixelOffset(R.dimen.bar_view_height) 是 RecyclerView 上面 Title View 的高度，因為我是隱藏了狀態欄，所有 viewMarginTop 就是當前被點擊的 Item View 距離狀態欄頂部的高度；overridePendingTransition(0, 0) 就是去掉跳轉動畫實現視覺無縫隙, 詳情 Activity 如何顯示會在下面分析。

• 跳轉成功以后如何還可以看到前面Activity的內容呢？

其實就是把 詳情Activity 背景設置成透明，并且把 詳情View 的 父類View 背景都設置成透明就可以了，下面請看代碼實現就是給 Activity 設置了一個透明的 Theme

• 如何讓被點擊的 Item View 慢慢的變化成詳情頁呢？

跳轉到詳情頁以后要顯示列表頁被點擊的 Item View，設置它距離頂部的高度

mViewMarginTop 就是從列表界面傳遞過來的參數，mSVRootLl 就是 ScrollView 下面的 根LinearLayout，因為詳情頁面是可以滾動的，所以需要 ScrollView，設置好高度以后，調用 requestLayout 方法發起布局，在 onLayout 方法設置布局高度即可。

mContentMarginTop 就是剛才設置的高度，mTouchMoveOffset 默認是 0， ?mIsAnimation 默認是 false，mIsLayoutImageView 默認是 false，這些參數的意義后面會分析到，這樣 View 的高度就和列表界面被點擊的 Item View 高度一樣了，接下來分析被點擊的 Item View 如何變化成詳情頁。

被點擊的 Item View 到 詳情Activity 以后就變成了一個 LinearLayout 布局，這個布局分為三部分： title布局，中間布局，bottom布局，默認title和bottom是隱藏的，所以默認情況下的效果就是列表界面被點擊 Item View 的效果，這個 View 顯示出來以后馬上通過一個動畫變成詳情界面，就是上面動畫完成以后的效果，下面我們來看看動畫的邏輯代碼:

可以看到在 onAnimationUpdate 這個方法中根據 ratio 計算4個偏移量，這4個偏移量有啥用呢？從動畫中可以看到被點擊的 Item View 通過動畫變成了一個 詳情View，這個變化的過程包括4部分：

1：Item View 的上邊距離頂部越來越近

2：Item View 下邊距離底部越來越近

3：Item View 中的圖片會慢慢居中

4：Item View 中的圖片會慢慢向下靠近（如果不向下靠近，動畫結束以后顯示title布局，圖片會有向下閃躍的問題）

那么這4部分移動的總距離乘以 ratio 就是動畫執行過程中每次的偏移量，然后不斷設置偏移量調用 requestLayout 方法發起布局來使 View 達到動畫的效果；

上面說到的 mIsAnimation 這個字段這個時候就是 true 了， mIsLayoutImageView 也就是 true 了，只有執行動畫的時候才會重新布局圖片控件，動畫結束以后會顯示 title布局 和 bottom布局.

• 詳情View下拉出屏幕的時候如何退出詳情Activity？

從效果中可以看到下拉的高度超過一半就勻速向下滑動，滑出屏幕關閉 Activity，小于一半就回彈到原來狀態，這個功能需要用到事件分發原理。

當 ScrollView Y軸 滾動為0并且是向下拉的時候就會觸發View滑動這個事件，通過 ACTION_DOWN 記錄初始點，ACTION_MOVE 得到當前點，當前點減初始點得到滑動的距離（就是上面的 mTouchMoveOffset 變量），然后請求 requestLayout 方法發起布局調用 onLayout 方法刷新界面，手指松開的時候，判斷滑動的距離是否超過一半，根據不同的狀態通過動畫改變 mTouchMoveOffset 的數值來刷新界面，下面來看看手勢滑動和松開以后動畫執行的代碼：

動畫執行完后調用回調方法關閉詳情Activity：

• 下拉的時候如何動態的改變背景色透明度呢？

通過代碼可以看到在手勢滑動的時候和動畫的時候都調用了 updateBgColor 方法：

這個方法里的 mOnUpdateBgColorListener 是 詳情Activity 設置的，通過調用 onUpdate 方法來改變背景的顏色透明度：

結束語

到此為止，項目里的邏輯和代碼都分析完了，通過文章我們可以得出在開發一個功能的時候，首先要有大致的思路，想如何去實現這個功能，然后把思路中的問題一一破解，最后串聯起來就可以了，謝謝大家的閱讀，有想看源碼的可以移步 github 地址：

https://github.com/chenpengfei88/WdjAppDetail

更多

每天學習累了，看些搞笑的段子放松一下吧。關注最具娛樂精神的公眾號，每天都有好心情。

如果你有好的技術文章想和大家分享，歡迎向我的公眾號投稿，投稿具體細節請在公眾號主頁點擊“投稿”菜單查看。

歡迎長按下圖?->?識別圖中二維碼或者掃一掃關注我的公眾號：

覺得不錯可以贊賞作者鼓勵一下

贊賞

人贊賞

總結

以上是生活随笔為你收集整理的仿豌豆荚应用列表进入详情效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。