iOS左右滑动导航栏标签
很早就想写一篇关于左右滑动标签的文章了，因为刚开始学习iOS的时候，就练习过，先上个效果图吧：
未命名.gif
这个效果很多地方都可以用的到，网易新闻、腾讯视频等等都会有，一般我们看到这种需求可能第一反应就是网上好多的第三方库，而且用法超级简单，一两分钟搞定，的确，使用第三方库确实舒服，但是作为一个程序员吧，我觉得如果有时间的话还是自己写，因为这个东西说实话，确实很简单，总共就那么几个控件：一个UIScrollView 、三个按钮、一个滑动条。自己也就话1个小时就搞定的事 ，为何不自己写，而且还有一个最重要的点，使用别人的东西可定制性就低了，也许稍微有一点和这个第三方库不一致你可能就要去改别人的源码，或者干脆用不了了，既然如此 为何不自己去写呢？
那么下面就进入我们的重点吧：
1.整体思路：在一个控制器中放置一个UIScrollView，新建三个子控制器，并将这三个子控制器的view加入到scrollView中，在导航栏的titleView中加入三个按钮以及一个滑动的Label
2.代码部分：
//这是我们的最外层控制器
// YJYYMainViewController.h
// YJYYSlideControls
//
// Created by 遇见远洋 on 16/8/25.
// Copyright © 2016年 遇见远洋. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface YJYYMainViewController : UIViewController
@end
//
// YJYYMainViewController.m
// YJYYSlideControls
//
// Created by 遇见远洋 on 16/8/25.
// Copyright © 2016年 遇见远洋. All rights reserved.
//
#import "YJYYMainViewController.h"
#import "YJYYFirstViewController.h"
#import "YJYYSecondViewController.h"
#import "YJYYThirdViewController.h"
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
@interface YJYYMainViewController ()<UIScrollViewDelegate>
@property (strong,nonatomic)UIScrollView *mainScrollView;/**<滚动scrollView*/
@property (strong,nonatomic)YJYYFirstViewController *firstVc;/**<第一个控制器*/
@property (strong,nonatomic)YJYYSecondViewController *secondVc;/**<第二个控制器*/
@property (strong,nonatomic)YJYYThirdViewController *thirdVc;/**<第三个控制器*/
@property (strong,nonatomic)UIView *btnContainerView;/**<按钮容器视图*/
@property (strong,nonatomic)UILabel *slideLabel;/**<滚动条*/
@property (strong,nonatomic)NSMutableArray *btnsArray;/**<按钮数组*/
@end
@implementation YJYYMainViewController
- (void)viewDidLoad {
[super viewDidLoad];
//1.设置scrollView
[self setMainSrollView];
}
/**
* 设置scrollView
*/
-(void)setMainSrollView{
_mainScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, self.view.frame.size.height)];
_mainScrollView.delegate = self;
_mainScrollView.backgroundColor = [UIColor whiteColor];
_mainScrollView.pagingEnabled = YES;
_mainScrollView.showsHorizontalScrollIndicator = NO;
_mainScrollView.showsVerticalScrollIndicator = NO;
[self.view addSubview:_mainScrollView];
NSArray *views = @[self.firstVc.view,self.secondVc.view,self.thirdVc.view];
for (NSInteger i = 0; i<self.btnsArray.count; i++) {
//把三个vc的view依次贴到_mainScrollView上面
UIView *pageView = [[UIView alloc]initWithFrame:CGRectMake(kScreenWidth*i, 0, _mainScrollView.frame.size.width, _mainScrollView.frame.size.height-100)];
[pageView addSubview:views[i]];
[_mainScrollView addSubview:pageView];
}
_mainScrollView.contentSize = CGSizeMake(kScreenWidth*(views.count), 0);
}
/**
* 标签按钮点击
*
* @param sender 按钮
*/
-(void)sliderAction:(UIButton *)sender{
[self sliderAnimationWithTag:sender.tag];
[UIView animateWithDuration:0.3 animations:^{
_mainScrollView.contentOffset = CGPointMake(kScreenWidth*(sender.tag), 0);
} completion:^(BOOL finished) {
}];
}
/**
* 滑动scrollView以及改变sliderLabel位置
*
* @param tag 按钮tag
*/
-(void)sliderAnimationWithTag:(NSInteger)tag{
[self.btnsArray enumerateObjectsUsingBlock:^(UIButton *btn, NSUInteger idx, BOOL * _Nonnull stop) {
btn.selected = NO;
}];
//获取被选中的按钮
UIButton *selectedBtn = self.btnsArray[tag];
selectedBtn.selected = YES;
//动画
[UIView animateWithDuration:0.3 animations:^{
_slideLabel.center = CGPointMake(selectedBtn.center.x, _slideLabel.center.y);
} completion:^(BOOL finished) {
[self.btnsArray enumerateObjectsUsingBlock:^(UIButton *btn, NSUInteger idx, BOOL * _Nonnull stop) {
btn.titleLabel.font = [UIFont boldSystemFontOfSize:16];
}];
selectedBtn.titleLabel.font = [UIFont boldSystemFontOfSize:19];
}];
}
#pragma mark- XXXXXXXXXXXXXXX懒加载XXXXXXXXXXXXXXXXXXXX
- (YJYYFirstViewController *)firstVc {
if (!_firstVc) {
_firstVc = [[YJYYFirstViewController alloc]init];
}
return _firstVc;
}
- (YJYYSecondViewController *)secondVc {
if (!_secondVc) {
_secondVc = [[YJYYSecondViewController alloc]init];
}
return _secondVc;
}
- (YJYYThirdViewController *)thirdVc {
if (!_thirdVc) {
_thirdVc = [[YJYYThirdViewController alloc]init];
}
return _thirdVc;
}
- (NSMutableArray *)btnsArray {
if (!_btnsArray) {
_btnsArray = [NSMutableArray array];
self.btnContainerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 40)];
self.navigationItem.titleView = _btnContainerView;
_slideLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 40-2, kScreenWidth/3, 4)];
_slideLabel.backgroundColor = [UIColor redColor];
[_btnContainerView addSubview:_slideLabel];
for (int i = 0; i < 3; i++) {
UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.frame = CGRectMake(i*kScreenWidth/3 - 10,0, kScreenWidth/3, _btnContainerView.frame.size.height);
btn.titleLabel.font = [UIFont boldSystemFontOfSize:16];
[btn addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpInside];
[btn setTitle:[NSString stringWithFormat:@"第%d个",i] forState:UIControlStateNormal];
btn.tag = i;
[_btnsArray addObject:btn];
if (i == 0) {
btn.selected = YES;
btn.titleLabel.font = [UIFont boldSystemFontOfSize:19];
}
[_btnContainerView addSubview:btn];
}
}
return _btnsArray;
}
//scrollView滑动代理监听
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
double index_ = scrollView.contentOffset.x/kScreenWidth;
[self sliderAnimationWithTag:(int)(index_+0.5)];
}
@end
关键代码就这么多，下面再说说最重要的几个点吧：
1.点击导航栏上的按钮让scrollView滚动怎么实现：
其实就是通过设置contentOffset，这里的sender是被点击的按钮 通过给每一个按钮绑定一个tag来实现滚动距离的设置
[UIView animateWithDuration:0.3 animations:^{
_mainScrollView.contentOffset = CGPointMake(kScreenWidth*(sender.tag), 0);
} completion:^(BOOL finished) {
}];
2.滑动scrollView时 让滚动条滚动到对应的按钮位置怎么实现？
这个其实也很简单 在代理方法中通过一个tag值来让导航栏上的按钮被选中就可以了
//scrollView滑动代理监听
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
double index_ = scrollView.contentOffset.x/kScreenWidth;
[self sliderAnimationWithTag:(int)(index_+0.5)];
}
最后放上demo吧，我就不封装了，因为网上很多人都封装过，做重复的轮子没啥用，主要是看思路，不过我这个demo没什么技术含量 也就是教教大家思路而已
https://github.com/wxh794708907/YJYYSlideController.git
网友评论