iOS图片下拉放大/导航栏渐变效果

前言：这一功能是我在写完自定义刷新后想要做的，因为iOS的自定义刷新视图经常用在个人中心（参考微信）和主页面（参考美团、饿了么）上，这些界面的排版，通常顶部都会有bundle图或者背景图，图片下拉时会放大。
这一功能实现起来非常简单，本来是打算写在上一篇文章 iOS自定义简易刷新视图（仿MJRefresh）里的。但是为了方便区分对待，我还是决定单独写一篇文章出来记录它。代码我直接加在了自定义刷新视图的代码中，并且两者互不冲突。

Github:看这里

Untitled.gif

思路整理：
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;
    }
}

iOS图片下拉放大/导航栏渐变效果

推荐阅读更多精彩内容