像Instagram的导航栏(iOS 7)

我试图做出同样的影响,因为Instagram的标题。 我怎样才能做到这一点?

我尝试了很多解决scheme。

最好的 – https://github.com/andreamazz/AMScrollingNavbar

但它有一个大问题 – 使用uipangesturerecognizer移动栏。 这对我来说是不好的,因为我想performance出来吧,如果桌子在顶端。

我试图改变这个控件的工作,以滚动查看委托,但发现了很多问题,你有什么想法,他们是如何做到这一点?

instagram主屏幕

你可以在你想要在导航栏上添加效果的课程中使用下面提到的方法。

- (void)scrollViewDidScroll:(UIScrollView *)sender { //Initializing the views and the new frame sizes. UINavigationBar *navbar =self.navigationController.navigationBar; UIView *tableView = self.view; CGRect navBarFrame = self.navigationController.navigationBar.frame; CGRect tableFrame = self.view.frame; //changing the origin.y based on the current scroll view. //Adding +20 for the Status Bar since the offset is tied into that. if (isiOS7) { navBarFrame.origin.y = MIN(0, MAX(-44, (sender.contentOffset.y * -1))) +20 ; tableFrame.origin.y = navBarFrame.origin.y + navBarFrame.size.height; }else{ navBarFrame.origin.y = MIN(0, (sender.contentOffset.y * -1)) +20; tableFrame.origin.y = MIN(0,MAX(-44,(sender.contentOffset.y * -1))) ; } navbar.frame = navBarFrame; tableView.frame = tableFrame; 

}

我发现了解决scheme,就像你说的 – 你必须搞清楚滚动视图的委托,但是在2个小时之后,我已经搞清楚了。 我试图解决的问题是能够像在Instagram中一样持续地运动。

所以,首先检查一下xib设置,它在(0 20,320 85)处有一个标题视图,它位于(0 20,320 548)

xib设置

所以这里是启动后的样子(黄色表格框架): 发射后

这是我想它看起来像下拉(标题框红色)后: 拉下来之后

所以我只是将代码粘贴到评论中,我希望它足够容易理解。

做一个定义

 #define SIGNIFICANT_SCROLLING_DISTANCE 200 

创build两个属性

 @property (nonatomic) CGFloat lastScrollViewOffsetY; @property (nonatomic) CGFloat distancePulledDownwards; 

scrollViewDidScroll委托方法添加以下实现

 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // store current scroll view frame as we will change it later on and set it // back to the scroll view in the very end CGRect currentScrollViewRect = scrollView.frame; // same with the content offset CGPoint currentScrollViewOffset = scrollView.contentOffset; CGFloat offsetShiftY = self.lastScrollViewOffsetY - scrollView.contentOffset.y; if (offsetShiftY > 0) { // pulling downwards // keep trrack of the distance that we pulled downwards self.distancePulledDownwards += offsetShiftY; // header opens (table view shifts its frame down) in two cases: // 1. contentOffset.y<0 // 2. scrolled downwards a significant amount or header is already open // but in both cases we have to make sure that it doesn't open further than we want it to CGFloat wantedOriginY = currentScrollViewRect.origin.y; if ((scrollView.contentOffset.y<0) || (self.distancePulledDownwards > SIGNIFICANT_SCROLLING_DISTANCE) || (currentScrollViewRect.origin.y>20)){ // shift scroll views frame by offset shift wantedOriginY = currentScrollViewRect.origin.y + offsetShiftY; // compensate that shift by moving content offset back currentScrollViewOffset.y += (wantedOriginY <= 105) ? offsetShiftY : 0; } currentScrollViewRect.origin.y = (wantedOriginY <= 105) ? wantedOriginY : 105; } else { // pulling upwards self.distancePulledDownwards = 0; // header closes (table view shifts its frame up) in one case: when it is open =) (and contentOffset.y>0 to eliminate closing on bounce) if (scrollView.contentOffset.y > 0) { CGFloat wantedOriginY = currentScrollViewRect.origin.y + offsetShiftY; currentScrollViewRect.origin.y = (wantedOriginY >= 20) ? wantedOriginY : 20; currentScrollViewOffset.y += (wantedOriginY >= 20) ? offsetShiftY : 0; } } // set the changed (if it was changed at all) frame to the scroll view [scrollView setFrame:currentScrollViewRect]; // correct offset using a special trick // it ensures that scrollViewDidScroll: won't be called on setting the offset scrollView.delegate = nil; [scrollView setContentOffset:currentScrollViewOffset]; scrollView.delegate = self; // and finally remember the current offset as the last self.lastScrollViewOffsetY = scrollView.contentOffset.y; } 

并享受你的顺利滚动在屏幕上的表)=)这也可以修改,你可以添加和调整一个标题,使其基本上是相同的Instagram的一个。

使用AMScrollingNavbar与您的tableViewController并重写willDisplayCell方法显示栏如果表滚动到顶部:

 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { [self showNavbar]; } } 

使用该库,将其添加到您的视图控制器:

 - (BOOL)scrollViewShouldScrollToTop { [self showNavbar]; return YES; }