仿照QQ空间头部下拉效果

简介

最近公司项目要求 写一个个人主页 效果类似QQ空间效果

效果图如下

原理

利用 -(void)scrollViewDidScroll:(UIScrollView *)scrollView 这一方法 改变tableviewHeaderView上控件的frame
代码如下

 CGFloat contentY = scrollView.contentOffset.y;
    CGFloat alpha = contentY / 200.0f;
    _backView.backgroundColor = RGB(255, 217, 70, alpha);
    
    if (contentY < -kBarHeight) {
        //增加的高度
        CGFloat addHeight = - (contentY + kBarHeight);
        //改变系数
        CGFloat scale = (HeaderHeight + addHeight) / HeaderHeight;
        //改变frame
        CGRect headerFrame = CGRectMake(0, -addHeight, kWidth, HeaderHeight + addHeight);
        self.headerView.frame = headerFrame;
        
        
        CGRect headerImgFrame = CGRectMake(-(kWidth * scale - kWidth)/2.0f, 0, kWidth * scale, HeaderHeight + addHeight);
        
        self.headerBackImg.frame = headerImgFrame;
        
        
        CGRect avatarFrame = CGRectMake(15, self.headerView.bounds.size.height - 80 - 15, 80 , 80);
        self.avatarImg.frame = avatarFrame;
        
        
    }

这样实现了头部的拉伸

github地址: