仿照微信的效果,實現(xiàn)了一個支持多選、選原圖和視頻的圖片選擇器霍殴,支持iOS6+媒惕,3行代碼即可集成

重要提示

  1. 1.9.0版本已發(fā)布,移除了"prefs:root="的調(diào)用繁成,這個API已經(jīng)被列為私有API吓笙,請大家盡快升級。其它同樣使用了該API的庫大家可以檢查下巾腕,比如著名的SVProgressHUD
  2. 如果你發(fā)現(xiàn)了Bug面睛,請先嘗試更新到最新版,此前的版本可能存在一些bug尊搬。如果你已經(jīng)是最新版了叁鉴,請在github上提一個issue,我看到了會盡快處理哈~

前段時間空余時間比較多佛寿,打算嘗試做一個圖片選擇器出來幌墓,仔細(xì)對比了很多自定義了圖片選擇器的應(yīng)用,感覺最喜歡微信的界面效果冀泻,當(dāng)然微博的功能更強(qiáng)大常侣,還支持了LivePhoto,所以打算模仿微信的界面效果弹渔,瞄著微博的功能去做一個圖片選擇器出來胳施。

一. TZImagePickerController簡介

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

  1. 支持圖片多選、選原圖和視頻博杖;
  1. 支持預(yù)覽圖片和視頻椿胯;
  2. 適配了iOS6~10;

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

  1. TZPhotoPickerController, 照片選擇控制器

2.TZPhotoPreviewController. 照片預(yù)覽控制器

3.TZVideoPlayerControlle. 視頻預(yù)覽控制器

對照片選擇器要求不是很高的應(yīng)用來說哩盲,這個圖片選擇器還算是夠用了,這段時間考察了github上若干個支持多選的圖片選擇器跟继,界面效果和功能都比這個差些种冬,可能是有更好的我沒發(fā)現(xiàn)吧...

二. 如何集成

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

如果你喜歡手動導(dǎo)入娱两,到github下載代碼后,將TZImagePickerController文件夾拖入到你的項目中金吗,再#import "TZImagePickerController.h"即可十兢。

集成這個圖片選擇器趣竣,最少只需要三行代碼,用起來還是很方便旱物,可以節(jié)省開發(fā)者的時間遥缕,把更多的時間和精力花在業(yè)務(wù)邏輯和自己想鉆研的技術(shù)點上去。

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, BOOL isSelectOriginalPhoto) {

}];
[self presentViewController:imagePickerVc animated:YES completion:nil];

代碼截圖如下:


三. 相關(guān)類的介紹

1.TZImageManager:唯一import了和的類单匣,向外界提供有獲取相冊/照片/視頻資源的接口,在里面每個方法內(nèi)部會判斷系統(tǒng)版本宝穗,從而選擇是從AssetsLibrary庫「iOS9以前可用」還是從Photos庫里獲取照片資源「iOS8以后可用」户秤。
2.TZImagePickerController:導(dǎo)航欄控制器,通過改變該控制器的一些屬性來達(dá)到你想要的效果逮矛,比如設(shè)置maxImagesCount屬性來約束用戶最大可選圖片張數(shù)鸡号,默認(rèn)為9張;設(shè)置allowPickingOriginalPhoto屬性為NO不允許用戶選擇視頻须鼎,默認(rèn)是YES鲸伴;設(shè)置allowPickingVideo屬性為NO不允許用戶選擇原圖,默認(rèn)是YES晋控。
3.TZPhotoPickerController:照片選擇控制器汞窗,一個collectionView每行4個cell展示圖片。
4.TZPhotoPreviewController:照片預(yù)覽控制器赡译,用的是collectionView而不是scrollView杉辙,所以不用處理重用邏輯,然而圖片的間隙我還沒弄出來...以后再弄吧...(已出...)
5.TZVideoPlayerController:視頻預(yù)覽控制器捶朵,簡單的播放/暫停/發(fā)送視頻功能,用的是AVPlayer來播放狂男。進(jìn)度條下次有空再加上吧...
6.TZAssetModel:裝有一個圖片/視頻/音頻資源的模型综看,對應(yīng)一個圖片/視頻Cell「TZAssetCell」,資源屬性名為asset岖食,可以從TZImageManager取出資源對象「圖片/視頻/音頻」红碑。
7.TZAlbumModel:裝有一個相冊資源的模型,對應(yīng)一個相冊Cell「TZAlbumCell」泡垃,資源屬性名為result析珊,可以從TZImageManager取出所含有的圖片資源數(shù)組。

