付费节点推荐

免费节点

节点使用教程

十年生死两茫茫，细思量，自难忘！纵使相逢应不识，尘满面，鬓如霜！<伊布家族>

好多地方都有滑动切换多个标题样式的菜单！今天自己尝试封装了一个，考虑欠缺的地方还望您指正！GitHub

先上图

滑动切换多标题菜单.gif

简单说说我的思路

1： 将需要的关键数据初始化的时候获取（需要顶部每个页面对应的标题，还要知道要展示的页面，各自作为一个数组存入）。
2： 在自定义的 View 上添加平移手势，当手指滑动的时候根据平移量，去具体判断要展示的视图是哪一个。

2.1 左（右）滑动的时候，从数组中找到对应的下（上）一个展示的页面添加到自定义视图上（位置在当前页面的右（左）侧），并随着滑动一起滑动展现出来。
2.2 停止滑动的时候判断是要展示哪一个页面，并将不展示的那一个移除掉。（使用动画）。
2.3 这样的话最多的时候，我们需要两个展示页面！最后是只留一个我们看的那个页面。

3：顶部标题我是用了一个比较笨拙的方法，根据展示的页面数，创建对应的 Button 根据标题数组对应的给 Title，然后放在一个 ScrollView 上面。（有时间可以思考一下，可以对应的去改变展示 Button 名字不必创建那么多，好像一般也不会太多！）

3.1 Button 点击时候操作逻辑不难，就是移除当前展示的页面，添加 Button 对应的页面即可。
3.2 滑动手势结束的时候根据展示的页面，把对应的 Button 字体颜色和大小改掉即可（遍历 ScrollView 的子视图找到 Button 选中的特殊对待，其他另做对待就好）。

4：滑块是个 View，利用动画对应改变 Frame 就好了！

废话尽，代码上！

PP_SlipMenuView.h中

• 声明供给外界的初始化方法

# 初始话方法：
/*
 ParentVc:       你在哪个试图控制中使用
 childrenVc:     你要展示那些控制器的 View
 childrenTitles: 每一个展示的视图的标题（Button 的 Title）
 frame:          展示的位置
 numTitleOnePage:每一页显示几个标题（顶部Button）
 */
- (instancetype)initWithParentVc:(UIViewController *)parentVc
                      childrenVc:(NSArray<UIViewController *>*)childrenVc
                  childrenTitles:(NSArray<NSString *>*)titles
                           frame:(CGRect)frame
                  numTitleOnePage:(NSInteger)numTitleOnePage;

PP_SlipMenuView.m中

• 声明属性

{
NSInteger numOnePage; // 顶部展示的标题数量
}

@property (assign, nonatomic) NSInteger currentIndex;// 当前展示视图对应的下标
@property (strong, nonatomic) NSArray<UIViewController *> *childrenVc;// 子控制器
@property (strong, nonatomic) NSArray<NSString *> *titles; // 标题数组
@property (strong, nonatomic) UIViewController *parentVc;// 父控制器
@property (strong, nonatomic) UIPanGestureRecognizer *pan;// 手势
@property (strong, nonatomic) UIScrollView *titlesView;// 顶部承载标题 Button 容器
@property (strong, nonatomic) UIView *lineView; // 标题的下划线

const float titleHH = 50.0f; // 定义顶部 Button 的高
// 定义一个滑动方向枚举  具体有使用的地方 定义只为可读性
typedef enum : NSUInteger
{
    MoveDirectionLeft,
    MoveDirectionRight,
} MoveDirection;

• 初始化方法实现

