欢迎来到风尚网
风尚网首页 > 首页 > 阅读 > 设计一个带提示信息的导航栏控件HTNavGlideBar

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

作者:红胡子刚子 2016-02-21 07:12 来源:简书 编辑:美朵

文章摘要
一、需求说明需要完成一个,具有左右滑动的导航栏,同时单击导航栏中的每个项目按钮具有与其相对应的提示功能。二、通过具体的效果图来了解HTNavGlideBar.gif三、分析控件的组成1、一个支持左右滑动的UIScrollView2、多个可以点击的按钮3、一个点击向右侧滑动的按钮4、一个和选择项目对应的指示层具体代码内容如下UIScrollView*_navgationTabBar;//allitemsonthisscrollviewNSMutableArray*_items;UIImageV...

一、需求说明

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

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

HTNavGlideBar.gif

三、分析控件的组成

1、一个支持左右滑动的UIScrollView2、多个可以点击的按钮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上下载和了解此控件的详细代码

小主,按键盘右方向键 → 翻页可以跳过片头呢

  

上一篇:一个好的开发规范应该包含哪些内容

  

下一篇:自定义日期选择控件HTPopDateView的设计

  

本文标题:设计一个带提示信息的导航栏控件HTNavGlideBar

原文链接:http://i.she.vc/28711.html

和本文相似的内容:

    点击排行