四. 微信圖片選擇器的一些技術(shù)點

優(yōu)點實在太多了蔑穴,說兩個我發(fā)現(xiàn)的小缺點吧忠寻。

小缺點1:在相冊列表頁,空的cell也會顯示存和,出現(xiàn)許多空的分割線奕剃≈月茫「也可能是微信的產(chǎn)品或iOS喜歡這個調(diào)調(diào)...」

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

小缺點2:在照片選擇器頁,微信的設(shè)計是不允許同時選擇視頻和照片的操软,但是在照片預(yù)覽頁面嘁锯,用戶卻可以同時選中視頻和照片,此時微信會默認(rèn)將視頻作為圖片發(fā)送聂薪,而沒有做一個提示家乘。并且,如果用戶選擇了發(fā)送原圖胆建,此時視頻雖然也被選中出來了烤低,但是會一直發(fā)送失敗。

  • 我的解決方案:在照片預(yù)覽頁面笆载,如果用戶在選擇了圖片的情況下又選擇了視頻扑馁,提示用戶會默認(rèn)將視頻做圖片發(fā)送。并且在圖片瀏覽器頁面凉驻,如果預(yù)覽到了一個視頻腻要,則將原圖按鈕隱藏,在計算原圖大小的方法里也會過濾掉視頻資源涝登。

當(dāng)然微信的圖片選擇器是很優(yōu)秀的雄家,比如我今天在用iOS6系統(tǒng)的4s真機(jī)測試時,發(fā)現(xiàn)第一次彈出圖片選擇器時胀滚,如果相機(jī)膠卷相冊圖片數(shù)大于1000趟济,我的這個會有比較明顯的卡頓,而微信的卻依然流暢...考慮到這個罕見的iOS6系統(tǒng)4s機(jī)子不是我的咽笼、工作要開始忙了顷编、畢竟這只是4s等原因,這個優(yōu)化就等下次有空再來研究吧...(1.4.2版本更新:這里已優(yōu)化剑刑,是AssetsLibrary的一個坑...)

五. 更新記錄

1.4.5版本(2016.05.23)
在照片列表頁新增了拍照按鈕媳纬,可以全局記錄哪個相冊已選中了多少張圖片酗失,預(yù)覽控制器可以在外界打開钦听。同時Demo頁面也做了一些優(yōu)化,可以直接刪除選中的照片橄杨、可以對照片進(jìn)行長按排序等七芭。當(dāng)然期間也修復(fù)了許多小bug素挽,表現(xiàn)更加好了。
最值得一提的是抖苦,1.4.5版本的性能大幅提升了毁菱,在我的iOS9.3.2系統(tǒng)6s設(shè)備上(870張照片)米死,平均滑動幀數(shù)在58左右,滑動十分流暢贮庞,在iOS7.0.4的4s設(shè)備上(124張照片)峦筒,平均滑動幀數(shù)在57左右,也十分流暢窗慎。經(jīng)過對比物喷,和QQ的圖片選擇器滑動幀數(shù)表現(xiàn)基本一致,都十分流暢遮斥,同時都強(qiáng)于微信的圖片選擇器峦失。微信的圖片選擇器,在快速滑動的時候明顯感到有一絲卡頓术吗,通過Core Animation查看發(fā)現(xiàn)尉辑,微信的圖片選擇器在我的6s設(shè)備下幀數(shù)平均約52左右,好幾次甚至低于50较屿,在4s設(shè)備上則表現(xiàn)更糟一些隧魄。下面貼上幀數(shù)測試截圖,大家也可以測試一下~

TZImagePickerController的幀數(shù)表現(xiàn) (iOS9.3.2 6s).png
TZImagePickerController的表現(xiàn) (iOS7.0.4 4s).png
QQ圖片選擇器的幀數(shù)表現(xiàn) (iOS9.3.2 6s).png
QQ圖片選擇器的幀數(shù)表現(xiàn) (iOS7.0.4 4s).png
微信圖片選擇器的幀數(shù)表現(xiàn) (iOS9.3.2 6s).png

