一、需求說明

需要完成一個，具有左右滑動的導航欄，同時單擊導航欄中的每個項目按鈕具有與其相對應的提示功能。

二、通過具體的效果圖來了解

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];
}

六、補充說明

完成以上的分析，我們就可以著手開發控件的細節了。

七、控件下載

去GitHub上下載和了解此控件的詳細代碼