iOS_下拉图片放大效果

今天讲一下App中比较常见的一个效果。就是下拉的时候,图片等比例放大。网上一些demo都有这那的小瑕疵。稍微研究了一下,做了点修改,效果很OK。

具体如下:

1.新建一个类:JYStretchTableViewHeader

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface JYStretchTableViewHeader : NSObject
@property (nonatomic,strong) UITableView *tableView;
@property (nonatomic,strong) UIView      *view;

-(void)stretchHeaderForTableView:(UITableView *)tableView
                        withView:(UIView *)view
                        subViews:(UIView *)subView;

-(void)scrollViewDidScroll:(UIScrollView *)scrollView;
-(void)resizeView;
@end

#import "JYStretchTableViewHeader.h"
@interface JYStretchTableViewHeader()
{
    CGRect initialFrame;
    CGFloat defaultViewHeight;
    CGFloat defaultViewWidth;
}
@end

@implementation JYStretchTableViewHeader
-(void)stretchHeaderForTableView:(UITableView *)tableView withView:(UIView *)view subViews:(UIView *)subView
{
    if(_view!=nil)
    {
        [_view removeFromSuperview];
    }
    _tableView = tableView;
    _view      = view;
    
    initialFrame      = _view.frame;
    defaultViewWidth  = initialFrame.size.width;
    defaultViewHeight = initialFrame.size.height;
    
    UIView *emptyTableHeaderView=[[UIView alloc]initWithFrame:initialFrame];
    _tableView.tableHeaderView=emptyTableHeaderView;
    
    [_tableView addSubview:_view];
    [_tableView addSubview:subView];
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //下拉偏移量|scrollView的Inset距离顶部的值
    if((scrollView.contentOffset.y+scrollView.contentInset.top)<=0)
    {
        CGFloat offsetY=floor(scrollView.contentOffset.y+scrollView.contentInset.top)*-1;
        //动态改变图片的origin
        initialFrame.origin.y = offsetY * -1;
        initialFrame.origin.x = offsetY * -1;
        initialFrame.size.height = defaultViewHeight + offsetY;
        initialFrame.size.width = defaultViewWidth + offsetY*2;

        
        _view.frame=initialFrame;
    }
}

-(void)resizeView
{
    initialFrame.size.width=_tableView.frame.size.width;
    _view.frame=initialFrame;
    
}
@end

2.在控制器中使用如下:

#import "ViewController.h"
#import "JYStretchTableViewHeader.h"
#define StretchHeaderView 200

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic,strong) UITableView              *tableView;
@property (nonatomic,strong) JYStretchTableViewHeader *jyStretchTableViewHeader;
@end

@implementation ViewController

-(UITableView *)tableView
{
    if(!_tableView)
    {
        _tableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStylePlain];
        _tableView.delegate                     = self;
        _tableView.dataSource                   = self;
        _tableView.showsVerticalScrollIndicator = NO;
        [self.view addSubview:_tableView];
    }
    return _tableView;
}
- (void)viewDidLoad
{
    [super viewDidLoad];
    //self.automaticallyAdjustsScrollViewInsets=NO;
    //[self tableView];
    [self initStretchHeader];
}
#pragma mark -stretchHeader
-(void)initStretchHeader
{
    //背景
    UIImageView *bgImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, StretchHeaderView)];
    bgImageView.contentMode=UIViewContentModeScaleAspectFill;
    bgImageView.clipsToBounds=YES;
    bgImageView.image=[UIImage imageWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"123" ofType:@"jpg"]];
    
    //背景之上的内容
    UIView *contentView=[[UIView alloc]initWithFrame:bgImageView.bounds];
    contentView.backgroundColor=[UIColor clearColor];
    
    self.jyStretchTableViewHeader=[JYStretchTableViewHeader new];
    [self.jyStretchTableViewHeader stretchHeaderForTableView:self.tableView withView:bgImageView subViews:contentView];
}
#pragma mark -table delegate
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellId=@"cellId";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellId];
    if(cell==nil)
    {
        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellId];
    }
    cell.textLabel.text=[NSString stringWithFormat:@"第%ld行",indexPath.row];
    return cell;
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.jyStretchTableViewHeader scrollViewDidScroll:scrollView];
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 60;
}

3.实际效果可以把代码敲下来试试看,绝对OK。


你可能感兴趣的:(iOS_下拉图片放大效果)