在實際的開發中,我們市場會遇到這樣的情況:點選某圖檔,浏覽某清單(某清單詳情)中的所有圖檔資料,當然,這些圖檔是可以放大和縮小的,比如我們看下百度貼吧的浏覽大圖的效果:
連結
這種功能,在一些app中是必不可少的!那如何實作呢?接下來,我将介紹通過ViewPager結合PhotoView開源元件,實作這麼樣的經典效果!
關于ViewPager如何使用,此文不多介紹,網絡上太多相關的知識了;而PhotoView,因為它是一個開源的元件,是以如果你不深入研究它的話,隻需要掌握它基本的用法即可!
何為PhotoView?
PhotoView特性:
支援單點/多點觸摸,即時縮放圖檔;
支援平滑滾動;
在滑動父控件下能夠運作良好;(例如:ViewPager)
當使用者的觸點改變時可以觸發通知。
當你了解了基本的知識後,下面直接帶你進入執行個體:
1. 先定義網絡請求,實作圖檔清單:
1.1 清單樣式
1.2 擴充卡
注; Adapter中主要添加了一個回調接口,當你單機圖檔的時候,進入下一級圖檔浏覽頁面!
2. 清單邏輯實作,及點選某一個圖檔,進入下一級頁面,該頁面即為圖檔浏覽頁面:
3. 圖檔浏覽頁面,使用ViewPager實作突破浏覽:
3.1 ViewPager定義
注: ViewPager為圖檔滑動浏覽容器,ImageView為傳回按鈕(傳回到上一級頁面)
3.2 ViewPager邏輯實作:
注: 設定ViewPager基本資訊,并通過viewPager.setCurrentItem來定義目前顯示哪一個圖檔,(位置的資訊由上一級頁面傳遞過來);
3.3 在ViewPager擴充卡PagerAdapter中實作網絡圖檔的加載浏覽:
注: 此處重點是兩個方法,instantiateItem主要是加載View,在此處,通過ImageLoader加載網絡圖檔;destroyItem中需要移除該View,避免View重複加載。
基本上,通過以上方法,就可以實作網絡圖檔線上浏覽功能了,讓我們看下效果吧: