仿照微信的效果,實現了一個支持多選、選原圖和視頻的圖片選擇器,適配了iOS6-10系統,3行代碼即可集成.


重要提示

1. 1.9.0版本已發布,移除了"prefs:root="的調用,這個API已經被列為私有API,請大家盡快升級。其它同樣使用了該API的庫大家可以檢查下,比如著名的SVProgressHUD

2. 如果你發現了Bug,請先嘗試更新到最新版,此前的版本可能存在一些bug。如果你已經是最新版了,請在github上提一個issue,我看到了會盡快處理哈~

 

關於升級iOS10和Xcdoe8的提示:

在Xcode8環境下將項目運行在iOS10的設備/模擬器中,訪問相冊和相機需要額外配置info.plist文件。分別是Privacy - Photo Library Usage Description和Privacy - Camera Usage Description字段,詳見Demo中info.plist中的設置。

 


 

 

前段時間空余時間比較多,打算嘗試做一個圖片選擇器出來,仔細對比了很多自定義了圖片選擇器的應用,感覺最喜歡微信的界面效果,當然微博的功能更強大,還支持了LivePhoto,所以打算模仿微信的界面效果,瞄着微博的功能去做一個圖片選擇器出來。

 

一.  TZImagePickerController簡介

 

這個圖片選擇器還沒達到我理想中的效果,但是最近工作開始忙起來了,所以有一些功能放在以后加入吧。目前這個圖片選擇器:

(1)支持圖片多選、選原圖和視頻;

(2)支持預覽圖片和視頻;

(3)適配了iOS6~10;

總體上跟微信的照片選擇器界面和功能都差不多一樣,當然我這個弱不少...效果圖如下:

1. TZPhotoPickerController,照片選擇控制器

 

2.TZPhotoPreviewController,照片預覽控制器

 

3.TZVideoPlayerController,視頻預覽控制器

對照片選擇器要求不是很高的應用來說,這個圖片選擇器還算是夠用了,這段時間考察了github上若干個支持多選的圖片選擇器,界面效果和功能都比這個差些,可能是有更好的我沒發現吧...

 

二.  如何集成

 

該圖片選擇器支持CocoaPods, 在你的Podfile文件中加入 pod 'TZImagePickerController'  即可集成。

如果你喜歡手動導入,到github下載代碼后,將TZImagePickerController文件夾拖入到你的項目中,再 #import "TZImagePickerController.h" 即可。

集成這個圖片選擇器,最少只需要三行代碼,用起來還是很方便,可以節省開發者的時間,把更多的時間和精力花在業務邏輯和自己想鑽研的技術點上去。

   TZImagePickerController *imagePickerVc = [[TZImagePickerController alloc] initWithMaxImagesCount:9 delegate:self];
    
    // You can get the photos by block, the same as by delegate.
    // 你可以通過block或者代理,來得到用戶選擇的照片.
    [imagePickerVc setDidFinishPickingPhotosHandle:^(NSArray<UIImage *> *photos, NSArray *assets) {
    
    }];
    [self presentViewController:imagePickerVc animated:YES completion:nil];

代碼截圖如下

 

三. 相關類的介紹

 

1. TZImageManager:唯一import了<AssetsLibrary/AssetsLibrary.h>和<Photos/Photos.h>的類,向外界提供有獲取相冊/照片/視頻資源的接口,在里面每個方法內部會判斷系統版本,從而選擇是從AssetsLibrary庫「iOS9以前可用」還是從Photos庫里獲取照片資源「iOS8以后可用」。

2. TZImagePickerController:導航欄控制器,通過改變該控制器的一些屬性來達到你想要的效果,比如設置maxImagesCount屬性來約束用戶最大可選圖片張數,默認為9張;設置allowPickingOriginalPhoto屬性為NO不允許用戶選擇視頻,默認是YES;設置allowPickingVideo屬性為NO不允許用戶選擇原圖,默認是YES。

3. TZPhotoPickerController:照片選擇控制器,一個collectionView每行4個cell展示圖片。

4. TZPhotoPreviewController:照片預覽控制器,用的是collectionView而不是scrollView,所以不用處理重用邏輯,然而圖片的間隙我還沒弄出來...以后再弄吧...(已出)

5. TZVideoPlayerController:視頻預覽控制器,簡單的播放/暫停/發送視頻功能,用的是AVPlayer來播放。進度條下次有空再加上吧...

6. TZAssetModel:裝有一個圖片/視頻/音頻資源的模型,對應一個圖片/視頻Cell「TZAssetCell」,資源屬性名為asset,可以從TZImageManager取出資源對象「圖片/視頻/音頻」。

7. TZAlbumModel:裝有一個相冊資源的模型,對應一個相冊Cell「TZAlbumCell」,資源屬性名為result,可以從TZImageManager取出所含有的圖片資源數組。

 

四. 微信圖片選擇器的一些技術點

 

優點實在太多了,說兩個我發現的小缺點吧。

小缺點1:在相冊列表頁,空的cell也會顯示,出現許多空的分割線。「也可能是微信的產品或iOS喜歡這個調調...」

我的解決方案:加上這一句_tableView.tableFooterView = [[UIView alloc] init]; 會不再顯示空的cell。當然也可以隱藏系統的分割線,自己加一個高0.5~1像素的View作為分割線。

