简单实现下拉图片放大② - 单张图放大

dahai.png

实现细节 :

• 全屏手势的pop返回
• 下拉放大
• 上滑图片渐变消失
• 状态栏的颜色根据图片alpha改变

上接 :
简单实现下拉图片放大① - 全屏手势
简单实现下拉图片放大② - 单张图放大
下接 :
简单实现下拉图片放大③ - 定时器轮播图
简单实现下拉图片放大④ + pageControl指示器

github地址点我

Untitled3.gif

基础控制器选择 viewController

① 隐藏导航栏

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:YES];
}

• 添加头部的view以及图片 | 注意点及解释说明

//添加头部的view 以及 图片
- (void)prepareHeader {
    _header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.hm_width, kHeaderHeight)];
    _header.backgroundColor = [UIColor hm_colorWithHex:0xF8F8F8];
    [self.view addSubview:_header];
    
    _imagView = [[UIImageView alloc] initWithFrame:_header.bounds];
    _imagView.image = [UIImage imageNamed:@"dahai"];
    [_imagView setContentMode:UIViewContentModeScaleAspectFill];
    _imagView.layer.masksToBounds = YES;
    [_header addSubview:_imagView];
    
    CGFloat lineH = 1 / [UIScreen mainScreen].scale;
    _line = [[UIView alloc] initWithFrame:CGRectMake(0, _header.hm_height, _header.hm_width, lineH)];
    _line.backgroundColor = [UIColor lightGrayColor];
    [_header addSubview:_line];
}

注意点及解释说明 :

• _header 必不可少,因为图片消失时显示的navigationbar全靠它了
• 伪装navigationController下面的1个像素高度的线

//这样是不是足够漫天过海了? 这特效应该不止5毛吧..
_line = [[UIView alloc] initWithFrame:CGRectMake(0, _header.hm_height, _header.hm_width, lineH)];

• 设置图片模式 防止拉伸变形

[_imagView setContentMode:UIViewContentModeScaleAspectFill];

• 添加_tableView | 注意点及解释说明

- (void)prepareTableView {
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.hm_width, self.view.hm_height)];
    _tableView.dataSource = self;
    _tableView.delegate =self;
    _tableView.contentInset = UIEdgeInsetsMake(kHeaderHeight, 0, 0, 0);
    [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:CELLID];
    [self.view addSubview:_tableView];
}

注意点及解释说明 :
基础代码 有问题欢迎留言

• 核心代码 | 注意点及解释说明

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat offset = scrollView.contentOffset.y + kHeaderHeight;
    if (offset < 0) {
        _imagView.alpha = 1;
        _header.hm_y = 0;
        _header.hm_height = kHeaderHeight - offset;
    }else{
        _imagView.alpha = 1;
        _header.hm_height = kHeaderHeight;
        CGFloat minOffset = kHeaderHeight - 64;
        _header.hm_y = minOffset > offset ? -offset : -minOffset;
        float progress = 1 - (offset / minOffset);
        _imagView.alpha = progress;
        _statusBarStyle = progress > 0.5 ? UIStatusBarStyleLightContent : UIStatusBarStyleDefault;
        [self.navigationController setNeedsStatusBarAppearanceUpdate];
    }
    _line.hm_y = _header.hm_height;
    _imagView.hm_height = _header.hm_height;
}
- (UIStatusBarStyle)preferredStatusBarStyle {
    return _statusBarStyle;
}

注意点及解释说明 :

• 使其初始offset为0 以0为节点 便于计算

CGFloat offset = scrollView.contentOffset.y + kHeaderHeight;

• 放大的代码
  因为设置了拉伸效果 所以只改变高度就能实现放大不变形

_header.hm_height = kHeaderHeight - offset;

• 上滑限定到minOffset 并到此图片渐变为0

CGFloat minOffset = kHeaderHeight - 64; 
_header.hm_y = minOffset > offset ? -offset : -minOffset; 
float progress = 1 - (offset / minOffset); 
_imagView.alpha = progress;

• 三目运算当透明度小于0.5时 状态栏的颜色为黑
  更新方法一定要加!!!!

_statusBarStyle = progress > 0.5 ? UIStatusBarStyleLightContent : UIStatusBarStyleDefault;
 [self.navigationController setNeedsStatusBarAppearanceUpdate];