oc开发表头图片下拉放大效果

现在很多app设置了这样的效果,如何实现这一效果呢,我总结了两种方法分享给大家作参考。直接上代码
准备工作:这个效果的实现要借助于滑动视图scrolview的滑动代理方法,所以要先引入
1.创建作为表头放大的图片imageView视图

UIImageView *headImgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 200)];
[headImgView sd_setImageWithURL:[NSURL URLWithString:self.goods.image_default] 
  placeholderImage:[UIImage imageNamed:@"crazy"]];

2.注意,不能把imageview直接作为表头缩放视图,这样会出现图片缩放时表头出现空白或超出现象,需要添加背景视图view作为表头,图片视图添加在背景视图view上。

UIView*headBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, ADS_HEIGHT)];
[headBgView addSubview:headImgView];
//背景view视图作为表头
self.tableView.tableHeaderView = headBgView;

3.在scrolview的代理方法中监测滑动比例缩放图片

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat width = self.view.frame.size.width;
    // 图片宽度
    CGFloat yOffset = scrollView.contentOffset.y;
    // 偏移的y值
    if(yOffset < 0)  {
    CGFloat totalOffset = 200 + ABS(yOffset); // ABS()是对yOffset取绝对值
    CGFloat f = totalOffset / 200; //计算高度缩放的比例
        //拉伸后的图片的frame应该是同比例缩放。
      self.tableView.tableHeaderView.frame =  CGRectMake(- (width *f-width) / 2, yOffset, width * f, totalOffset);
    }

方法二
第三步也可以直接获取scrolView偏移量计算图片缩放

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //获取偏移量
    CGPoint offset = scrollView.contentOffset;
    //判断是否改变
    if (offset.y < 0) {
        CGRect rect = self.tableView.tableHeaderView.frame;
        //我们只需要改变图片的y值和高度即可
        rect.origin.y = offset.y;
        rect.size.height = 200 - offset.y;
        self.tableView.tableHeaderView.frame = rect;
    }
}

写在后面,对于对固定图片大小拉伸缩放存在图片失真现象,推荐阿里云图片处理方案,附上【阿里云图片缩放、裁剪、旋转网址】https://help.aliyun.com/document_detail/44688.html
辛苦了这么久,要不要给点鼓励呢

你,没给赞的休想走

你可能感兴趣的:(oc开发表头图片下拉放大效果)