iOS-封装 Demo–滑动切换多标题菜单

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

好多地方都有滑动切换多个标题样式的菜单!今天自己尝试封装了一个,考虑欠缺的地方还望您指正!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 的,真正使用的时候要考虑显示问题,会不会被顶部挡住!

 

文/云之君兮鹏(简书作者)
原文链接:http://www.jianshu.com/p/f710e85115d9
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

站长QQ:739696033 | 微信:bing-0719:Bcoder资源网 » iOS-封装 Demo–滑动切换多标题菜单


扫描二维码关注微信公众号:“bcoder-cn 声明:本站内容部分来自互联网,仅供交流学习之用,请勿作商业用途,版权归原作者所有。如果有侵犯到您的权益,请提供相关证明联系本站删除,谢谢合作!
赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址