- (instancetype)initWithParentVc:(UIViewController *)parentVc childrenVc:(NSArray<UIViewController *> *)childrenVc childrenTitles:(NSArray<NSString *> *)titles frame:(CGRect)frame numTitleOnePage:(NSInteger)numTitleOnePage
{
    // 给对应的属性赋值
    _childrenVc = childrenVc;
    _parentVc = parentVc;
    _titles = titles;
    numOnePage = numTitleOnePage;

    if (self = [super initWithFrame:frame])
    {
    // 处理视图控制器
        // 默认显示第一个控制器的内容
        _currentIndex = 0;
        [self insertSubview:_childrenVc[0].view atIndex:0];

    // pan手势处理切换
        _pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panChangeVc:)];
        [self addGestureRecognizer:_pan];

    // 顶部控制菜单
        _titlesView = [[UIScrollView alloc] initWithFrame:(CGRectMake(0, 0, kScreenW, titleHH + 20))];
        _titlesView.contentSize = CGSizeMake(kScreenW / numOnePage * _childrenVc.count, titleHH);
        _titlesView.backgroundColor = [UIColor whiteColor];
        _titlesView.bounces = NO;
        _titlesView.showsHorizontalScrollIndicator = NO;
        [self insertSubview:_titlesView atIndex:1];

    // 添加标题 Button
        [self addTittleButtons];
        // 对应的 Button 下面的划线
         _lineView = [[UIView alloc] initWithFrame:CGRectMake(_currentIndex * kScreenW / numOnePage, titleHH, kScreenW / numOnePage, 20)];
        _lineView.backgroundColor = [UIColor blackColor];
        [_titlesView addSubview:_lineView];

    }
    return self;
}

• 布局 Title Button 就是顶部菜单点击可以切换

  /*
  1: 根据页面的多少逐一创建 Button，
  2: tag 值为对应的下标加1000，这样便于我们根据对应的下标去找到对应的 Button
  3: 依次设置在 ScroView 上的位置，并添加_titlesView（ScrollView 上面）
  */
  - (void)addTittleButtons
  {
   for (int i = 0; i < _childrenVc.count; i++)
   {
       UIButton *title = [UIButton buttonWithType:(UIButtonTypeCustom)];
       title.backgroundColor = [UIColor grayColor];
       [title setTitle:_titles[i] forState:(UIControlStateNormal)];
  # 设置展示的当前页面和未展示页面的对应 Button 字体大小颜色的区别
       if (i == _currentIndex)
       {
           [title.titleLabel setFont:[UIFont systemFontOfSize:24]];
           [title setTitleColor:[UIColor purpleColor ] forState:(UIControlStateNormal)];
  
       }else{
           [title.titleLabel setFont:[UIFont systemFontOfSize:17]];
           [title setTitleColor:[UIColor whiteColor] forState:(UIControlStateNormal)];
       }
       [title setTitleColor:[UIColor redColor] forState:(UIControlStateHighlighted)];
       [title addTarget:self action:@selector(chooseTitle:) forControlEvents:(UIControlEventTouchUpInside)];
       title.frame = CGRectMake(i * kScreenW / 3.0, 0, kScreenW / 3.0, titleHH);
       title.tag = 1000 + i;
       [_titlesView addSubview:title];
   }
  }

• 点击标题的事件，切换页面到对应的页面

  - (void)chooseTitle:(UIButton *)sender
  {
    // 点击不是当前的标题才会去切换
    if (_currentIndex != sender.tag - 1000)
    {
       // 移除当前的
        [_childrenVc[_currentIndex].view removeFromSuperview];
  
        //  展示点击的 设置 Frame 很关键要  因为手势的时候回去修改  这里让其展示在整个屏幕上
        _childrenVc[sender.tag - 1000].view.frame = self.bounds;
        [self insertSubview:_childrenVc[sender.tag - 1000].view atIndex:0];
        _currentIndex = sender.tag - 1000;
    }
    // 移动下划线
    [self moveLineView];
  }

