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

  • Coder.Bing 发布于 2016-09-21 04:40:38
  • 分类：IOS / 编程语言
  • 评论(0)

付费节点推荐

免费节点

节点使用教程

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

好多地方都有滑动切换多个标题样式的菜单！今天自己尝试封装了一个，考虑欠缺的地方还望您指正！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
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

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

相关推荐

赞 (2)
分享到：更多 ()

相关推荐

评论 0

评论前必须登录！

登陆 注册