前言
開發中，經常用到分頁滾動菜單的功能點，底部頁面滾動，頂部的菜單標題也會隨著頁面的滾動位置隨之進行切換，這樣的效果實際上在項目中常常能用上。為了以最快的速度去實現該功能，這里對這樣的滾動菜單做了一個封裝，簡單說一下實現的過程。
分析
簡單來看，由于滾動菜單點擊切換并且切換對應的頁面可以去控制菜單的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
