仿iOS手机QQ空间的导航样式

2016-03-03  本文已影响1666人  请叫我平爷

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的设置方法一致。

上一篇下一篇

猜你喜欢

热点阅读