• 一定下划线 滑动到当前选中的 Button 下面

  - (void)moveLineView
  {
    # 用手势滑动时候 我们既要移动下划线  也要把对应的 Button 的字体颜色大小改了
    for (UIView *view in _titlesView.subviews)
    {
        // 遍历找到 Button
        if ([view isKindOfClass:[UIButton class]])
        {
            UIButton *button = (UIButton *)view;
            if (button.tag == _currentIndex + 1000)
            {
                [button.titleLabel setFont:[UIFont systemFontOfSize:24]];
                [button setTitleColor:[UIColor purpleColor ] forState:(UIControlStateNormal)];
  
            }else{
                [button.titleLabel setFont:[UIFont systemFontOfSize:17]];
                [button setTitleColor:[UIColor whiteColor] forState:(UIControlStateNormal)];
            }
        }
    }
    // 算好位置 动画调整到相应的位置
    [UIView animateWithDuration:0.1f animations:^{
        /*
          页面的宽度 / 一个页面展示的 Button 数 = Button 的宽度
         当前下划线的 x = 当前的下标 * Button 的宽度
         */
        _lineView.frame = CGRectMake(_currentIndex * kScreenW / numOnePage, titleHH, kScreenW / numOnePage, 20);
    }];
   #下面的两个判断是一个展示的关键部分，我们可以根据自己的想法调整！
     #1、当下划线的x 超过一个屏幕宽的时候，那么就是说明已经到了我们视线之外了，我们要调整_titlesView的偏移量使之能看见，我这里是让她保持在最右面！
     #2、这个判断是当要展示的 Button 在左侧我们视线之外的时候，我们让_titlesView偏移量为 0让我们能看见（因为这里只有第一个会出现这样的情况）
  
  if (_lineView.frame.origin.x >= kScreenW )
    {
        NSLog(@"走这个方法当前的下标%ld",_currentIndex);
        [_titlesView setContentOffset:CGPointMake( kScreenW / numOnePage * (_currentIndex +1 - numOnePage), 0) animated:YES];
    }
    if (_titlesView.contentOffset.x >= CGRectGetMaxX(_lineView.frame))
    {
        NSLog(@"左滑动 走这个方法当前的下标%ld",_currentIndex);
        [_titlesView setContentOffset:CGPointMake( kScreenW *0, 0) animated:YES];
    }
  }

• 添加的手势事件

  - (void)panChangeVc:(UIPanGestureRecognizer *)pan
  {
   // 向左滑 x 为负 向右滑 x 为正  （末位置 减 初始位置）
    CGPoint panOffSet = [pan translationInView:self];
    float changeX = panOffSet.x;
    // 获取 当前的视图位置
    CGRect frame = _childrenVc[_currentIndex].view.frame;
    // 清空手势的偏移量
    [_pan setTranslation:(CGPointZero) inView:self];
    // 处理左右视图
  # 这里只是为了临界点时候任然可以处理所以相应  增加减少了一个极小的数
    float resulet = frame.origin.x + (changeX < 0 ? - DBL_EPSILON : DBL_EPSILON);
  # 小于0说明我们左滑了 大于0说明我们右滑了 调用不同的自定义方法
  ( resulet <=0 ) ?  [self leftScroll:changeX frame:frame] : [self rightScroll:changeX frame:frame] ;
   }

• 左滑视图 出现右侧视图

  - (void)leftScroll:(float)offX frame:(CGRect)frame
  {
  
    if (_currentIndex == _childrenVc.count - 1)
    {
        NSLog(@"最后一个左滑 不处理");
        return;
    }
  
    float tempX = frame.origin.x + offX;
    if (_currentIndex == 0)
    {
  # 左滑动的时候不松手又往右滑动 在第一个视图的时候不允许 当然也可以设置成循环滚动  到最后一个
        tempX = tempX >=0 ? 0 :tempX;
    }
  
    // 移动当前的视图
    _childrenVc[_currentIndex].view.frame = CGRectMake(tempX, frame.origin.y, frame.size.width, frame.size.height);
  
    // 找到下一个页面
    UIView *subView = _childrenVc[_currentIndex + 1].view;
  
    # 设置 Frame 很关键  让他出现当前页面的右侧
    subView.frame = CGRectMake(tempX + frame.size.width, frame.origin.y, frame.size.width, frame.size.height);
  
    if (![self.subviews containsObject:subView])
    {
        [self insertSubview:subView atIndex:0];
    }
    if (_pan.state == UIGestureRecognizerStateEnded)
    {
  # 手势停止的时候确定一下到底要展示哪一个页面
        MoveDirection result = tempX <= - kScreenW / 2 ? [self leftOut:_childrenVc[_currentIndex].view rightIn:subView] : [self leftIn:_childrenVc[_currentIndex].view  rightOut:subView];
        _currentIndex = result == MoveDirectionLeft ? _currentIndex + 1 : _currentIndex;
        [self moveLineView];// 调整 Button 文字和下划线
    }
  }