1.5.0版本(2016.06.22)
1.可把拍照按鈕放在外面了,可以設(shè)置彈出一個sheet提示用戶選擇相冊或相機(jī)隘蝎;
2.新增了sortAscendingByModificationDate屬性购啄,默認(rèn)為YES,設(shè)置為NO時嘱么,照片會按修改時間降序狮含,拍照按鈕會在第一個;
3.優(yōu)化了Demo頁面的UI曼振,新增6個開關(guān)控件几迄,可方便地更改各個設(shè)置來打開選擇器;
4.修復(fù)了若干bug冰评;

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

最近更新
2.2.2 修復(fù)minPhotoWidthSelectable不生效的問題, 使用@available消除警告
2.1.8 優(yōu)化gif圖播放的體驗蚪黑,加入iCloud同步進(jìn)度條盅惜;新增notScaleImage屬性中剩,設(shè)置為YES時內(nèi)部不去縮放圖片
2.1.6 新增allowCameraLocation屬性,默認(rèn)為YES抒寂,置為NO時不會在照相/攝像時定位结啼,修復(fù)一個序號紊亂的bug
2.1.4 新增多個頁面和組件的樣式自定義block,允許自定義絕大多數(shù)UI樣式
2.1.2 新增showPhotoCannotSelectLayer屬性屈芜,當(dāng)已選照片張數(shù)達(dá)到最大可選張數(shù)時郊愧,可像微信一樣讓其它照片顯示一個提示不可選的浮層
2.1.1 新增是否顯示圖片選中序號的屬性,優(yōu)化一些細(xì)節(jié)
2.1.0.3 新增拍攝視頻功能井佑,優(yōu)化一些細(xì)節(jié)
2.0.0.6 優(yōu)化自定義languageBundle的支持属铁,加入使用示例
2.0.0.5 優(yōu)化性能,提高選擇器打開速度躬翁,新增越南語支持
2.0.0.2 新增繁體語言焦蘑,可設(shè)置首選語言,國際化支持更強(qiáng)大盒发;優(yōu)化一些細(xì)節(jié)
1.9.8 支持Carthage例嘱,優(yōu)化一些細(xì)節(jié)
1.9.6 優(yōu)化視頻預(yù)覽和gif預(yù)覽頁toolbar在iPhoneX上的樣式
1.9.4 適配iPhoneX
1.9.0 移除"prefs:root="的調(diào)用,這個API已經(jīng)被列為私有API迹辐,請大家盡快升級
1.8.4 加入橫豎屏適配蝶防;支持視頻/gif多選;支持視頻和照片一起選
1.8.1 新增2個代理方法明吩,支持由上層來決定相冊/照片的顯示與否
1.8.0 修復(fù)若干bug, 提升流暢度
...
1.7.7 支持GIF圖片的播放和選擇
1.7.6 支持對共享相冊和同步相冊的顯示
1.7.5 允許不進(jìn)入預(yù)覽頁面直接選擇照片
1.7.4 支持單選模式下裁剪照片间学,支持任意矩形和圓形裁剪框
1.7.3 優(yōu)化iCloud照片的顯示與選擇
...

六. 常見問題

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

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

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

Q:系統(tǒng)語言是中文/英文仍律,界面上卻有部分相冊名字嘿悬、返回按鈕顯示成了英文/中文?
A:請參考 https://github.com/banchichen/TZImagePickerController/issues/443https://github.com/banchichen/TZImagePickerController/issues/929

Q:預(yù)覽界面能否支持傳入NSURL水泉、UIImage對象善涨?
A:排期中,優(yōu)先級高

Q:設(shè)置可選視頻的最大/最小時長草则?照片的最小/最大尺寸钢拧?不符合要求的不顯示
A:可以的,參照Demo的isAssetCanSelect方法實現(xiàn)炕横。我會返回asset出來源内,顯示與否你來決定,注意這個是一個同步方法份殿,對于需要根據(jù)asset去異步獲取的信息如視頻的大小膜钓、視頻是否存在iCloud里來過濾的嗽交,無法做到。如果真要這樣做颂斜,相冊打開速度會變慢夫壁,你需要改我源碼。

Q:可否支持橫屏焚鲜?
A:1.8.4版本已支持

