UIScrollView 縮放實現漫畫閱讀效果!

需求

想實現漫畫閱讀放大效果需要利用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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容