一、需求说明
需要完成一个,具有左右滑动的导航栏,同时单击导航栏中的每个项目按钮具有与其相对应的提示功能。
二、通过具体的效果图来了解
三、分析控件的组成
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];
}
六、补充说明
完成以上的分析,我们就可以着手开发控件的细节了。