类似 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?

推荐答案

我找到了解决方案，就像你说的那样 - 你必须稍微弄乱滚动视图委托，但大约 2 小时后我就搞定了想通了.我试图解决的问题是能够像在 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 委托方法添加以下实现

Than add the following implementation for scrollViewDidScroll delegate method

- (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屋！