iOS UITableView 头部图片下拉放大效果

工程中要实现UITableView 头部图片下拉放大效果，实现了以后想把过程记录下来。

基本思路：
我是将头部上面的图片视图放在UITableView 的backgroundView中，当视图拖动的时候改变头部图片的fream就可以了。

为了以后直接使用，我就继承了UITableView，并通过扩展属性的方法来实现头部图片下拉放大的效果，下面来看看具体实现过程。

新建了YMTableView对象继承于UITableView，并添加了imgView和height属性，还为其添加了三个实例化的方法

.h 文件
#import <UIKit/UIKit.h>

@interface YMTableView : UITableView <UIScrollViewDelegate>

/**
 头部可缩放的图片
 */
@property (nonatomic,strong) UIImageView * imgView;


/**
 头部视图初始高度
 */
@property (nonatomic,assign)CGFloat height;


/**
 通过图片和高度
 */
-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style andImage:(UIImage *)img andHeight:(CGFloat)height;

/**
 通过图片路径和高度
 */
-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style andImageUrl:(NSString *)imgUrl andHeight:(CGFloat)height;

/**
 通过图片名称
 */
-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style andImageName:(NSString *)imgName andHeight:(CGFloat)height;

@end

.m文件
#import "YMTableView.h"


@interface YMTableView ()
/**
 头部可缩放的图片
 */
@property (nonatomic,strong)UIImage * img;


/*
 图片的url链接
 */
@property (nonatomic,strong)NSString * imgUrl;


/*
 图片的名称
 */
@property (nonatomic,strong)NSString * imgName;
@end


@implementation YMTableView
{
    
    CGFloat contentOffSet;
}



-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style andImage:(UIImage *)img andHeight:(CGFloat)height
{
    self = [super initWithFrame:frame style:style];
    if (self) {
        self.height = height;
        self.img = img;
        
        [self createHeaderView];
    }
    return self;
}

/**
 通过图片路径和高度
 */
-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style andImageUrl:(NSString *)imgUrl andHeight:(CGFloat)height
{
    self = [super initWithFrame:frame style:style];
    if (self) {
        self.height = height;
        self.imgUrl = imgUrl;
        
        [self createHeaderView];
    }
    return self;
    
}


/**
 通过图片名称
 */
-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style andImageName:(NSString *)imgName andHeight:(CGFloat)height
{
    self = [super initWithFrame:frame style:style];
    if (self) {
        self.height = height;
        self.imgName = imgName;
        
        [self createHeaderView];
    }
    return self;
}


-(void)createHeaderView
{
    self.backgroundView = [[UIView alloc] init];
    if (_img && _height) {
        _imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, _height)];
       //图片的contentModel 一定要设置成UIViewContentModeScaleAspectFill
        _imgView.contentMode = UIViewContentModeScaleAspectFill;
        _imgView.image = _img;
        [self.backgroundView addSubview:_imgView];
        
        //给相同高度的tableHeaderView  ，避免不显示头部视图，如果不添加tableHeaderView ，下拉的时候才能看见头部的图片
        UIView * headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, _height)];
        headerView.backgroundColor = [UIColor colorWithWhite:1 alpha:0];
        self.tableHeaderView = headerView;
        
    }
    
}


-(void)setHeight:(CGFloat)height
{
    if (height) {
        _height = height;
    }
}

-(void)setImgUrl:(NSString *)imgUrl
{
    if (imgUrl) {
        
       UIImage *  img = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:imgUrl]]];
        _img = img;
        
    }
}


-(void)setImgName:(NSString *)imgName
{
    if (imgName) {
        UIImage *img = [UIImage imageNamed:imgName];
        _img = img;
    }
}

-(void)setImg:(UIImage *)img
{
    if (img) {
        _img = img;
    }
}

@end

这个我自定义的一个TableView,下面看看YMTableView的使用方法

#import "ViewController.h"
//导入头文件
#import "YMTableView.h"
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UIScrollViewDelegate>

@end

@implementation ViewController
{
    YMTableView  * mytabView;  
    CGFloat contentOffSet;//记录视图的偏移位置
}

- (void)viewDidLoad {
    [super viewDidLoad];

    [self creatTableView];
}

-(void)creatTableView
{

  //通过图片的链接来实例化对象
    mytabView = [[YMTableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain andImageUrl:@"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3637379975,3338374522&fm=21&gp=0.jpg" andHeight:200];
    mytabView.delegate = self;
    mytabView.dataSource = self;

   //如果头部视图还有其他视图的话，比如设置按钮之类的还可以用下面的方法添加
#if 1
    UIView * headeView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,mytabView.frame.size.width, 200)];
    
    headeView.backgroundColor = [UIColor colorWithWhite:.5 alpha:0];
    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(8, 28, 60, 30);
    [button setTitleColor:[UIColor orangeColor] forState:0];
    [button setTitle:@"设置" forState:0];
    [headeView addSubview:button];
    
    [mytabView.imgView addSubview:headeView];
    
#endif

    [self.view addSubview:mytabView];
  //具体其它渲染cell的代码没有影响，就不写了
  
    
}

#pragma mark - ScrollView delegate

//*实现视图拖动时候的方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    contentOffSet = scrollView.contentOffset.y;
    CGRect oldFream = mytabView.imgView.frame;
    if(contentOffSet <= mytabView.height){
        oldFream.size.height = mytabView.height-contentOffSet;
        mytabView.imgView.frame = oldFream;
    }
}


@end

下面看看效果

效果图.gif