iOS下简单实现滑动导航条
2018-02-08 18:24
411 查看
功能介绍
最近在做一款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; } }
这是最终的效果图:
相关文章推荐
- iOS - 网易新闻音乐滑动导航条实现(代码简单,自定义扩展)
- webapp在ios中简单实现滑动,回弹,加速等效果
- iOS 简单实现类似于小说阅读滑动分页效果
- webView 之 webapp在ios中简单实现滑动,回弹,加速等效果
- IOS 可以实现滑动的第三方库iCarousel的简单使用
- 源码推荐(7.09):iOS简单即时通讯 自定义协议实现 了解传输基本原理,仿陌陌的可滑动Segment
- 简单实现滑动和点击翻页 button与scrollView结合 iOS
- iOS滑动返回的最简单实现
- iOS开发UI基础—24使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- jQuery简单实现导航栏根据滑动自动悬浮效果
- iOS property两种实现方法区别的简单介绍
- 树状结构导航条css+javascript简单实现
- IOS导航栏的简单用法以及自定义实现例程
- iOS-CALayer实现简单进度条
- IOS动画的使用方法总结-下拉框的简单实现
- 链式编程,iOS简单封装属性字符串,实现富文本.
- iOS --- 通过CPU实现的简单滤镜效果
- ios气泡动画效果的简单实现
- iOS之ASIHttp简单的网络请求实现
- [ios开发]利用有道翻译API实现简单的翻译功能