<big><b><i>十年生死两茫茫，细思量，自难忘！纵使相逢应不识，尘满面，鬓如霜！<伊布家族></i></b></big>
好多地方都有滑动切换多个标题样式的菜单！今天自己尝试封装了一个，考虑欠缺的地方还望您指正！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中
- 声明属性
```code
{
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];
}
}```
- 点击标题的事件，切换页面到对应的页面
```code
- (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];
}
}```
- 添加的手势事件
```code
- (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] ;
}```
- 左滑视图 出现右侧视图
```code
- (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 引入使用
```code
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 的，真正使用的时候要考虑显示问题，会不会被顶部挡住！
网友评论