前言
開發中，經常用到分頁滾動選單的功能點，底部頁面滾動，頂部的選單標題也會隨著頁面的滾動位置隨之進行切換，這樣的效果實際上在專案中常常能用上。為了以最快的速度去實現該功能，這裡對這樣的滾動選單做了一個封裝，簡單說一下實現的過程。
分析
簡單來看，由於滾動選單點選切換並且切換對應的頁面可以去控制選單的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可以看這個： github.com/cclbj/LCHan…