iOS下简单实现滑动导航条

功能介绍

最近在做一款ios的app，其中有一个页面需要分成三个版块，版块之间可以通过左右滑动来进行切换，也可以通过点击上方的按钮来切换，好像在android中可以用过ViewPager + Fragment来实现。界面大概就是这个样子，这里我以知乎客户端的发现页面为例：

 

 

其中整个页面分为三个小的版块，分别"推荐"，"热门"以及"收藏"。点击上方的文字后，下方的页面会切换到对应的版块，同时文字下方的蓝色导航条也会随着界面的切换跟着滑动。另外，当我们不通过按钮切换，用手势在页面上左右滑动时，导航条也会跟着一起滑动。功能大概就是这个样子。

原理

下面简单分析下实现原理。首先在"发现"的下方应该有UIView，在UIView中放有3个UIButton。至于文字下方的导航条，可以用UILabel来做，宽度等于一个按钮的宽度，并将背景色改为蓝色。导航条下方的页面可以通过手势来左右滑动，首先想到的应该就是，这是一个UIScrollView，我们需要将scrollView的contentSize属性设置成三个页面宽度的大小，否则会无法滑动页面。然后在scrollView放上三个版块的页面，这个根据自身的业务情况而定，一般UITableView用得比较多。最后，怎样才能让页面滑动的时候导航条也跟着移动的？在Android中，一般的做法就是给scrollView中添加一个事件监听器，用来监听滑动事件，并在事件处理函数中执行响应的逻辑。在ios中没有事件监听这个概念，我们可以为scrollView设置它的代理，并在代理类中覆盖掉该方法：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

设置了代理类后，代理类其实就是帮我们注册了相应的回调函数，每次scrollView只要有细微的滑动，该方法就会被调用。在方法中，需要做的就是获取scrollView当前的偏移量，然后根据这个偏移量来设定导航条的位置。

代码实现

将scrollView与滚动条声明未全局变量，因为在其他方法中也会用到。

//存放三个按钮的父页面宽度
#define TOP_VIEW_HEIGHT 50
//界面上方导航线条的宽度
#define NAVIGATION_LINE_HEIGHT 2

@interface MyMesgViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UILabel *navLabel;

@end

scrollView延迟初始化，在初始化时记得为其设置代理对象。

- (UIScrollView *)scrollView {
    if (!_scrollView) {
        CGFloat scrollViewHeight = 64 + TOP_VIEW_HEIGHT + 8;
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, scrollViewHeight, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - scrollViewHeight)];
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.pagingEnabled = YES;
        CGSize size = _scrollView.frame.size;
        size.width *= 3;
        _scrollView.contentSize = size;
        _scrollView.backgroundColor = [UIColor whiteColor];
        _scrollView.delegate = self;
        [self.view addSubview:_scrollView];
    }
    return _scrollView;
}

navLabel延迟初始化

- (UILabel *)navLabel {
    if (!_navLabel) {
        _navLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, TOP_VIEW_HEIGHT - NAVIGATION_LINE_HEIGHT, [UIScreen mainScreen].bounds.size.width / 3, NAVIGATION_LINE_HEIGHT)];
        _navLabel.backgroundColor = [UIColor blueColor];
    }
    return _navLabel;
}

将三个按钮添加到页面中，并为按钮添加点击事件处理函数。

- (void)addMessageCategoryButton {
    UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, TOP_VIEW_HEIGHT)];
    topView.backgroundColor = [UIColor whiteColor];
    UIButton *approvedMsgButton = [self createMsgButton:@"审核消息" posX:0];
    UIButton *mosMsgButton = [self createMsgButton:@"M币交易" posX:approvedMsgButton.frame.size.width];
    UIButton *systemMsgButton = [self createMsgButton:@"系统通知" posX:approvedMsgButton.frame.size.width * 2];

    [topView addSubview:approvedMsgButton];
    [topView addSubview:mosMsgButton];
    [topView addSubview:systemMsgButton];
    [topView addSubview:self.navLabel];

    [self.view addSubview:topView];
}

将创建按钮的过程单独抽象出来

- (UIButton *)createMsgButton:(NSString *)title posX:(CGFloat)posX {
    UIButton *msgButton = [[UIButton alloc] initWithFrame:CGRectMake(posX, 0, self.view.frame.size.width / 3, TOP_VIEW_HEIGHT - NAVIGATION_LINE_HEIGHT)];
    msgButton.backgroundColor = [UIColor whiteColor];

    NSAttributedString *attributeTitle = [[NSAttributedString alloc] initWithString:title attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:14] }];
    [msgButton setAttributedTitle:attributeTitle forState:UIControlStateNormal];
    msgButton.tag = (NSInteger) (posX / (self.view.frame.size.width / 3));
    [msgButton addTarget:self action:@selector(switchMessageDetailView:) forControlEvents:UIControlEventTouchUpInside];

    return msgButton;
}

按钮点击后调用的函数，即切换页面

- (void)switchMessageDetailView:(UIButton *)btn {
    [self.scrollView setContentOffset:CGPointMake(btn.tag * self.view.frame.size.width, 0) animated:YES];
}

最后，在回调函数中根据scrollView的偏移量调整导航条的位置。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint offset = scrollView.contentOffset;
    CGFloat x = offset.x / 3;
    if (x > 0 && x < scrollView.frame.size.width) {
        CGRect frame = self.navLabel.frame;
        frame.origin.x = x;
        self.navLabel.frame = frame;
    }
}

这是最终的效果图：