• 自定义方法判断手势结束的时候要把谁移除

  - (MoveDirection)leftOut:(UIView *)leftView rightIn:(UIView *)rightView
  {   /*
    当手势结束的时候  左边的视图移除  右侧的视图占据整个屏幕
    */
    [UIView animateWithDuration:0.3f animations:^{
        leftView.frame = CGRectOffset(self.bounds, - kScreenW, 0);
        rightView.frame = self.bounds;
    } completion:^(BOOL finished) {
        [leftView removeFromSuperview];
    }];
    return MoveDirectionLeft;
  }
  - (MoveDirection)leftIn:(UIView *)leftView rightOut:(UIView *)rightView
  {
    /*
     当手势结束的时候  左边的视图移除  右侧的视图占据整个屏幕
     */
    [UIView animateWithDuration:0.3f animations:^{
        rightView.frame = CGRectOffset(self.bounds, kScreenW, 0);
        leftView.frame = self.bounds;
    } completion:^(BOOL finished) {
       [rightView removeFromSuperview];
    }];
    return MoveDirectionRight;
  }

• 右滑视图 出现左侧视图 思路和上面一样

  - (void)rightScroll:(float)offX frame:(CGRect)frame
  {
  if (_currentIndex == 0)
   {
       NSLog(@"第一个右滑 不处理");
       return;
   }
   float tempX = frame.origin.x + offX;
   if (_currentIndex == _childrenVc.count - 1)
   {
       tempX = tempX <=0 ? 0 :tempX;
   }
   // 移动当前的视图
   _childrenVc[_currentIndex].view.frame = CGRectMake(tempX, frame.origin.y, frame.size.width, frame.size.height);
   UIView *subView = _childrenVc[_currentIndex - 1].view;
   subView.frame = CGRectMake(tempX - frame.size.width, frame.origin.y, frame.size.width, frame.size.height);  
   if (![self.subviews containsObject:subView])
   {
        [self insertSubview:subView atIndex:0];
   }
   if (_pan.state == UIGestureRecognizerStateEnded)
   {
       MoveDirection result = tempX <=  kScreenW / 2 ? [self leftOut:subView rightIn:_childrenVc[_currentIndex].view] : [self leftIn:subView  rightOut:_childrenVc[_currentIndex].view];
       _currentIndex = result == MoveDirectionLeft ? _currentIndex : _currentIndex - 1;
      [self moveLineView];
   }
  }

ViewController.m 引入使用

NSMutableArray *arraVc = [NSMutableArray new];
    NSMutableArray *arraTitle = [NSMutableArray new];
    for (int i = 0 ; i <= 10 ; i++)
    {
        UIViewController *vc = [UIViewController new];
        vc.view.backgroundColor = [UIColor colorWithRed:(arc4random()%173)/346.0 + 0.5 green:(arc4random()%173)/346.0 + 0.5  blue:(arc4random()%173)/346.0 + 0.5  alpha: 1];
        [arraVc addObject:vc];
        [arraTitle addObject:[NSString stringWithFormat:@"第%d页",i]];
    }
     PP_SlipMenuView *pp_View = [[PP_SlipMenuView alloc] initWithParentVc:self childrenVc:arraVc childrenTitles:arraTitle frame:self.view.bounds numTitleOnePage:3];

    [self.view addSubview:pp_View];

• 补充一句 子控制器View 添加到自定义 View 上时候，frame 要注意我这随便设置一样 Bounds 的，真正使用的时候要考虑显示问题，会不会被顶部挡住！

未经允许不得转载：Bcoder资源网 » iOS-封装 Demo–滑动切换多标题菜单

相关推荐

更多优质资源关注微信公众号: bcoder