前言
开发中，经常用到分页滚动菜单的功能点，底部页面滚动，顶部的菜单标题也会随着页面的滚动位置随之进行切换，这样的效果实际上在项目中常常能用上。为了以最快的速度去实现该功能，这里对这样的滚动菜单做了一个封装，简单说一下实现的过程。
分析
简单来看，由于滚动菜单点击切换并且切换对应的页面可以去控制菜单的item有个联动的过程。所以封装的时候也主要对外暴露几个重要属性内容：
- 菜单item点击回调
- 菜单item的设置属性
- 标题数组的设置
实现
这样的滚动菜单无疑是布局以及点击跳转跟联动逻辑的结合。
布局
由于菜单的布局受菜单的item的数目约束，考虑到屏幕的宽度与菜单展示的总长度关系，这里对菜单的展示做了个适配，即如果没有超出屏幕菜单的item的间隔等距。如果超出屏幕则按照固定的距离添加对应的菜单上。
- (void)setTitleArray:(NSArray *)titleArray{
_titleArray = titleArray;
[self setUI];
self.isBlock = YES;
NSInteger btnOffset = 0;
//判断要添加的item是否超出屏幕，如果没有，等分
BOOL isMore = [self isMoreScreenWidth];
if (isMore) {
for (int i = 0; i < titleArray.count; i++) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setTitle:self.titleArray[i] forState:UIControlStateNormal];
[btn setTitleColor:LCColorRGB(74, 74, 74) forState:UIControlStateNormal];
[btn setTitleColor:LCColorRGB(173, 135, 72) forState:UIControlStateSelected];
btn.titleLabel.font = [UIFont systemFontOfSize:15];
btn.tag = i;
[btn sizeToFit];
float originX = i? 37+btnOffset:18;
btn.frame = CGRectMake(originX, 0, btn.frame.size.width, 48);
btnOffset = CGRectGetMaxX(btn.frame);
btn.titleLabel.textAlignment = NSTextAlignmentLeft;
[btn addTarget:self action:@selector(changeSelectedState:) forControlEvents:UIControlEventTouchUpInside];
btn.titleLabel.font = [UIFont systemFontOfSize:14];
[self.scrollView addSubview:btn];
[self.buttonsArray addObject:btn];
//默认选择第一个
if (i == 0) {
btn.selected = YES;
btn.titleLabel.font = [UIFont systemFontOfSize:15];
self.currentSelectBtn = btn;
self.bottomBarView.frame = CGRectMake(btn.frame.origin.x, self.scrollView.frame.size.height-2, btn.frame.size.width, 2);
[self.scrollView addSubview:self.bottomBarView];
}
}
}else{
//计算等分之后的间隙大小
CGFloat interValWidth = (SCREEN_WIDTH - self.totalTitleWidth) / (self.titleArray.count + 1);
for (int i = 0; i < titleArray.count; i++) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setTitle:self.titleArray[i] forState:UIControlStateNormal];
[btn setTitleColor:LCColorRGB(74, 74, 74) forState:UIControlStateNormal];
[btn setTitleColor:LCColorRGB(173, 135, 72) forState:UIControlStateSelected];
btn.titleLabel.font = [UIFont systemFontOfSize:15];
btn.tag = i;
[btn sizeToFit];
float originX = i? interValWidth+btnOffset:interValWidth;
btn.frame = CGRectMake(originX, 0, btn.frame.size.width, 48);
btnOffset = CGRectGetMaxX(btn.frame);
btn.titleLabel.textAlignment = NSTextAlignmentLeft;
[btn addTarget:self action:@selector(changeSelectedState:) forControlEvents:UIControlEventTouchUpInside];
btn.titleLabel.font = [UIFont systemFontOfSize:14];
[self.scrollView addSubview:btn];
[self.buttonsArray addObject:btn];
//默认选择第一个
if (i == 0) {
btn.selected = YES;
btn.titleLabel.font = [UIFont systemFontOfSize:15];
self.currentSelectBtn = btn;
self.bottomBarView.frame = CGRectMake(btn.frame.origin.x, self.scrollView.frame.size.height-2, btn.frame.size.width, 2);
[self.scrollView addSubview:self.bottomBarView];
}
}
}
//更新scrollView的内容区域
self.scrollView.contentSize = CGSizeMake(btnOffset+18, self.scrollView.frame.size.height);
}
- (BOOL)isMoreScreenWidth{
CGFloat totalWidth = 0;
totalWidth += 18;
for (int i = 0; i<self.titleArray.count; i++) {
UILabel *label = [UILabel new];
label.font = [UIFont systemFontOfSize:15];
label.text = self.titleArray[i];
[label sizeToFit];
totalWidth += label.frame.size.width;
totalWidth += 22;
self.totalTitleWidth += label.frame.size.width;
}
if (totalWidth < SCREEN_WIDTH - 18) {
return NO;
}
return YES;
}
点击item回调
为了保证点击菜单的item能够进行外部业务逻辑的处理，为此使用了Block进行事件的回调。
- (void)changeSelectedState:(UIButton *)button{
self.currentSelectBtn.selected = NO;
self.currentSelectBtn.titleLabel.font = [UIFont systemFontOfSize:14];
self.currentSelectBtn = button;
self.currentSelectBtn.selected = YES;
self.currentSelectBtn.titleLabel.font = [UIFont systemFontOfSize:15];
[UIView animateWithDuration:0.2 animations:^{
if (button.tag == 0) {
self.bottomBarView.frame = CGRectMake(self.currentSelectBtn.frame.origin.x, self.scrollView.frame.size.height - 2, self.currentSelectBtn.frame.size.width, 2);
[self.scrollView scrollRectToVisible:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height) animated:YES];
}else{
UIButton *preButton = self.buttonsArray[button.tag - 1];
float offsetX = CGRectGetMinX(preButton.frame) - 18;
[self.scrollView scrollRectToVisible:CGRectMake(offsetX, 0, self.scrollView.frame.size.width, button.frame.size.height) animated:YES];
self.bottomBarView.frame = CGRectMake(self.currentSelectBtn.frame.origin.x, self.scrollView.frame.size.height-2, self.currentSelectBtn.frame.size.width, 2);
}
// self.scrollView.contentOffset = CGPointMake(SCREEN_WIDTH *button.tag, 0);
if(self.pageSelectBlock && self.isBlock){
NSLog(@"current seleted menu is %ld",button.tag);
self.currentPage = button.tag; //更新当前的curPage
self.pageSelectBlock(button.tag);
}
//默认将传递打开
self.isBlock = YES;
}];
}
对外暴露设置当前菜单item的属性
为了保证外部能够控制当前的菜单的item的选中位置，所以提供了一个修改当前菜单的index的属性。
- (void)setCurrentPage:(NSInteger)currentPage{
//防止重复设置
if (_currentPage == currentPage) {
return;
}
_currentPage = currentPage;
if (self.titleArray.count == 0) {
return;
}
self.isBlock = NO;
//改变当前的按钮状态以及偏移对应的菜单
UIButton *currentBtn = self.buttonsArray[currentPage];
[self changeSelectedState:currentBtn];
}
注意点
这里需要注意的技术点在于边缘菜单item点击问题，如果被遮挡部分的item菜单点击的话，我们需要将当前的菜单露出来以保证能够被用户看到具体的菜单内容，这里可以通过scrollView 的scrollRectToVisible方法进行调整并滚动到可见位置来保证菜单的滚动效果以及显示特性。
具体Demo可以看这个：
https://github.com/cclbj/LCHangMenuDemo
