iOS 自定义图片选择器 2 - UIScrollView缩放

【 写在前面:笔者按照Instagram的图片选取器写了个小Demo,
该系列文章为笔者实现Demo的步骤,若有不正确的地方还望指出来,共同学习。
地址:https://github.com/BigBigPo/RJPhotoPicker

前一篇简单的介绍了PhotoKit的使用,图片资源我们已经拿到了,接下来就该写选择器了。我们先看看Instagram的图片选择器是什么样子——


Insshow.gif

可以看出,界面上分为两大块,“展示区”与“列表区”,两个区域具有联动属性。我们先看上方的展示区,这个区域最主要的功能是展示用户当前选中的图片,并且具有缩放,拖动改变图片填充方式等功能。

看到“缩放”,“拉伸”这些字眼时,笔者第一反应就想到了UIScrollView,其完全具备上述功能,在使用中也有需要注意的事项,下面我们就以UIScrollView来实现展示区的功能。


0.思考

要实现缩放功能很简单,Instagram的展示区还有很多细节:
1、 默认情况下,图片将会按比例填充整个展示区(类似.ScaleAspectFill的填充效果)
2、展示区默认中心定位在图片中央
3、图片的四周均具有弹簧效果。

最主要的是这三个特性,当然还有其他次要的效果,如线框、更改填充样式等等,这些都是锦上添花的功能,上述三个效果是其基本功能(展示,缩放)所必须具有的,权重也是最高的。

对于细节1,笔者一开始直接想到的是UIImageView的ContentMode,这个是UIImageView自身的展示方式,仅仅只是展示图片是没有问题的,但现在需要将其加入到ScrollView中还需要达到细节2,但有点多余。

为什么?

细节2的实现上,因为我们的展示区域的大小是固定的,所以需要将图片视图进行适配,需要获取图片视图的大小,再根据contentView的大小重设UIImageView的大小来进行适配,以此为依据来确定ScrollView的区域位置。若我们使用了UIImageView的ContentMode,我们还是要获取图片的大小。
这样看来,UIImageView的contentMode显得多余了,我们会重设UIImageView的尺寸,而根据需求来看,这个重设UIImageView的尺寸就包含了我们需要的“ .ScaleAspectFill”效果。

若被绕晕了没有关系,我们一步一步来,文章最后有Demo以供参考。

接下来

1.准备工作

新建一个项目,在场景中加入一个UIScrollView,并在该ScrollView中加入一个UIImageView,设置好约束(笔者用的XIB,代码也可以,后面统一以XIB来讲)。

因为我们要实时的重置展示区的约束,所以我们需要拿到UIImageView的“宽”、“高”、“左距”、“右距”。以方便后续操作。


views.png

如上图,界面十分简单,Next按钮只是Demo为了切换不同尺寸的图片。XIB中的效果如下:

viewsShow.png

2.缩放功能

单独的缩放功能十分简单,只需要设置好UIScrollView的缩放系数,以及在代理中返回需要缩放的视图即可。

    [_scrollView setDelegate:self];         //不要忘记添加代理
    [_scrollView setMinimumZoomScale:1];    //最小缩放系数
    [_scrollView setMaximumZoomScale:2];    //最大缩放系数
//该代理方法需要返回一个需要缩放的view,若返回nil,将没有任何效果。
//注:在TableView、UICollectionView中使用UIScrollView来完成缩放效果时,直接返回imageView可能不能达到效果,需要给imageView套一层View,在此代理中返回该view即可解决。
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return _imageView;
}

单纯的缩放功能就实现了,但图片的大小,位置特别的奇怪,我们需要优化一下。顺便提一下,UIScrollView还提供了关于缩放更多代理,可以据此实现许多功能。

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view;
- (void)scrollViewDidZoom:(UIScrollView *)scrollView;
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale

3.适配图片的大小与位置

首先要确定图片视图的大小,才能更好的确定展示区具体的位置。图片的大小适配,其实就是根据图片的大小按照填充的类型(铺满,填充),保持比例缩放至容器(UIScrollView)的大小。也就是一个计算尺寸的过程。

/**
 根据图片的大小来获得合适的容器大小
 */
- (CGSize)getImageVeiwSizeWithImage:(UIImage *)image {
    //获取scrollView的尺寸(在Demo中,我们把scrollView的长宽都设置成了屏宽,是相等的)
    CGFloat scrollViewSize = [UIScreen mainScreen].bounds.size.width;
    
    //注:下方的 +1 只是为了方便实现ScrollView的边界弹簧效果,并无其他用处
    CGFloat width = scrollViewSize + 1;
    CGFloat height = width / image.size.width * image.size.height;
    if (height < scrollViewSize) {
        height = scrollViewSize + 1;
        width = height / image.size.height * image.size.width;
    }
    return CGSizeMake(width, height);
}

图片的位置也就是UIScrollView的contentOffset,来实现。现在已经计算出了图片的展示尺寸,就可以知道图片的位置(UIScrollView的contentOffset)

/**
 根据图片视图大小来确定图片位置
 */
- (void)setScrollViewCenterWithImageSize:(CGSize)size {
    //获取scrollView的尺寸(在Demo中,我们把scrollView的长宽都设置成了屏宽,是相等的)
    CGFloat scrollViewSize = [UIScreen mainScreen].bounds.size.width;
    
    //获取图片中心以此为依据计算scrollView的contentOffset
    CGPoint imageCenter = CGPointMake(size.width / 2, size.height / 2);
    CGPoint point = CGPointMake(imageCenter.x - scrollViewSize / 2, imageCenter.y - scrollViewSize / 2);
    [_scrollView setContentOffset:point];
}

展示区的主要功能到此就全部实现了,UIScrollView来实现缩放是比较简单的,代码中我也举出了自己遇到的一个问题,以及解决办法:
在UIScrollView在另一个ScrollView中时,可能出现缩放无效的问题,例如,UITabelView 或 UICollectionVewi的Cell中。笔者的解决办法是在imageView外套一层View,这样可以解决问题,但还未知道其中的原理,也许是两个ScrollView嵌套的问题,或者是列表控件的内部机制?

本节的Demo:https://github.com/BigBigPo/UIScrollViewScaleDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 昨天,我去参加了我外公的兄弟的外孙女的婚礼。 从小到大,和这个远房表妹见面的次数,十根手指头都数得过来。 印象中这...
    尼莫鱼阅读 1,350评论 4 4
  • kvc:键 - 值编码是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取方法,直接或通过实例变量访问...
    xing_zhu阅读 175评论 0 0
  • 五点半醒,拿起手机看看微信和qq,看着朋友们都幸福,也想想今天工作安排,年龄增长,心反而更洁净了,因为知道...
    探路者tanluzhe阅读 233评论 2 3
  • 洛阳深闺,倚栏睡 几夜流苏垂 蝶舞绕屏飞 点不清,相思泪 又忆君曾把我手 共煮青梅; 满楼春碎,月初胐 一盏孤灯陪...
    会说话的哑巴_阅读 231评论 0 0