自定义ImageView添加手势做出类似微博配图浏览效果

最新推荐文章于 2022-03-27 01:19:44 发布

_辰南

最新推荐文章于 2022-03-27 01:19:44 发布

阅读量1.4k

点赞数

分类专栏： iOS开发笔记文章标签：自定义ImageView 添加手势 pageControl ScrollView ios开发

本文链接：https://blog.csdn.net/CNLF14/article/details/45101323

版权

这篇博客介绍了如何在iOS开发中，通过自定义ImageView并添加手势来实现类似微博配图的浏览功能。点击ImageView可全屏显示大图，支持双指拖动缩放，滑动浏览多张图片，以及保存到相册等功能。实现思路包括自定义UIImageView响应点击事件，创建ScrollView展示图片，并记录原位置以便关闭时返回。

摘要由CSDN通过智能技术生成

Demo下载以及个人Github地址: https://github.com/ChenNan-FRAM/WebImageViewBrowser

实现类似微博配图浏览功能：

点击全屏浏览大图
可用于单个ImageView也可用于多个ImageView
再次点击缩小回原位置
双指拖拉图片放大缩小
滑动浏览多个配图或上下滑动浏览
下载查看原图
保存到手机相册等

（该Demo也包含ImageView、ScrollView、PageControl组合使用方法相信也有一定参考价值。）

大致实现思路：

自定义UIImageView并添加手势点击功能实现响应点击动作；接受点击信号后传递给一个可全局调用的浏览类。
该类负责在windows窗口上添加一个ScrollView,如果只是单个图片则只需要在ScrollView上添加一个UIImageView，将大图原图的图片链接传入该类即可。如果是多个配图则需要在ScrollView上面添加一个ScrollView2，在ScrollView2上添加ImageView，再将大图原图的图片链接数组传入该类。
点击关闭的实现原理则是给最底下的ScrollView添加一个手势点击，将所有在ScrollView包括其自身设为全透明后从窗口移除。
在打开自定义UIImageView的时候要记录下打开时该ImageView的位置，以便动画返回原位置。

实现效果：

这里给出单个ImageView的情况下点击打开的Demo（图片下载的时候使用了第三方库SDWebImage，本Demo也有附上。可直接下载浏览）：

自定义ImageView类：

SingleWebImageView.h部分:

//
//  SingleWebImageView.h
//  WebImageBrowserDemo
//
//  Created by Caesar on 15/4/16.
//  Copyright (c) 2015年 Caesar. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface SingleWebImageView : UIImageView
@property(nonatomic, copy)NSString *original_pic_url;
@property(nonatomic, copy)NSString *bmiddle_pic_url;

-(SingleWebImageView *)initWithStyleAndBmiddlePicUrl:(NSString *)bmiddle_pic_url andOriginalPicUrl:(NSString *)original_pic_url;
@end

SingleWebImageView.m部分：