图片下拉放大

图片放大流程

下拉
  • 隐藏导航栏
  • 状态栏变白色
  • 下拉放大,图片高度增大
    • 图片内容模式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]

你可能感兴趣的:(图片下拉放大)