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空间之个性化可拉伸界面
