qq空間頁面的可拉伸效果,主要在于上下滑動的時候,怎么實現(xiàn)導航欄的顏色變化和圖片尺寸的變化

效果展示:

效果圖.gif

控件結(jié)構(gòu)

由下至上 self.view > imageview > tableView

導航欄用的是自定義的,便于實現(xiàn)滑動變色效果, UITableView的headView背景色為透明,以便不遮擋下面的圖片.

核心代碼

滾動代理中實現(xiàn)效果

- (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空間之個性化可拉伸界面