Q:可否加入視頻拍攝功能掌唾?
A:2.1.0.3版本已支持

Q:可否加入視頻多選功能?
A:1.8.4版本已支持

Q:可否讓視頻和圖片允許一起選忿磅?
A:1.8.4版本已支持

Q:可否增加微信編輯圖片的功能糯彬?
A:考慮下,優(yōu)先級低

Q:是否有QQ/微信群葱她?
A:有QQ群:778723997

Q:想提交一個PR撩扒?
A:請先加QQ群和我確認(rèn)下,避免同時改動同一處內(nèi)容吨些。一個PR請只修復(fù)1個問題搓谆,變動內(nèi)容越少越好

Q:demo在真機(jī)上跑不起來豪墅?
A:1泉手、team選你自己的;2偶器、bundleId也改成你自己的或改成一個不會和別人重復(fù)的斩萌。可參考簡書的這篇博客

七. 其它

更具體的信息大家感興趣的話去看代碼吧屏轰,如果發(fā)現(xiàn)了bug請?zhí)嵋粋€issue颊郎,當(dāng)然最好你給順便解決了并提一個pull request,這樣最帥了對吧...
代碼地址:https://github.com/banchichen/TZImagePickerController
歡迎使用霎苗,覺得不錯請給一個小小的star鼓勵一下~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末姆吭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子唁盏,更是在濱河造成了極大的恐慌内狸,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厘擂,死亡現(xiàn)場離奇詭異答倡,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)驴党,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來获茬,“玉大人港庄,你說我怎么就攤上這事倔既。” “怎么了鹏氧?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵渤涌,是天一觀的道長。 經(jīng)常有香客問我把还,道長实蓬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任吊履,我火速辦了婚禮安皱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘艇炎。我一直安慰自己酌伊,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布缀踪。 她就那樣靜靜地躺著居砖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪驴娃。 梳的紋絲不亂的頭發(fā)上奏候,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機(jī)與錄音唇敞,去河邊找鬼蔗草。 笑死,一個胖子當(dāng)著我的面吹牛厚棵,可吹牛的內(nèi)容都是我干的蕉世。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼婆硬,長吁一口氣:“原來是場噩夢啊……” “哼狠轻!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起彬犯,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤向楼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后谐区,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體湖蜕,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年宋列,在試婚紗的時候發(fā)現(xiàn)自己被綠了昭抒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖灭返,靈堂內(nèi)的尸體忽然破棺而出盗迟,到底是詐尸還是另有隱情,我是刑警寧澤熙含,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布罚缕,位于F島的核電站,受9級特大地震影響怎静,放射性物質(zhì)發(fā)生泄漏邮弹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一蚓聘、第九天 我趴在偏房一處隱蔽的房頂上張望腌乡。 院中可真熱鬧,春花似錦或粮、人聲如沸导饲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽渣锦。三九已至,卻和暖如春氢哮,著一層夾襖步出監(jiān)牢的瞬間袋毙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工冗尤, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留听盖,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓裂七,卻偏偏與公主長得像皆看,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子背零,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 原文地址:http://www.codeceo.com/article/ios-weixin-image-pick...
    默默_David閱讀 2,355評論 4 1
  • 從前有一只小兔,她很愛美侦镇。 有一天她穿著媽媽給她新買的裙子走在森林里灵疮,小蝸牛說你可真漂亮,大象也說你真漂亮壳繁,小兔高...
    孫楚杉閱讀 189評論 0 0
  • 這叢趕著從武漢來到青島震捣,見到鳳蘭荔棉、常春、德平蒿赢、冬青江耀、廣新、柱子诉植、現(xiàn)發(fā)助教、曙冬助教昵观、思俊晾腔。冬青和德平為這次大組會付...
    葉子卷閱讀 378評論 1 4
  • 今天超級想吃雪糕灼擂,超級想吃,感覺我就要忍不住了觉至,已經(jīng)忍了一個半月剔应,真的是很艱辛啊。我同學(xué)說我冬天吃的雪糕比她夏天吃...
    小夕呢閱讀 189評論 1 0
  • 前言 在橫向滲透中语御,利用Ticket票據(jù)進(jìn)行橫向常常用在域環(huán)境里峻贮。常見的有三種攻擊方式:ms14-068、Gold...
    CSeroad閱讀 2,543評論 0 1