目标C:如何使用tableview制作导航栏滚动

Question

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

注意:我目前正在实现一个UITableView,它被添加为uiviewcontroller的子视图,uiviewcontroller又是导航控制器的一部分

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

Answer 1

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

隐藏导航控制器栏:

self.navigationController.navigationBar.hidden = YES;

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

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

此时,您在下面有一个headerView和一个tableView.保存原始帧:

@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;

在视图控制器中添加它,它也是您的表委托:

#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正在移动到之前由顶部栏填充的,所以我也在扩大表格视图的大小.

编辑:刚刚在github上传了一个实现,顶部条形为80像素,kHiddenPixels = 35:

一个可能的增强:眼下,随着滚动的tableView的第一行顶栏下,时钟栏下方顶栏滚动.如果tableView和顶栏一起滚动直到顶栏消失,那么看起来会更自然,然后让第一行开始在顶栏下滚动.不确定如何执行此操作,可能使用平移手势识别器并禁用表滚动,直到隐藏栏.