一、需求說(shuō)明

需要完成一個(gè)，具有左右滑動(dòng)的導(dǎo)航欄，同時(shí)單擊導(dǎo)航欄中的每個(gè)項(xiàng)目按鈕具有與其相對(duì)應(yīng)的提示功能。

二、通過(guò)具體的效果圖來(lái)了解

HTNavGlideBar.gif

三、分析控件的組成

1、一個(gè)支持左右滑動(dòng)的UIScrollView
2、多個(gè)可以點(diǎn)擊的按鈕
3、一個(gè)點(diǎn)擊向右側(cè)滑動(dòng)的按鈕
4、一個(gè)和選擇項(xiàng)目對(duì)應(yīng)的指示層
具體代碼內(nèi)容如下

UIScrollView    *_navgationTabBar;      // all items on this scroll view
NSMutableArray  *_items;
UIImageView     *_arrowButton;          // arrow button
HTNavHintLayer *_hintView;

四、對(duì)外的屬性和行為

itemHints：每個(gè)項(xiàng)目對(duì)應(yīng)提示內(nèi)容
itemTitles：每個(gè)項(xiàng)目的標(biāo)題

@property (nonatomic, strong)   NSArray     *itemHints;     // current selected item's index
@property (nonatomic, strong)   NSArray     *itemTitles;    // all items' title

一個(gè)Delegate，用戶告訴調(diào)用方被選擇項(xiàng)目的索引值

@protocol HTNavGlideBarDelegate <NSObject>

@optional
/**
  *  When NavGlideBar Item Is Pressed Call Back
  *
  *  @param index - pressed item's index
  */
 - (void)itemDidSelectedWithIndex:(NSInteger)index;

@end

五、內(nèi)部行為

1、導(dǎo)航欄中的項(xiàng)目被點(diǎn)擊：指示器位置和內(nèi)容和按鈕的選擇狀態(tài)，通知調(diào)用方

- (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、點(diǎn)擊向右側(cè)滑動(dòng)按鈕：變換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];
}

六、補(bǔ)充說(shuō)明

完成以上的分析，我們就可以著手開(kāi)發(fā)控件的細(xì)節(jié)了。

七、控件下載

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