上两次谈及scrollView的使用,在相册使用中是最普遍的。每个相机图片都是如此。接下来只把代码奉上,读者可以自行揣摩。
首先创建一个PhotoScrollView类,继承于UIScrollView,总不能都在viewController里面写。既然是相册,那坑定都是图片之类的(视频除外),需要的是一个全局的ImageView来显示图片。
//显示图片 @property(nonatomic,strong)UIImageView *imageView;
在PhotoScrollView.m中重写initWithFrame方法
1 //重写init方法 2 - (id)initWithFrame:(CGRect)frame { 3 if (self = [super initWithFrame:frame]) { 4 //创建图片视图 5 _imageView = [[UIImageView alloc] initWithFrame:self.bounds]; 6 //显示在屏幕上 7 [self addSubview:_imageView]; 8 //设置代理 9 self.delegate = self; 10 //设置放大缩小倍数 11 self.minimumZoomScale = 0.5; 12 self.maximumZoomScale = 2; 13 } 14 return self; 15 }
设置代理后,一定要在.h中声明代理,不然会警告报错。在以上代码中我们看到了可以设置放大缩小最大最小倍数(自定义),那么,缩放后为什么能显示变化后的图片呢?那就要用的下面的方法:
1 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { 2 //缩放之后返回该图片变化之后样子 3 return _imageView; 4 } 5 //另附英文文档解释 6 //return a view that will be scaled. if delegate returns nil, nothing happens
接下来在controller中的实现。我将导入的图片顺序加入到数组中(最简单的方法),然后可以显示。但这里就不需要循环了,相册一般不循环。
问题来了,如何知道滑动之后是下一张图片呢?那么就要先记录上一张图的index。
{ //记录上一次的图片index NSInteger _prePageIndex; }
具体代码实现如下:
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 4 // scrollView.backgroundColor = [UIColor blackColor]; 5 //设置翻页功能 6 scrollView.pagingEnabled = YES; 7 //设置内容尺寸 8 scrollView.contentSize = CGSizeMake(kScreenWidth * 5, kScreenHeight - 69); 9 //显示 10 [self.view addSubview:scrollView]; 11 //添加图片 12 for (int i = 0; i < 5; i ++) { 13 NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i]; 14 UIImage *image = [UIImage imageNamed:imageName]; 15 PhotoScrollView *photoView = [[PhotoScrollView alloc] initWithFrame:CGRectMake(i * kScreenWidth, 64, kScreenWidth, kScreenHeight - 113)]; 16 //设置图片 17 photoView.imageView.image = image; 18 //设置为 i ,与图片相对应,当i=0 时,出现状况 19 // photoView.tag = i; 20 photoView.tag = 99 + i; 21 [scrollView addSubview:photoView]; 22 } 23 //设置代理 24 scrollView.delegate = self; 25 //显示第一张图片 26 _prePageIndex = 0; 27 }
其中kScreenWidth、kScreenHeight是自定义的一个宏定义,方便使用,读者都知道不需多言(1、2中均使用过)。
此处是停止后方法:
1 //减速停止时候 2 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { 3 4 //获取当前图片的index = scrollView.contentOffset.x/kScreenWidth; 5 NSInteger currentPageIndex = scrollView.contentOffset.x/kScreenWidth; 6 if (currentPageIndex != _prePageIndex) { 7 //获取上一张图片(1.利用tag值,所以要设置photoView.tag 2.利用偏移量) 8 PhotoScrollView *photoView = (PhotoScrollView*)[scrollView viewWithTag:_prePageIndex + 99]; 9 //当切换图片后,将前一张图片大小还原 10 photoView.zoomScale = 1; 11 //重新设置_prePageIndex 12 _prePageIndex = currentPageIndex; 13 } 14 }
效果图
uo
我们可以看见有水平、垂直滚动条。还有当滑动到最后一个之后就不能再滑动,但是有反弹效果(可以取消反弹效果)
//是否反弹 scrollView.bounces = NO/YES; //水平碰到边框是否反弹 scrollView.alwaysBounceHorizontal = NO/YES; //垂直碰到边框是否反弹 scrollView.alwaysBounceVertical = NO/YES;
相册实现原理就是以上(只是简单的,不全面)代码。
欢迎读者查阅,有错请留言。如若转载请标明出处。