設計一個帶提示信息的導航欄控件HTNavGlideBar

一、需求說明

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

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

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上下載和了解此控件的詳細代碼

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,877評論 22 665
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 上文講到,五行:火、土、金、水、木,分別對應人體五臟的心、脾、肺、腎、肝。 而這章,則講講五行的相生相克規律,若運...
    陸亦有居閱讀 539評論 0 0
  • 時間一天天的流逝,你收獲了些什么? 還記得你的初衷嗎?曾經揚言自己未來的生活一定過的很精彩,都說理想很豐滿,但現實...
    溜溜人生閱讀 594評論 0 0
  • 喬之對自家大學,是懷著一顆敬仰又虔誠的心的。原因是學校的大門太有特色了,朱門碧瓦的仿宮殿門,讓喬之每次進校,都感覺...
    一顆好看的紐扣閱讀 455評論 0 0