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

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

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

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

  • 点击全屏浏览大图
  • 可用于单个ImageView也可用于多个ImageView
  • 再次点击缩小回原位置
  • 双指拖拉图片放大缩小
  • 滑动浏览多个配图或上下滑动浏览
  • 下载查看原图
  • 保存到手机相册等
      (该Demo也包含ImageView、ScrollView、PageControl组合使用方法相信也有一定参考价值。)

大致实现思路:

  1. 自定义UIImageView并添加手势点击功能实现响应点击动作;接受点击信号后传递给一个可全局调用的浏览类。
  2. 该类负责在windows窗口上添加一个ScrollView,如果只是单个图片则只需要在ScrollView上添加一个UIImageView,将大图原图的图片链接传入该类即可。如果是多个配图则需要在ScrollView上面添加一个ScrollView2,在ScrollView2上添加ImageView,再将大图原图的图片链接数组传入该类。
  3. 点击关闭的实现原理则是给最底下的ScrollView添加一个手势点击,将所有在ScrollView包括其自身设为全透明后从窗口移除。
  4. 在打开自定义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部分:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值