图片下拉放大

图片放大流程

下拉

• 隐藏导航栏
• 状态栏变白色
• 下拉放大，图片高度增大
  • 图片内容模式UIViewContentModeScaleAspectFill
  • 必须裁剪clipsToBounds

上移

• 图片变模糊，导航栏逐渐显示
• 状态栏变黑色

核心代码，监听scrollView的滚动

#pragma mark - 监听scrollView的滚动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 移动的距离
    CGFloat distance = scrollView.contentOffset.y + scrollView.contentInset.top;
    
    // 都是整体移动
    if (distance <= 0) { // 向下拉放大
        // 图片高度增加
        _headerView.hm_y = 0;
        _headerView.hm_height = HeaderHeight - distance;
        // 下面改过它的alpha覆盖设置
        _headerImageView.alpha = 1;
        
    } else { // 向上推
        // 整体移动
        _headerView.hm_height = HeaderHeight;
        
        // 最多向上滚动的距离
        CGFloat min = HeaderHeight - 64;
        _headerView.hm_y = -MIN(distance, min);
        
        // 逐渐变浅，progress为1时彻底隐藏，显示底部背景颜色
        CGFloat progress = 1 - distance / min;
        LxDBAnyVar(progress);
        // 当distance / min == 1, _headerImageView隐藏不可见
        _headerImageView.alpha = progress;
        
        // 根据透明度设置状态栏颜色
        _statusBarStyle = (progress < 0.5) ? UIStatusBarStyleDefault : UIStatusBarStyleLightContent;
        [self setNeedsStatusBarAppearanceUpdate];
    }
    
    // 分割线的位置
    _lineView.hm_y = _headerView.hm_height - _lineView.hm_height;
    // 图像高度
    _headerImageView.hm_height = _headerView.hm_height;
    // 状态栏颜色
}

注意点总结：

1. 图片不是作为tableView的tableHeaderView;和tableView同级
   有NAV控制器就会 自动调整滚动视图的间距

• 在ViewController 中加上一个NavC会自动调整tableView的contentInset
  • 显示了导航栏，tableView的内边距增加64
  • 隐藏导航栏，tableView的内边距增加20
  • self.automaticallyAdjustsScrollViewInsets = NO; // 取消自动调整滚动视图的间距
• 隐藏了导航栏，从边缘侧拉返回(商业级应用必备)
• 返回显示上一个控制的navigationBar，显示时导航栏叠过来了，效果不好→设置显示navigationBar时的动画
• 设置当前控制的状态栏

 // 只能设置当前控制的状态栏
 - (UIStatusBarStyle)preferredStatusBarStyle
{
    return _statusBarStyle;
}

加载大图像

1. SDWebImage加载图像，不会显示网络加载指示器

   • SDWebImage要显示指示器，需要专门写个分类
   • - (void)sd_setImageWithURL:(NSURL *)url;

2. AFN也可以加载图片

   • [headerImageView setImageWithURL:url];
   • pod导入打开use_frameworks!,可以用@import方式引入
   • 默认不显示指示器，要在appDelegate中设置
     • [AFNetworkActivityIndicatorManager sharedManager].enabled = YES; // 设置网络加载指示器
   • 图片太大AFN可能不会缓存(下一次进入还是要网络加载)，使用系统本身缓存，效果不好

3. YYWebImgae

   • 只能使用#import导入，好处无论哪种方式都不需要修改源文件
   • [headerImageView yy_setImageWithURL:url options:YYWebImageOptionShowNetworkActivity];
   • 设置options可以显示指示器
   • 缓存效果好

注意设置ATS访问HTTP

    NSAppTransportSecurity
    
        NSAllowsArbitraryLoads
        
    

小细节

• 上移图片逐渐变淡，固定，显示背景颜色

  • 上移imageView逐渐变淡，露出背景颜色；这样效果的应用都没有 导航栏；做出类似导航栏效果
  • 导航栏隐藏起来后，就没有导航栏什么事情了
  • 返回按钮是自己添加的

• 添加分割线

  • 一个像素点的线条：代表尺寸375x1的图片
  • 6p中一个点代表3个像素；1 / scale的像素代表 尺寸为1的点
  • 我们设置的frame\height都是点坐标，要转换到像素坐标

• 状态栏

  • 往上移动越来越浅，状态栏变黑
  • 要主动更新状态栏(需要statusBar外观更新)
    • [self setNeedsStatusBarAppearanceUpdate];

• 侧拉返回上一控制器

  • 用到运行时
  • 在viewWillAppear:方法中显示导航栏，必须设置动画[self.navigationController setNavigationBarHidden:NO animated:YES]