小缺點2:在照片選擇器頁,微信的設計是不允許同時選擇視頻和照片的,但是在照片預覽頁面,用戶卻可以同時選中視頻和照片,此時微信會默認將視頻作為圖片發送,而沒有做一個提示。並且,如果用戶選擇了發送原圖,此時視頻雖然也被選中出來了,但是會一直發送失敗。
我的解決方案:在照片預覽頁面,如果用戶在選擇了圖片的情況下又選擇了視頻,提示用戶會默認將視頻做圖片發送。並且在圖片瀏覽器頁面,如果預覽到了一個視頻,則將原圖按鈕隱藏,在計算原圖大小的方法里也會過濾掉視頻資源。

 

當然微信的圖片選擇器是很優秀的,比如我今天在用iOS6系統的4s真機測試時,發現第一次彈出圖片選擇器時,如果相機膠卷相冊圖片數大於1000,我的這個會有比較明顯的卡頓,而微信的卻依然流暢...考慮到這個罕見的iOS6系統4s機子不是我的、工作要開始忙了、畢竟這只是4s等原因,這個優化就等下次有空再來研究吧...(1.4.2版本更新:這里已優化,是AssetsLibrary的一個坑...)

 

五. 更新記錄

1.4.5版本(2016.05.23)

在照片列表頁新增了拍照按鈕,可以全局記錄哪個相冊已選中了多少張圖片,預覽控制器可以在外界打開。同時Demo頁面也做了一些優化,可以直接刪除選中的照片、可以對照片進行長按排序等。當然期間也修復了許多小bug,表現更加好了。

最值得一提的是,1.4.5版本的性能大幅提升了,在我的iOS9.3.2系統6s設備上(870張照片),平均滑動幀數在58左右,滑動十分流暢,在iOS7.0.4的4s設備上(124張照片),平均滑動幀數在57左右,也十分流暢。經過對比,和QQ的圖片選擇器滑動幀數表現基本一致,都十分流暢,同時都強於微信的圖片選擇器。微信的圖片選擇器,在快速滑動的時候明顯感到有一絲卡頓,通過Core Animation查看發現,微信的圖片選擇器在我的6s設備下幀數平均約52左右,好幾次甚至低於50,在4s設備上則表現更糟一些。下面貼上幀數測試截圖,大家也可以測試一下~

tip: 如果你用的是老版本,建議你更新到新版,特別是需要適配iOS7甚至6的應用,因為舊版本在iOS7和6下性能比較糟糕...

TZImagePickerController的幀數表現(iOS9.3.2 6s)

 TZImagePickerController的幀數表現(iOS7.0.4 4s)

QQ圖片選擇器的幀數表現(iOS9.3.2 6s)

QQ圖片選擇器的幀數表現(iOS7.0.4 4s)

微信圖片選擇器的幀數表現(iOS9.3.2 6s)

 

1.5.0版本(2016.06.22)
1.可把拍照按鈕放在外面了,可以設置彈出一個sheet提示用戶選擇相冊或相機;
2.新增了sortAscendingByModificationDate屬性,默認為YES,設置為NO時,照片會按修改時間降序,拍照按鈕會在第一個;
3.優化了Demo頁面的UI,新增6個開關控件,可方便地更改各個設置來打開選擇器;
4.修復了若干bug;

 

1.6.3版本(2016.08.29)
1.支持單選模式,將maxImagesCount設置為1即可。
2.支持國際化,目前支持中文和英文。
3.圖片名字可從外界傳,無須再改動源碼。
4.圖片預覽界面照片之間留20像素的間隙,優化預覽效果。
5.圖片選擇頁可自定義圖片展示列數。

 

其它

1.9.0 移除"prefs:root="的調用,這個API已經被列為私有API,請大家盡快升級
1.8.8 修復一些細節
1.8.5 修復一些樣式細節
1.8.4 加入橫豎屏適配;支持視頻/gif多選;支持視頻和照片一起選
1.8.1 新增2個代理方法,支持由上層來決定相冊/照片的顯示與否
1.8.0 修復若干bug, 提升流暢度
...
1.7.7 支持GIF圖片的播放和選擇
1.7.6 支持對共享相冊和同步相冊的顯示
1.7.5 允許不進入預覽頁面直接選擇照片
1.7.4 支持單選模式下裁剪照片,支持任意矩形和圓形裁剪框
1.7.3 優化iCloud照片的顯示與選擇
...

 

六. 常見問題

Q:pod search TZImagePickerController 搜索出來的不是最新版本
A:需要在終端執行cd轉換文件路徑命令退回到Desktop,然后執行pod setup命令更新本地spec緩存(可能需要幾分鍾),然后再搜索就可以了

Q:拍照后照片保存失敗
A:請參考issue481:https://github.com/banchichen/TZImagePickerController/issues/481 的信息排查,若還有問題請直接在issue內評論

Q:photos數組圖片不是原圖,如何獲取原圖?
A:請參考issue457的解釋:https://github.com/banchichen/TZImagePickerController/issues/457

Q:預覽界面能否支持傳入NSURL、UIImage對象?
A:排期中,優先級高

Q:可否支持橫屏?
A:排期中,優先級中

Q:可否加入視頻拍攝功能?
A:排期中,優先級中

Q:可否加入視頻多選功能?
A:排期中,優先級中

Q:可否讓視頻和圖片允許一起選?
A:排期中,優先級中

Q:可否增加微信編輯圖片的功能?
A:考慮下,優先級低

 

七. 其它

更具體的信息大家感興趣的話去看代碼吧,如果發現了bug請提一個issue,當然最好你給順便解決了並提一個pull request,這樣最帥了對吧...

代碼地址:https://github.com/banchichen/TZImagePickerController

歡迎使用,覺得不錯請給一個小小的star鼓勵一下~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM