媲美掘金App大圖瀏覽效果，你肯定不看一下？

前言

大圖瀏覽幾乎是App必備功能，由於通常列表展現的圖片，考慮到性能，速度以及服務器帶寬的問題，都是壓縮過的縮略圖。若是用戶想看詳細的大圖，則須要點擊圖片進入大圖瀏覽界面。

大圖瀏覽界面怎麼作？

粗略的咱們能夠用一個對話框，裏面放ViewPager，而後縮放用PhotoView。之前我也是這麼幹的。但這麼作是不符合Material Design設計的，由於界面之間的切換太突兀，沒有如絲般順滑的過渡效果。

無圖言Diao

來看下我實現的效果：

以前在Android端目前我以爲大圖瀏覽體驗最好的就是掘金App的效果，我這個應該能夠媲美掘金的效果了。真實體驗你會發現，可能比掘金的更流暢，更絲滑。

原理分析

原理上有幾個點：

• 圖片之間的過渡

圖片之間的過渡是指小圖到大圖的過渡，中間沒有任何的跳躍變化，須要是絲滑而天然的過渡。這個要考慮的使用者的ImageView有多是各類的ScaleType。對於任意的ScaleType如何實現完美的過渡呢？

答案只有一個，就是： Martirx。

由於不管ImageView的ScaleType是什麼，最終都會計算出一個DrawMartix，它表示圖片的像素矩陣。因此對Martix進行過渡纔是正確的，這過程當中我探索了不少方案，好比寬高，手動計算Martix。

至於具體怎麼對Martix進行過渡，咱們能夠很容易寫出一個ValueAnimator，也能夠用系統的ChangeImageTransform來作。我選擇的是後者。具體看源碼吧。

• 界面之間的過渡

界面之間的過渡，指的是從調用者的界面過渡到大圖界面。這實際上是一個彈窗效果，它主要伴隨着背景明暗的漸變，這個很容易實現。你能夠用PopupWindow，Dialog，或者whatever。我是直接依靠XPopup(個人一個彈窗庫)提供的彈窗實現。

• 可拖拽的容器

從動圖中能夠看到，大圖瀏覽能夠經過點擊關閉，也能夠經過手勢上下滑動關閉。可拖拽的容器實現起來並不難，能夠本身操做TouchEvent，也能夠用ViewDragHelper。我比較喜歡後者。核心的拖拽代碼其實不超過50行。

單單拖拽很好作，可是涉及到ViewPager和裏面的PhotoView就有點麻煩了。須要處理好跟ViewPager的滑動優先選擇，還要PhotoView是否能夠容許外界拖拽。更細節的東西能夠看代碼。

如何使用

上面的效果，我直接內置在XPopup中，提供一個封裝。使用起來也就是這樣：

XPopup.get(getContext()).asImageViewer(imageView, position, list, new OnSrcViewUpdateListener() {
        @Override
        public void onSrcViewUpdate(ImageViewerPopupView popupView, int position) {
            // 做用是當Pager切換了圖片，須要更新源View
            popupView.updateSrcView((ImageView) recyclerView.getChildAt(position));
        }
    }).show();
複製代碼

具體使用請查看：github.com/li-xiaojun/…

最後：曾經的Android開發很難，爲簡化Android開發貢獻一份小小的力量。