Instagram式导航栏（iOS 7） [英] Instagram-like navigation bar (iOS 7)

问题描述

我正试图产生同样的效果，因为Instagram在标题中有。我怎么能这样做？

I'm trying to make same affect, as instagram has in their header. How can I do this?

我尝试了很多解决方案。

I tried a lot of solutions.

最好 - https://github.com/andreamazz/AMScrollingNavbar

但是它有一个大问题 - 使用uipangesturerecognizer移动吧。这对我来说很糟糕，因为如果桌子位于顶部，我想要显示条形图。

But it has one big problem - it's moving bar using uipangesturerecognizer. It's bad for me, because I want to show bar, if table is at the top.

我试图改变这个控件的工作来滚动视图委托，但是发现了很多问题，有什么想法，他们是怎么做到的？

I tried to change work of this control to scroll view delegate, but found a lot of problems with it, have you any ideas, how they made this?

推荐答案

我找到了解决方案，就像你说的那样 - 你必须把滚动视图委托给一点点，但是经过两个小时后我才知道这一切出。我试图解决的问题是能够像在Instagram中那样在一个连续动作中获得标题。

I found THE solution, just like you said - you have to mess around with the scroll view delegate a little bit, but after some 2 hours I had it all figured out. The problem i was trying to solve was to be able to get the header out in one continuous motion just like you do in Instagram.

所以，首先查看xib设置，它有一个标题视图（0 20,320 85），它位于（0 20,320 548）表视图后面

So, first check out the xib setup, it has a header view at (0 20, 320 85), which is right behind a table view at (0 20, 320 548)

所以这是启动后的样子（表格视图）黄色框架）：

So here is what it looks like after launch (table view frame in yellow):

这是我想要它在拉下后的样子（标题框架为红色）：

This is what i want it to look like after pulling down (header frame in red):

所以我只是粘贴带注释的代码，我希望它足够容易理解。

So I'll just paste the code with comments, i hope its understandable enough.

定义

#define SIGNIFICANT_SCROLLING_DISTANCE 200

创建两个属性

@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相同。

And enjoy your smooth table scrolling back and forth on the screen =) This can also be modified, you can add and resize a header so that it is basically identical to the Instagram one.

这篇关于Instagram式导航栏（iOS 7）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！