神刀安全网

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

iOS-封装 Demo--滑动切换多标题菜单
十年生死两茫茫,细思量,自难忘!纵使相逢应不识,尘满面,鬓如霜!<伊布家族>


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

先上图
iOS-封装 Demo--滑动切换多标题菜单
滑动切换多标题菜单.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];  } }

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS-封装 Demo–滑动切换多标题菜单

分享到:更多 ()

评论 抢沙发

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