前言
開(kāi)發(fā)中，經(jīng)常用到分頁(yè)滾動(dòng)菜單的功能點(diǎn)，底部頁(yè)面滾動(dòng)，頂部的菜單標(biāo)題也會(huì)隨著頁(yè)面的滾動(dòng)位置隨之進(jìn)行切換，這樣的效果實(shí)際上在項(xiàng)目中常常能用上。為了以最快的速度去實(shí)現(xiàn)該功能，這里對(duì)這樣的滾動(dòng)菜單做了一個(gè)封裝，簡(jiǎn)單說(shuō)一下實(shí)現(xiàn)的過(guò)程。
分析
簡(jiǎn)單來(lái)看，由于滾動(dòng)菜單點(diǎn)擊切換并且切換對(duì)應(yīng)的頁(yè)面可以去控制菜單的item有個(gè)聯(lián)動(dòng)的過(guò)程。所以封裝的時(shí)候也主要對(duì)外暴露幾個(gè)重要屬性內(nèi)容：
- 菜單item點(diǎn)擊回調(diào)
- 菜單item的設(shè)置屬性
- 標(biāo)題數(shù)組的設(shè)置
實(shí)現(xiàn)
這樣的滾動(dòng)菜單無(wú)疑是布局以及點(diǎn)擊跳轉(zhuǎn)跟聯(lián)動(dòng)邏輯的結(jié)合。
布局
由于菜單的布局受菜單的item的數(shù)目約束，考慮到屏幕的寬度與菜單展示的總長(zhǎng)度關(guān)系，這里對(duì)菜單的展示做了個(gè)適配，即如果沒(méi)有超出屏幕菜單的item的間隔等距。如果超出屏幕則按照固定的距離添加對(duì)應(yīng)的菜單上。
- (void)setTitleArray:(NSArray *)titleArray{
_titleArray = titleArray;
[self setUI];
self.isBlock = YES;
NSInteger btnOffset = 0;
//判斷要添加的item是否超出屏幕，如果沒(méi)有，等分
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];
//默認(rèn)選擇第一個(gè)
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{
//計(jì)算等分之后的間隙大小
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];
//默認(rèn)選擇第一個(gè)
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的內(nèi)容區(qū)域
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;
}
點(diǎn)擊item回調(diào)
為了保證點(diǎn)擊菜單的item能夠進(jìn)行外部業(yè)務(wù)邏輯的處理，為此使用了Block進(jìn)行事件的回調(diào)。
- (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; //更新當(dāng)前的curPage
self.pageSelectBlock(button.tag);
}
//默認(rèn)將傳遞打開(kāi)
self.isBlock = YES;
}];
}
對(duì)外暴露設(shè)置當(dāng)前菜單item的屬性
為了保證外部能夠控制當(dāng)前的菜單的item的選中位置，所以提供了一個(gè)修改當(dāng)前菜單的index的屬性。
- (void)setCurrentPage:(NSInteger)currentPage{
//防止重復(fù)設(shè)置
if (_currentPage == currentPage) {
return;
}
_currentPage = currentPage;
if (self.titleArray.count == 0) {
return;
}
self.isBlock = NO;
//改變當(dāng)前的按鈕狀態(tài)以及偏移對(duì)應(yīng)的菜單
UIButton *currentBtn = self.buttonsArray[currentPage];
[self changeSelectedState:currentBtn];
}
注意點(diǎn)
這里需要注意的技術(shù)點(diǎn)在于邊緣菜單item點(diǎn)擊問(wèn)題，如果被遮擋部分的item菜單點(diǎn)擊的話，我們需要將當(dāng)前的菜單露出來(lái)以保證能夠被用戶看到具體的菜單內(nèi)容，這里可以通過(guò)scrollView 的scrollRectToVisible方法進(jìn)行調(diào)整并滾動(dòng)到可見(jiàn)位置來(lái)保證菜單的滾動(dòng)效果以及顯示特性。
具體Demo可以看這個(gè)：
https://github.com/cclbj/LCHangMenuDemo
