之前项目中很多地方用到了滑动视图,三个界面五个界面或界面个数不定的情况都有,这里以简书 APP 的个人主页为例,总结一下,一则对自己也有好处,二则希望对看到的朋友有所帮助。
简书APP个人主页:
demo 效果图:
demo 地址:https://github.com/liuzhongning/NNJaneBookView
简单说下思路及核心代码:
思路:
导航栏上面的头像会随着视图的上下滑动而变大变小,这里注册了一个通知,用来监听视图的上下滑动,可以根据偏移量的值来改变头像的大小。
此 UI 页面分为三部分,第一部分是信息展示,用来显示昵称签名等;第二部分是标签栏,即“动态”,“文章”,“更多”这三个标签;第三部分是主要显示内容;
我这里用了这样的思路:页面底部是一个 UIScrollView; 接着 UIScrollView 上面 add 了三个 UITableView ;信息展示以及标签栏放在 UITableView 的 tableHeaderView 中;接着挨个实现其功能即可。
核心代码:
头像跟随页面上下滑动而变大变小
这里是头像变大变小时调用的代码,如果你的项目中用到了此功能,可以直接把这个类拿过去,然后调用下面这几句代码就可以实现了。另外点击头像的回调也通过 block 传了出来,你可以在此处做些操作,比如更改头像等等。
self.headerImageView = [[NNPersonalHomePageHeaderImageView alloc] initWithImage:[UIImage imageNamed:@"header"]]; [self.headerImageView reloadSizeWithScrollView:self.dynamicTableView]; self.navigationItem.titleView = self.headerImageView; [self.headerImageView handleClickActionWithBlock:^{ NSLog(@"你点击了头像按钮"); }];
tableView 的头部视图
这里另外建了两个 UIView 类,一个用来显示基本信息(昵称签名等),一个用来显示标签栏(动态,文章等标签),额外建这两个 UIView 类是为了减少控制器中的代码。
- (void)setupHeaderView { UIView *headerView = [[NNPersonalHomePageHeaderView alloc] init]; headerView.frame = CGRectMake(0, 0, NNScreenWidth, NNHeadViewHeight + NNTitleHeight); [self.view addSubview:headerView]; self.headerView = headerView; NNPersonalHomePageTitleView *titleView = [[NNPersonalHomePageTitleView alloc] init]; [headerView addSubview:titleView]; self.titleView = titleView; titleView.backgroundColor = [UIColor whiteColor]; [titleView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.mas_equalTo(headerView); make.bottom.equalTo(headerView.mas_bottom); make.height.mas_equalTo(NNTitleHeight); }]; [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.bottom.equalTo(self.view); make.top.mas_equalTo(headerView.top); }]; __weak typeof(self) weakSelf = self; titleView.titles = @[@"动态", @"文章", @"更多"]; titleView.selectedIndex = 0; titleView.buttonSelected = ^(NSInteger index){ [weakSelf.scrollView setContentOffset:CGPointMake(NNScreenWidth * index, 0) animated:YES]; }; }
主要内容
主要内容就是页面下部展示的具体内容,这里用了三个 UITableView ,依次添加到 UIScrollView 中,这里代码有些臃肿,后期再做优化,有兴趣的童鞋也可以帮忙改一下哈。
/// 主要内容 - (void)setupContentView { NNContentScrollView *scrollView = [[NNContentScrollView alloc] init]; scrollView.delaysContentTouches = NO; [self.view addSubview:scrollView]; self.scrollView = scrollView; scrollView.pagingEnabled = YES; scrollView.showsVerticalScrollIndicator = NO; scrollView.showsHorizontalScrollIndicator = NO; scrollView.delegate = self; scrollView.contentSize = CGSizeMake(NNScreenWidth * 3, 0); UIView *headView = [[UIView alloc] init]; headView.frame = CGRectMake(0, 0, 0, NNHeadViewHeight + NNTitleHeight); self.tableViewHeadView = headView; NNContentTableView *dynamicTableView = [[NNContentTableView alloc] init]; dynamicTableView.delegate = self; dynamicTableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.dynamicTableView = dynamicTableView; dynamicTableView.tableHeaderView = headView; [scrollView addSubview:dynamicTableView]; [dynamicTableView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(scrollView); make.width.mas_equalTo(NNScreenWidth); make.top.equalTo(self.view); make.bottom.equalTo(self.view); }]; NNContentTableView *articleTableView = [[NNContentTableView alloc] init]; articleTableView.delegate = self; articleTableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.articleTableView = articleTableView; articleTableView.tableHeaderView = headView; [scrollView addSubview:articleTableView]; [articleTableView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(scrollView).offset(NNScreenWidth); make.width.equalTo(dynamicTableView); make.top.bottom.equalTo(dynamicTableView); }]; NNContentTableView *moreTableView = [[NNContentTableView alloc] init]; moreTableView.delegate = self; moreTableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.moreTableView = moreTableView; moreTableView.tableHeaderView = headView; [scrollView addSubview:moreTableView]; [moreTableView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(scrollView).offset(NNScreenWidth * 2); make.width.equalTo(dynamicTableView); make.top.bottom.equalTo(dynamicTableView); }]; }
左右或上下滑动页面
这里为 UIScrollView 添加了代理,一旦滑动视图,便会调用下面这两个方法。为了区分是左右滑动还是上下滑动,这里做了简单的判断,if (scrollView == self.scrollView),那么这就是左右滑动,因为 UITableView 是上下滑动的,所有左右滑动就是 UIScrollView 的滑动,需要切换 UITableView 的显示内容,在这里做相应的操作即可;如果 if (scrollView == self.scrollView || !scrollView.window)这个条件不成立,那么就是 UITableView 的滑动,就是上下滑动,在这里需要改变“标签栏”的frame,因为“标签栏”需要显示在导航栏下边位置。
#pragma mark - UIScrollViewDelegate - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { if (scrollView == self.scrollView) { CGFloat contentOffsetX = scrollView.contentOffset.x; NSInteger pageNum = contentOffsetX / NNScreenWidth + 0.5; self.titleView.selectedIndex = pageNum; } } - (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView == self.scrollView || !scrollView.window) { return; } CGFloat offsetY = scrollView.contentOffset.y; CGFloat originY = 0; CGFloat otherOffsetY = 0; if (offsetY <= NNHeadViewHeight) { originY = -offsetY; if (offsetY < 0) { otherOffsetY = 0; } else { otherOffsetY = offsetY; } } else { originY = -NNHeadViewHeight; otherOffsetY = NNHeadViewHeight; } self.headerView.frame = CGRectMake(0, originY, NNScreenWidth, NNHeadViewHeight + NNTitleHeight); for ( int i = 0; i < self.titleView.titles.count; i++ ) { if (i != self.titleView.selectedIndex) { UITableView *contentView = self.scrollView.subviews[i]; CGPoint offset = CGPointMake(0, otherOffsetY); if ([contentView isKindOfClass:[UITableView class]]) { if (contentView.contentOffset.y < NNHeadViewHeight || offset.y < NNHeadViewHeight) { [contentView setContentOffset:offset animated:NO]; self.scrollView.offset = offset; } } } } }
上面只是简单的介绍下,具体的代码还请到 demo 中 查看,如有疑问或有建议的地方,欢迎讨论。
作者:n以梦为马
链接:http://www.jianshu.com/p/c82a83fd400a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。