工程中要實(shí)現(xiàn)UITableView 頭部圖片下拉放大效果，實(shí)現(xiàn)了以后想把過程記錄下來。

基本思路：
我是將頭部上面的圖片視圖放在UITableView 的backgroundView中，當(dāng)視圖拖動(dòng)的時(shí)候改變頭部圖片的fream就可以了。

為了以后直接使用，我就繼承了UITableView，并通過擴(kuò)展屬性的方法來實(shí)現(xiàn)頭部圖片下拉放大的效果，下面來看看具體實(shí)現(xiàn)過程。

新建了YMTableView對象繼承于UITableView，并添加了imgView和height屬性，還為其添加了三個(gè)實(shí)例化的方法

.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 一定要設(shè)置成UIViewContentModeScaleAspectFill
        _imgView.contentMode = UIViewContentModeScaleAspectFill;
        _imgView.image = _img;
        [self.backgroundView addSubview:_imgView];
        
        //給相同高度的tableHeaderView  ，避免不顯示頭部視圖，如果不添加tableHeaderView ，下拉的時(shí)候才能看見頭部的圖片
        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

這個(gè)我自定義的一個(gè)TableView,下面看看YMTableView的使用方法

#import "ViewController.h"
//導(dǎo)入頭文件
#import "YMTableView.h"
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UIScrollViewDelegate>

@end

@implementation ViewController
{
    YMTableView  * mytabView;  
    CGFloat contentOffSet;//記錄視圖的偏移位置
}

- (void)viewDidLoad {
    [super viewDidLoad];

    [self creatTableView];
}

-(void)creatTableView
{

  //通過圖片的鏈接來實(shí)例化對象
    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;

   //如果頭部視圖還有其他視圖的話，比如設(shè)置按鈕之類的還可以用下面的方法添加
#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:@"設(shè)置" forState:0];
    [headeView addSubview:button];
    
    [mytabView.imgView addSubview:headeView];
    
#endif

    [self.view addSubview:mytabView];
  //具體其它渲染cell的代碼沒有影響，就不寫了
  
    
}

#pragma mark - ScrollView delegate

//*實(shí)現(xiàn)視圖拖動(dòng)時(shí)候的方法
- (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