qq空間頁面的可拉伸效果,主要在于上下滑動的時候,怎么實現(xiàn)導(dǎo)航欄的顏色變化和圖片尺寸的變化
效果展示:
效果圖.gif
控件結(jié)構(gòu)
由下至上 self.view > imageview > tableView
導(dǎo)航欄用的是自定義的,便于實現(xiàn)滑動變色效果, UITableView的headView背景色為透明,以便不遮擋下面的圖片.
核心代碼
滾動代理中實現(xiàn)效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//圖片原始尺寸
CGRect originRect = CGRectMake(0, 0, kScreenWidth, 275);
CGFloat yOffSet = scrollView.contentOffset.y;
//當(dāng)滑動到導(dǎo)航欄之前
if (yOffSet < headHeight) {
CGFloat colorAlpha = yOffSet/headHeight;
_navBar.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:colorAlpha];
_navBar.titleColor = [UIColor whiteColor];
}else{ //超過導(dǎo)航欄底部
_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空間之個性化可拉伸界面
