今日科技快訊

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

作者簡介

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

偽文藝大叔 的博客地址：

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

前言

前兩天買了個(gè)Android手機(jī)（ps：之前一直使用IPhone手機(jī)）打算給手機(jī)下載個(gè)應(yīng)用市場，自己挺喜歡豌豆莢的，就下了個(gè)豌豆莢，在豌豆莢里下載App的時(shí)候發(fā)現(xiàn)它的列表進(jìn)入詳情效果挺好玩的，就想試試自己模仿一下。效果如下：

思路

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

• 跳轉(zhuǎn)的時(shí)候如何無縫實(shí)現(xiàn)點(diǎn)擊的 Item View 顯示在詳情Activity里是同一個(gè)位置呢？

• 跳轉(zhuǎn)成功以后如何還可以看到前面 Activit y的內(nèi)容呢？

• 如何讓被點(diǎn)擊的 Item View 慢慢的變化成詳情頁呢？

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

• 下拉的時(shí)候如何動態(tài)的改變背景色透明度呢？

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

實(shí)現(xiàn)

• 跳轉(zhuǎn)的時(shí)候如何無縫實(shí)現(xiàn)點(diǎn)擊的 Item View 顯示在詳情Activity里是同一個(gè)位置呢？

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

view 就是當(dāng)前被點(diǎn)擊的 Item View，view.getTop() 就是 Item View 距離 RecyclerView 頂部的高度，getResources().getDimensionPixelOffset(R.dimen.bar_view_height) 是 RecyclerView 上面 Title View 的高度，因?yàn)槲沂请[藏了狀態(tài)欄，所有 viewMarginTop 就是當(dāng)前被點(diǎn)擊的 Item View 距離狀態(tài)欄頂部的高度；overridePendingTransition(0, 0) 就是去掉跳轉(zhuǎn)動畫實(shí)現(xiàn)視覺無縫隙, 詳情 Activity 如何顯示會在下面分析。

• 跳轉(zhuǎn)成功以后如何還可以看到前面Activity的內(nèi)容呢？

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

• 如何讓被點(diǎn)擊的 Item View 慢慢的變化成詳情頁呢？

跳轉(zhuǎn)到詳情頁以后要顯示列表頁被點(diǎn)擊的 Item View，設(shè)置它距離頂部的高度

mViewMarginTop 就是從列表界面?zhèn)鬟f過來的參數(shù)，mSVRootLl 就是 ScrollView 下面的 根LinearLayout，因?yàn)樵斍轫撁媸强梢詽L動的，所以需要 ScrollView，設(shè)置好高度以后，調(diào)用 requestLayout 方法發(fā)起布局，在 onLayout 方法設(shè)置布局高度即可。

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

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

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

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

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

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

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

那么這4部分移動的總距離乘以 ratio 就是動畫執(zhí)行過程中每次的偏移量，然后不斷設(shè)置偏移量調(diào)用 requestLayout 方法發(fā)起布局來使 View 達(dá)到動畫的效果；

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

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

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

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

動畫執(zhí)行完后調(diào)用回調(diào)方法關(guān)閉詳情Activity：

• 下拉的時(shí)候如何動態(tài)的改變背景色透明度呢？

通過代碼可以看到在手勢滑動的時(shí)候和動畫的時(shí)候都調(diào)用了 updateBgColor 方法：

這個(gè)方法里的 mOnUpdateBgColorListener 是 詳情Activity 設(shè)置的，通過調(diào)用 onUpdate 方法來改變背景的顏色透明度：

結(jié)束語

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

https://github.com/chenpengfei88/WdjAppDetail

更多

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

如果你有好的技術(shù)文章想和大家分享，歡迎向我的公眾號投稿，投稿具體細(xì)節(jié)請?jiān)诠娞栔黜擖c(diǎn)擊“投稿”菜單查看。

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

覺得不錯(cuò)可以贊賞作者鼓勵一下

贊賞

人贊賞

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。