功能介绍
最近在做一款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;
}
}
这是最终的效果图：
