目标C：如何使用tableview制作导航栏滚动 [英] Objective C: How to make Navigation bar scroll with tableview

问题描述

我的应用程序的单个屏幕中有一个UITableView和一个导航栏。我想导航栏与表格的其余部分一起滚动。

I have a UITableView and a navigation bar in a single screen of my app. I want to navigation bar to be scrolled together with the rest of the table.

注意：我目前正在实现一个UITableView，它被添加为uiviewcontroller的子视图，反过来导航控制器的一部分

Note: I am currently implementing a UITableView that is added as a subview of a uiviewcontroller which is in turn part of a navigation controller

任何人都可以告诉我如何做到这一点吗？

Can anyone advise me on how to do this?

推荐答案

在下面的回答中，我隐藏了真正的导航栏并将其替换为假条。如果您想使用真实的导航栏，代码仍然有效，只需恢复viewWillDisappear中栏的原始位置。

In the following answer I'm hiding the real nav bar and replacing it with a fake bar. If you want to use the real nav bar instead, the code is still valid, just restore the original position of the bar in viewWillDisappear.

隐藏导航控制器栏：

self.navigationController.navigationBar.hidden = YES;

添加顶部栏作为当前控制器视图的子视图。

Add a top bar as a subview of the current controller view.

UIView *headerView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bar.png"]];
[self.view addSubView:headerView];

此时你有一个headerView和一个tableView。保存原始帧：

At this point you have a headerView and a tableView below. Save their original frames:

@property (nonatomic,assign) CGRect initialTableRect;
@property (nonatomic,assign) CGRect initialHeaderRect;

// This is how many pixels you are going to scroll up under the clock bar.
// To scroll your whole headerView, set it to self.headerView.frame.height
@property (nonatomic,assign) NSInteger kHiddenPixels;    

// viewDidLoad
self.initialTableRect = self.tableView.frame;
self.initialHeaderRect = self.headerView.frame;
self.kHiddenPixels = self.headerView.frame.height;

在视图控制器中添加它，它也是你的表委托：

Add this in the view controller, which is also your table delegate:

#pragma mark UIScrollViewDelegateMethods

- (void)scrollViewDidScroll:(UIScrollView *)aScrollView
{
    // 0 at the initial position, negative down, positive up
    CGPoint offset = aScrollView.contentOffset;

    if (offset.y>=0 && offset.y<=kHiddenPixels)
    {
        // move header
        CGRect newRect = self.initialHeaderRect;
        newRect.origin.y -= offset.y;
        self.headerView.frame = newRect;

        // move and resize table
        newRect = self.initialTableRect;
        newRect.origin.y -= offset.y;
        newRect.size.height += offset.y;
        self.tableView.frame = newRect;
    }
    else if (self.headerView.frame.origin.y!=0 || self.headerView.frame.origin.y!=kHiddenPixels)
    {
        // outside the scrolling area but frame is not on 0 or kHiddenPixels,
        // which means we skipped scroll because drag was to fast

        if (offset.y<0){
            // set initial position on header and table
            self.headerView.frame = self.initialHeaderRect;
            self.tableView.frame = self.initialTableRect;
        }
        else if (offset.y>kHiddenPixels)
        {
            // set scrolled up position on header
            CGRect rect = self.initialHeaderRect;
            rect.origin.y = -1*kHiddenPixels;
            self.headerView.frame = rect;

            // set scrolled up position on table            
            rect = self.initialTableRect;
            rect.size.height += kHiddenPixels;
            rect.origin.y -= kHiddenPixels;
            self.tableView.frame = rect;
        }
    }
}

这会检查表格高度和当表格视图滚动时移动顶部栏。由于tableView正在移动以前由顶部栏填充，我也在扩大表格视图的大小。

This checks the table height and moves top bar as the table view scrolls. Since the tableView is moving over the are previously filled by the top bar, I'm also enlarging the size of the table view.

编辑：刚刚上传了在github中实现，顶部条形图为80像素，kHiddenPixels = 35：

edit: just uploaded an implementation in github with a top bar of 80 pixels and kHiddenPixels=35:

可能的增强功能：现在，当tableView的第一行在顶栏下滚动时，顶部栏会在时钟栏下方滚动。如果tableView和顶栏一起滚动直到顶栏消失，那么看起来会更自然，然后让第一行开始在顶栏下滚动。不知道如何做到这一点，可能使用平移手势识别器并禁用表滚动，直到隐藏栏。

A possible enhancement: Right now, as the first row of the tableView scrolls under the top bar, the top bar scrolls below the clock bar. It would look more natural if the tableView and top bar scroll together until the top bar is gone, and then let the 1st row start scrolling under the top bar. Not sure how to do this, maybe with a pan gesture recognizer and disabling table scroll until the bar is hidden.

这篇关于目标C：如何使用tableview制作导航栏滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！