工程中要實(shí)現(xiàn)UITableView 頭部圖片下拉放大效果具篇，實(shí)現(xiàn)了以后想把過程記錄下來(lái)宏胯。
基本思路：
我是將頭部上面的圖片視圖放在UITableView 的backgroundView中犁柜，當(dāng)視圖拖動(dòng)的時(shí)候改變頭部圖片的fream就可以了凸郑。
為了以后直接使用剂习，我就繼承了UITableView，并通過擴(kuò)展屬性的方法來(lái)實(shí)現(xiàn)頭部圖片下拉放大的效果穷吮，下面來(lái)看看具體實(shí)現(xiàn)過程。
新建了YMTableView對(duì)象繼承于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
{
//通過圖片的鏈接來(lái)實(shí)例化對(duì)象
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
