QQ空间之个性化可拉伸界面

qq空间页面的可拉伸效果,主要在于上下滑动的时候,怎么实现导航栏的颜色变化和图片尺寸的变化

效果展示:

效果图.gif

控件结构

由下至上 self.view > imageview > tableView

导航栏用的是自定义的,便于实现滑动变色效果, UITableView的headView背景色为透明,以便不遮挡下面的图片.

核心代码

滚动代理中实现效果

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    //图片原始尺寸
    CGRect originRect = CGRectMake(0, 0, kScreenWidth, 275);
    
    CGFloat yOffSet = scrollView.contentOffset.y;

    //当滑动到导航栏之前
    if (yOffSet < headHeight) {
        
        CGFloat colorAlpha = yOffSet/headHeight;
        _navBar.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:colorAlpha];
        _navBar.titleColor = [UIColor whiteColor];
        
    }else{  //超过导航栏底部
        
        _navBar.backgroundColor = [UIColor whiteColor];
        _navBar.titleColor = [UIColor blackColor];
    }
    
    //手指向上滑动,图片上移
    if (yOffSet > 0) {
        
            CGRect frame = originRect;
            frame.origin.y = originRect.origin.y - yOffSet;
            _topImageView.frame =  frame;
    
    }else{  //手指向下滑动,图片放大
        
            CGRect frame = originRect;
            frame.size.height = originRect.size.height - yOffSet;
            frame.size.width =  frame.size.height * kScreenWidth/275;
            frame.origin.x =  originRect.origin.x - (frame.size.width - originRect.size.width)/2;
              _topImageView.frame = frame;
    }
}

代码已上传github:QQ空间之个性化可拉伸界面