一、需求說明
需要完成一個,具有左右滑動的導航欄,同時單擊導航欄中的每個項目按鈕具有與其相對應的提示功能。
二、通過具體的效果圖來了解
HTNavGlideBar.gif
三、分析控件的組成
1、一個支持左右滑動的UIScrollView
2、多個可以點擊的按鈕
3、一個點擊向右側滑動的按鈕
4、一個和選擇項目對應的指示層
具體代碼內容如下
UIScrollView *_navgationTabBar; // all items on this scroll view
NSMutableArray *_items;
UIImageView *_arrowButton; // arrow button
HTNavHintLayer *_hintView;
四、對外的屬性和行為
itemHints:每個項目對應提示內容
itemTitles:每個項目的標題
@property (nonatomic, strong) NSArray *itemHints; // current selected item's index
@property (nonatomic, strong) NSArray *itemTitles; // all items' title
一個Delegate,用戶告訴調用方被選擇項目的索引值
@protocol HTNavGlideBarDelegate <NSObject>
@optional
/**
* When NavGlideBar Item Is Pressed Call Back
*
* @param index - pressed item's index
*/
- (void)itemDidSelectedWithIndex:(NSInteger)index;
@end
五、內部行為
1、導航欄中的項目被點擊:指示器位置和內容和按鈕的選擇狀態,通知調用方
- (void)itemPressed:(UIButton *)button
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
NSInteger index = [_items indexOfObject:button];
CGRect hintFrame = _hintView.frame;
hintFrame.origin.x = button.frame.origin.x - _navgationTabBar.contentOffset.x +10 ;
_hintView.frame = hintFrame;
[_hintView setHint:_itemHints[index]];
_hintViewFrame = _hintView.frame;
_hintViewFrame.origin.x = button.frame.origin.x +10;
[UIView commitAnimations];
for (int i = 0; i<[_items count]; i++) {
UIButton *btn = (UIButton *)_items[i];
btn.selected = NO;
}
button.selected = YES;
[_delegate itemDidSelectedWithIndex:index];
}
2、點擊向右側滑動按鈕:變換UIScrollView的ContentOffset
- (void)functionButtonPressed
{
NSInteger offset =_navgationTabBar.contentOffset.x+40;
NSInteger width =_navgationTabBar.contentSize.width + 40 - BAR_WIDTH;
if (offset>width) {
offset =0;
}
[_navgationTabBar setContentOffset:CGPointMake(offset,0) animated:YES];
}
六、補充說明
完成以上的分析,我們就可以著手開發控件的細節了。