圖片瀏覽功能的實現(xiàn)

本 文實現(xiàn)的是類似于相冊瀏覽的功能,在這里我準備了六張圖片,僅供參考。

具體來說,就是首頁有六張小圖片(用九宮格做法實現(xiàn),這里不做詳解),點擊對應的圖片去瀏覽對應的大圖,在大圖頁面顯示當前是第幾張圖片?;镜倪壿嬀褪?,當我點擊對應的小圖的時候,我把對應的下標傳到大圖界面,并在大圖顯示。同時,當我滑動大圖界面的時候我先獲取到當前的圖片的位置和偏移量,然后顯示對應的圖片和圖上的當前頁數(shù)。

是的,基本的邏輯就是這么簡單,我相信只要去寫就能寫出來。但是為了保證不讓控制器的代碼顯得冗余并讓每個模塊的功能獨立出來,我在這里把代碼進行了抽離,每個view每一個功能,這樣降低了耦合性并能讓控制的代碼減少很多。

具體的代碼如下:


圖片發(fā)自簡書App

這個是我的demo的層級結構圖。


圖片發(fā)自簡書App

這是根視圖控制器里面的代碼。


圖片發(fā)自簡書App

這是PhotoImageVIew的類方法。


圖片發(fā)自簡書App

對應的類方法的實現(xiàn)。


圖片發(fā)自簡書App


圖片發(fā)自簡書App


圖片發(fā)自簡書App

這對應的是PhotoVIew的代碼。

下面是滾動視圖內(nèi)的代碼:

圖片發(fā)自簡書App
圖片發(fā)自簡書App


圖片發(fā)自簡書App
圖片發(fā)自簡書App
圖片發(fā)自簡書App


為了抽取功能,我建了分類

圖片發(fā)自簡書App


圖片發(fā)自簡書App
圖片發(fā)自簡書App
圖片發(fā)自簡書App
圖片發(fā)自簡書App
圖片發(fā)自簡書App

在這里面我聲明了一個代理,是為了在我滑動的時候把對應的圖片的當前的頁數(shù)傳到控制器里面去。

圖片發(fā)自簡書App

這是滾動視圖控制器的的內(nèi)容。


圖片發(fā)自簡書App


圖片發(fā)自簡書App

為了實現(xiàn)對圖片的縮放功能,我又單獨建了一個繼承自scrollVIew的類,目的是為了實現(xiàn)對大圖的縮放功能,實現(xiàn)雙擊對圖片進行縮放,單機圖片回到九宮格小圖界面。同時,這里實現(xiàn)了另一個效果,就是當我對某一個圖片進行縮放以后,然后滑動到其他圖片,再從其他圖片界面回到被進行過縮放的圖片界面的時候,被縮放的圖片恢復到原狀。為了實現(xiàn)這樣的功能,我得創(chuàng)建一個imageView,目的是記錄我縮放過的圖片,在圖片縮放的時候把它保存起來,然后當我從被縮放的界面劃走的時候我再調(diào)用方法,讓被縮放的圖片回到原狀。同時我這里對大圖和小圖做了處理。

我一直覺得,一篇技術文章沒有demo,那就是在耍流氓。在這附上demo地址:

https://github.com/15221532825/picture-browser

以上僅供參考,謝謝。有不足之處歡迎指正,謝謝!親,記得修改里面pch文件路徑哦!

一個喜歡編碼,追求編碼完美的人,努力保持內(nèi)心的善良與純凈。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,338評論 4 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,048評論 25 709
  • 愛上一個不該愛的人,假裝不愛去掩蓋自己是悲傷的事,我后悔的是這一生遇到你,幸運的是這輪回還能見到你。說好要永遠埋藏...
    敬楠閱讀 726評論 0 4
  • 兒子有個壞習慣,讓我意識到是個問題了。他晚上睡覺總要用腿勾著大人,在家時跟爸爸睡,我也不怎么在意,這半月他和我睡,...
    心如美玉閱讀 264評論 0 0
  • 做一個溫柔有智慧的媽媽#不做咆哮體媽媽#郭染汐~3歲小班學齡/踐行打卡25/30 目標:1.養(yǎng)成良好習慣:養(yǎng)成9...
    郭染汐閱讀 218評論 0 0

友情鏈接更多精彩內(nèi)容