• scrollView(3)-相册浏览简单的缩放


    上两次谈及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;

    相册实现原理就是以上(只是简单的,不全面)代码。

    欢迎读者查阅,有错请留言。如若转载请标明出处。

  • 相关阅读:
    drf规范——请求与响应
    序列化器——Serializer
    drf 安装与配置
    CBV源码——View,APIView
    django restful framework —— Drf 规范一
    Vue——五
    Vue——四
    今日复习
    冒泡排序
    考试总结
  • 原文地址:https://www.cnblogs.com/david-han/p/4856188.html
Copyright © 2020-2023  润新知