仿iOS手机QQ空间的导航样式
iOS手机QQ空间导航样式是,进入界面时,没有导航栏,随着界面的滑动,滑动到一定位置的时候,会出现导航条,而且,按钮的位置不变,一直在界面的顶部。
也就是要导航的背景在进入界面的时候隐藏,滑动到一定位置的时候,导航的背景出现,下拉的时候,头部视图跟着放大
<一>、tableView上加入该样式
1、设置好导航的标题、左右边按钮
2、在viewDidLoad中得到self.navigationController.navigationBar.subviews中的_UINavigationBarBackground,并设置为透明,这样就能在刚进入界面的时候没有显示导航的背景色
for (UIView *view in self.navigationController.navigationBar.subviews) {
if([view isKindOfClass:NSClassFromString(@"_UINavigationBarBackground")])
self.navigationBgView=view;
}
self.navigationBgView.hidden=YES;
3、设置tableView,tableView的坐标需要注意下,不同的系统,默认的坐标初始位置不同,需已屏幕最左上角为原点。还需要注意,需要设置下tableView的tableHeaderView,heardView需要与topView的大小一致,占住topView显示的坑,这样不会让topView挡住tableView。
4、设置好topView,即进入界面时需要显示的头部view。
5、由于UITableView是继承与UIScrollView,所以当tableView滑动时会触发scrollViewDidScroll方法,在scrollViewDidScroll方法中,根据坐标设置好self.navigationBgView的出现与隐藏,以及设置好topView根据拉伸的力度设置好topView的frame。
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView.contentOffset.y<self.topView.frame.size.height-64-64) {
[UIView animateWithDuration:0.2 animations:^{
self.bgView.hidden=YES;
}];
}
else{
[UIView animateWithDuration:0.2 animations:^{
self.bgView.hidden=NO;
}];
}
CGRect f = self.topView.frame;
f.size.width = self.backTableView.frame.size.width;
self.topView.frame = f;
if (scrollView.contentOffset.y<-64) {
CGFloat offset = (scrollView.contentOffset.y + scrollView.contentInset.top) * -1;
CGRect initFrame;
initFrame.origin.x=- offset /2;
initFrame.origin.y=- offset;
initFrame.size.width=self.backTableView.frame.size.width+offset;
initFrame.size.height=200+offset;
self.topView.frame=initFrame;
}
<二>scrollView设置该样式
1、设置好导航的标题、左右边按钮
2、在viewDidLoad中得到self.navigationController.navigationBar.subviews中的_UINavigationBarBackground,并设置为透明,这样就能在刚进入界面的时候没有显示导航的背景色
for (UIView *view in self.navigationController.navigationBar.subviews) {
if([view isKindOfClass:NSClassFromString(@"_UINavigationBarBackground")])
self.navigationBgView=view;
}
self.navigationBgView.hidden=YES;
3、设置好UIScrollView,UIScrollView的坐标需要注意下,不同的系统,默认的坐标初始位置不同,需已屏幕最左上角为原点。scrollView的下面的布局需要注意一下坐标问题。
4、设置好topView,即进入界面时需要显示的头部view。
5、在scrollViewDidScroll方法中计算好self.navigationBgView的隐藏与出现,以及设置好topView根据拉伸的力度设置好topView的frame。
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView.contentOffset.y<topView.frame.size.height-64-64) {
[UIView animateWithDuration:0.2 animations:^{
bgView.hidden=YES;
}];
}
else{
[UIView animateWithDuration:0.2 animations:^{
bgView.hidden=NO;
}];
}
CGRect f = topView.frame;
f.size.width = scroll.frame.size.width;
topView.frame = f;
if (scrollView.contentOffset.y<-64) {
CGFloat offset = (scrollView.contentOffset.y + scrollView.contentInset.top) * -1;
CGRect initFrame;
initFrame.origin.x=- offset /2;
initFrame.origin.y=- offset;
initFrame.size.width=scroll.frame.size.width+offset;
initFrame.size.height=200+offset;
topView.frame=initFrame;
}
}
scrollView的设置方法大致与tableView的设置方法一致。