美文网首页iOS常用iOS学习专题
UIScrollView 缩放实现漫画阅读效果!

UIScrollView 缩放实现漫画阅读效果!

作者: 芮淼一线 | 来源:发表于2020-08-10 17:49 被阅读0次

    需求

    想实现漫画阅读放大效果需要利用UIScrollView的缩放功能。

    方案一

    思路:利用UICollectionView做载体,然后实现对每个ItemCell进行缩放操作。
    操作:在Cell中添加UIScrollView作为子控件,再在UIScrollView中添加UIImageView。
    左后在Cell中进行UIImageView缩放操作
    代码

    //
    //  ItemCell.m
    //  UITableViewReader
    //
    //  Created by PC on 2020/8/9.
    //  Copyright © 2020 PC. All rights reserved.
    //
    
    #import "ItemCell.h"
    
    #define minScale  1
    #define maxScale  5
    
    @interface ItemCell () <UIScrollViewDelegate>
    
    @end
    
    @implementation ItemCell
    
    - (instancetype)initWithFrame:(CGRect)frame
    {
        if (self = [super  initWithFrame:frame]) {
            [self setupUIWith:frame];
    
        }
        return self;
    }
    
    - (void)setupUIWith:(CGRect)frame
    {
        frame.origin = CGPointZero;
        _zoomView = [[ItemScrollView alloc] initWithFrame:frame];
        _zoomView.backgroundColor = UIColor.grayColor;
        _zoomView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        _zoomView.showsHorizontalScrollIndicator = NO;
        _zoomView.showsVerticalScrollIndicator = NO;
        _zoomView.bounces = NO;
    //    _zoomView.bouncesZoom = NO; //打开注释回关闭缩小过程
        _zoomView.minimumZoomScale = minScale;
        _zoomView.maximumZoomScale = maxScale;
        _zoomView.delegate = self;
        [self.contentView addSubview:_zoomView];
        _zoomView.contentSize = frame.size;
    
    }
    
    
    - (void)setFrame:(CGRect)frame
    {
        [super setFrame:frame];
        if (_zoomView) {
            frame.origin = CGPointZero;
            _zoomView.frame = frame;
        }
    }
    
    - (void)restZoom
    {
        [_zoomView setZoomScale:1.0 animated:YES];
    }
    
    #pragma mark UIScrollViewDelegate
    //返回需要被缩放的view
    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
    {
        return _zoomView.zoomImageView;
    }
    
    // 即将开始缩放的时候调用
    - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2){
        NSLog(@"即将缩放  %s",__func__);
    }
    
    // 缩放时调用
    - (void)scrollViewDidZoom:(UIScrollView *)scrollView
    {
        NSLog(@"缩放中。。。。scale:%f",_zoomView.zoomScale);
        NSLog(@"缩放中。。。。zoomView contentSize:%@",NSStringFromCGSize(_zoomView.contentSize));
        NSLog(@"缩放中。。。。zoomImageView frame:%@",NSStringFromCGRect(_zoomView.zoomImageView.frame));
    }
    
    
    
    @end
    
    

    方案二

    思路:利用UITableView做载体,对整个UITableViewj进行缩放操作
    操作:首先将UITableView添加到UIScrollView作为其子控件,然后直接再UIScrollView中对UITableVIew进行缩放操作,被缩放的对象是UITableView
    代码

    
    //
    //  ZoomTableViewController.m
    //  UITableViewReader
    //
    //  Created by PC on 2020/8/9.
    //  Copyright © 2020 PC. All rights reserved.
    //
    
    #import "ZoomTableViewController.h"
    #import "TableViewCell.h"
    
    
    #define minScale  1
    #define maxScale  5
    
    @interface ZoomTableViewController ()<UITableViewDelegate,UITableViewDataSource,UIScrollViewDelegate>
    @property(nonatomic, strong) UITableView *tableView;
    @property(nonatomic, strong) UIScrollView *scrollView;
    @property(nonatomic, strong) NSMutableArray *dataAry;
    @end
    
    @implementation ZoomTableViewController{
        CGFloat width;
        CGFloat height;
    }
    
    - (instancetype)initWithCoder:(NSCoder *)coder
    {
        if (self = [super initWithCoder:coder]) {
            self.modalPresentationStyle = UIModalPresentationFullScreen;
        }
        return self;;
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        [self instansView];
    }
    
    - (void)instansView
    {
        self.dataAry = @[].mutableCopy;
        [self.dataAry addObjectsFromArray:[SrcLoad allImageURL]];
    
        _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
        _scrollView.backgroundColor = UIColor.grayColor;
        _scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.minimumZoomScale = minScale;
        _scrollView.maximumZoomScale = maxScale;
        _scrollView.delegate = self;
        _scrollView.bounces = NO;
    //    _scrollView.bouncesZoom = NO; //打开注释回关闭缩小过程
        [self.view addSubview:_scrollView];
        _scrollView.contentSize = self.view.frame.size;
    
    
        width  = [UIScreen mainScreen].bounds.size.width/1700;
        height = width*2408;
        _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
        _tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        [_tableView registerClass:[TableViewCell class] forCellReuseIdentifier:@"TableViewCell"];
        _tableView.showsVerticalScrollIndicator = NO;
        _tableView.rowHeight = height;
        _tableView.dataSource = self;
        _tableView.delegate = self;
        [_scrollView addSubview:_tableView];
    
    
    }
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return self.dataAry.count;
    }
    
    - (CGFloat) tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return UITableViewAutomaticDimension;;
    }
    
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        TableViewCell *cell = (TableViewCell *)[tableView dequeueReusableCellWithIdentifier:@"TableViewCell" forIndexPath:indexPath];
        [cell.zoomImageView sd_setImageWithURL:[NSURL URLWithString:self.dataAry[indexPath.row]]];
        return cell;;
    }
    
    
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        NSLog(@"click row:%ld",indexPath.row);
    }
    
    
    #pragma mark UIScrollViewDelegate
    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
    {
        return _tableView;;
    }
    
    // 即将开始缩放的时候调用
    - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2){
        NSLog(@"即将缩放  %s",__func__);
    }
    
    // 缩放时调用
    - (void)scrollViewDidZoom:(UIScrollView *)scrollView
    {
        NSLog(@"缩放中。。。。scale:%f",_scrollView.zoomScale);
        NSLog(@"缩放中。。。。_scrollView contentSize:%@",NSStringFromCGSize(_scrollView.contentSize));
        NSLog(@"缩放中。。。。_tableView frame:%@",NSStringFromCGRect(_tableView.frame));
    }
    
    // scale between minimum and maximum. called after any 'bounce' animations缩放完毕的时候调用。
    - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
    {
    //    [_tableView reloadData];
    }
    
    */
    
    @end
    
    
    

    PS:Demo

    相关文章

      网友评论

        本文标题:UIScrollView 缩放实现漫画阅读效果!

        本文链接:https://www.haomeiwen.com/subject/yswjdktx.html