美文网首页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