仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-9系统,3行代码即可集成.

前段时间空余时间比较多,打算尝试做一个图片选择器出来,仔细对比了很多自定义了图片选择器的应用,感觉最喜欢微信的界面效果,当然微博的功能更强大,还支持了LivePhoto,所以打算模仿微信的界面效果,瞄着微博的功能去做一个图片选择器出来。

一.  TZImagePickerController简介

这个图片选择器还没达到我理想中的效果,但是最近工作开始忙起来了,所以有一些功能放在以后加入吧。目前这个图片选择器:

(1)支持图片多选、选原图和视频;

(2)支持预览图片和视频;

(3)适配了iOS6~9;

总体上跟微信的照片选择器界面和功能都差不多一样,当然我这个弱不少...效果图如下:

1. TZPhotoPickerController,照片选择控制器

2.TZPhotoPreviewController,照片预览控制器

3.TZVideoPlayerController,视频预览控制器

对照片选择器要求不是很高的应用来说,这个图片选择器还算是够用了,这段时间考察了github上若干个支持多选的图片选择器,界面效果和功能都比这个差些,可能是有更好的我没发现吧...

二.  如何集成

该图片选择器支持CocoaPods, 在你的Podfile文件中加入 pod ‘TZImagePickerController‘, ‘~> 1.0.0‘ 即可集成。

如果你喜欢手动导入,到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等原因,这个优化就等下次有空再来研究吧...

更具体的信息大家感兴趣的话去看代码吧,如果发现了bug请提一个issue,当然最好你给顺便解决了并提一个pull request,这样最帅了对吧...

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

欢迎使用,觉得不错请给一个小小的star鼓励一下~

时间: 2024-08-02 02:30:05

仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-9系统,3行代码即可集成.的相关文章

使用react context实现一个支持组件组合和嵌套的React Tab组件

纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab是被选中的,哪个该被隐藏: getChildren() { let index = 0; let count = 0; const children = this.props.children; const state = this.state; const tabIds = this.tabIds

5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新的文字版本摘要. 此文为 「60 节实战课微信小程序开发视频教程」 的第 51 小节内容,如果需要查看视频版本的实战操作,请直接跳至文章的最后部分查看. 1.云开发图片空间简介 在之前的文章 微信小程序开发平台新功能「云开发」快速上手体验 中我们简要介绍了腾讯官方给所有的微信小程序开发提供的云

从零开始学C语言,200行代码完成一个打字母游戏!

很多刚开始学习编程的同学都希望自己可以去开发一些游戏,当学习了c语言的时候却发现总是用c语言去解决一些数学问题,今天我就分享给大家一个我学习c语言时候学到的一些好玩的东西,希望可以帮助大家保持对编程的兴趣. 创一个小群,供大家学习交流聊天如果有对学C++方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学C++能够持之以恒C++爱好群,如果你想要学好C++最好加入一个组织,这样大家学习的话就比较方便,还能够共同交流和分享资料,给你推荐一个学习的组织:快乐学习

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能, 你相信么,在JavaScript只需一个函数5行代码即可实现完整的面向方面AOP编程功能.这5行代码的功能包括: 无限层次的函数无害拦截 函数执行前拦截 检查函数的参数值 重新设定函数的参数值 函数执行后拦截 检查函数执行后的返回结果 重新设定函数的返回结果 虽然动态函数式语言的效率是一个存在的问题,但是对于它的高度灵活性,简直让人令人惊叹不已,剧赞. 这个小小的函数源自于和爱明兄的一次讨论:在javascri

解决ios、微信移动端的position: fixed; 支持性不好的问题 &amp;&amp; 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就

jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&

Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动)

※效果 ※使用到的开源库 PhotoView 图片缩放:支持双击缩放,手指捏拉缩放 https://github.com/chrisbanes/PhotoView Universalimageloader 图片下载缓存库 https://github.com/nostra13/Android-Universal-Image-Loader ViewPagerIndicator 分页指示器 https://github.com/JakeWharton/Android-ViewPagerIndicat

vue+vant+springboot+netty仿照微信聊天和朋友圈

我是做java 的,最近公司要求用vue做一套管理系统,我学了一星期vue 就开始做了.最近由于疫情待在家,就撸了一个仿照微信的项目使用 vue ,springboot ,mysql,后台用netty 做消息处理,并且可以打包成apk 在手机上使用 下图是在手机上使用 (图中输入密码黑屏是因为我用小米手机录屏输入密码的时候自动屏蔽了..小米这个功能做的很贴心啊) ? 下面我图方便就在浏览器端使用了 ?? 目前的接口: ? 截图 ?? ?? ?? ?? 前后端的同学都可以看下,相当于一个模板吧,我

从DNS基础到在CentOS6.5上&ldquo;玩着&rdquo;搭建一个支持正向、反向解析的&ldquo;

1.什么是DNS? (Domain Name System)域名系统. DNS其实实现的功能很简单也很有效,它能够让用户可以不用记得那些经常要访问服务器的ip地址,直接要你输入类似拼音格式的就可以访问到那些数字串的ip地址.假设以61.120.155.14(举个例子),我们总是用这些数字进行网页服务器的访问岂不是很蛋疼,毕竟很多人还是对文字甚至拼音字母更容易让正常人记忆.这就是DNS的功能. 当然,它不仅能把那些你输入的拼音字母转换成ip地址的数字串,它还支持把那些数字串转换成你想访问的实际的网