一、需求说明

需要完成一个，具有左右滑动的导航栏，同时单击导航栏中的每个项目按钮具有与其相对应的提示功能。

二、通过具体的效果图来了解

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上下载和了解此控件的详细代码

设计一个带提示信息的导航栏控件HTNavGlideBar