前言：这一功能是我在写完自定义刷新后想要做的，因为iOS的自定义刷新视图经常用在个人中心（参考微信）和主页面（参考美团、饿了么）上，这些界面的排版，通常顶部都会有bundle图或者背景图，图片下拉时会放大。
这一功能实现起来非常简单，本来是打算写在上一篇文章 iOS自定义简易刷新视图（仿MJRefresh） 里的。但是为了方便区分对待，我还是决定单独写一篇文章出来记录它。代码我直接加在了自定义刷新视图的代码中，并且两者互不冲突。
Github:看这里
思路整理：
1 . 添加控件：
@interface MyRefreshViewController ()<UITableViewDelegate,UITableViewDataSource>
/**
数据列表
*/
@property (nonatomic, strong) UITableView *tableView;
/**
刷新视图
*/
@property (nonatomic, strong) MyRefreshView *refreshView;
/**
数据源数组
*/
@property (nonatomic, strong) NSMutableArray *dataArray;
/**
头部视图
*/
@property (nonatomic, strong) UIImageView *headImageView;
@end
在tableView的顶部添加可放大图片首先我们可能想到的是为tableView设置头部视图
self.tableView.tableHeaderView = headView;
但是简单的分析一下会发现，这种方法是行不通的的也是不方便的（本小白暂时是这样认为的，有好的解决方法欢迎指导😆）。
（1）设置为headView之后不方便我们动态改变顶部视图的大小。
（2）设置为headView仅适用于图片放置在tableView上的情况，如果界面布局不包含tableView显然不合适。
所以在这里我们直接添加imageView到界面顶部即可，如果首页有bundle图，就将bundle图直接放置在顶部位置。这里我是将图片放置在视图的顶部。y坐标设为负数便于拉伸时图片有变化余地。
-(UIImageView *)headImageView{
if (!_headImageView) {
_headImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, -30, KScreenWidth, 180)];
[_headImageView sd_setImageWithURL:[NSURL URLWithString:ImgUrl]];
}
return _headImageView;
}
2 . 构造视图
为tableView添加headView。再将背景图或bundle图添加到视图顶部，覆盖在headView上。
- (void)createUI{
self.view.backgroundColor = [UIColor grayColor];
//默认值为yes，当视图中包含scrollView时，系统会自动调整scrollView的坐标，这里设置为NO
self.automaticallyAdjustsScrollViewInsets = NO;
self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, KScreenHeight) style:UITableViewStylePlain];
self.tableView.backgroundColor = [UIColor grayColor];
self.tableView.delegate = self;
self.tableView.dataSource = self;
[self.view addSubview:self.tableView];
[self setExtraCellLineHidden:self.tableView];
UIView *headView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, 150)];
self.tableView.tableHeaderView = headView;
[self.view addSubview:self.headImageView];
//添加自定义刷新视图，不需要自定义刷新的去掉这两行代码
_refreshView = [MyRefreshView refreshViewWithScrollView:self.tableView];
[self.view addSubview:_refreshView];
}
3 . 实现交互
这里我们通过scrollView的偏移值contentOffset来动态改变图片的坐标和大小，从而实现下拉放大的效果。
当scrollView往下偏移时，改变imageView的大小，保持坐标不变；
当scrollView往上便宜时，改变imageView的坐标，保持大小不变；
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView != self.tableView) {
return;
}
CGFloat y = scrollView.contentOffset.y;
if (y < 0) {
CGRect rect = _headImageView.frame;
rect.origin.y = -30;
rect.size.height = 180-y;
rect.size.width = KScreenWidth*(rect.size.height/180);
rect.origin.x = -(rect.size.width-KScreenWidth)/2.0;
_headImageView.frame = rect;
NSLog(@"height:%lf,width:%lf",_headImageView.frame.size.height,_headImageView.frame.size.width);
}else{
CGRect rect = _headImageView.frame;
rect.origin.y = -30-y;
rect.size.height = 180;
rect.size.width = KScreenWidth;
_headImageView.frame = rect;
}
}
4 . 导航栏渐变效果
导航栏渐变效果非常简单，可以使用系统原声导航栏，也可以自定义导航栏。实现原理就是根据scrollView偏移值动态改变视图的透明度。
//添加观察者，用来实现导航栏渐变效果
[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
if ([keyPath isEqualToString:@"contentOffset"]) {
CGFloat y = [change[@"new"] CGPointValue].y;
CGFloat alpha = 0;
if (y > 200) {
alpha = 1.0;
}else if (y > 0){
alpha = y/200.0;
}
self.navigationController.navigationBar.alpha = alpha;
}
}
