iOS下的下拉菜单

功能

开发App时,常常须要根据不一样条件显示相应的数据。使用下拉菜单是一种很好的方案,包括一级菜单和二级菜单。git

如图(来自爱飞扬旅游App):

实现

该下拉菜单由两部分组成。

一、一直显示并能够点击的View1(FilterView),由UIButton组成。github

二、显示下拉菜单的View2(PulldownMenu),由UITableView组成。有二级菜单时,则由两个UITableView组成。segmentfault

事件部分:

一、点击View1中的UIButton后,显示View2。ide

二、点击View2中的TableView的Cell后,更改对应的View1中UIButton的Title。经过设置代理,在Controller类中实现界面刷新。动画

具体实现

一、FilterView的实现

FilterView继承UIView,包括了几个用于显示已选择项内容的UIButton。atom

FilterView的Delegate

在Controller类中添加FilterView后,须要设置FilterView的delegate。FiltView的Delegate对应PullDownMenu的Delegate。也就是,点击PullDownMenu中UITableView的某个Cell后,PullDownMenu Delegate ->FilterView Delegate -> Controller Functionspa

@class FilterView;

@protocol FilterViewDelegate <NSObject>
@optional
-(void)filterView:(FilterView*)filterView didSelectedCell:(NSDictionary*)info selectedMenuIndex:(NSInteger)tag;
-(void)filterViewWillDismiss;
@end

@property (assign, nonatomic) id<FilterViewDelegate> delegate;
FilterView的init方法:
//titleArray存储了UIButton的默认title
- (id)initWithFrame:(CGRect)frame
   buttonTitleArray:(NSArray*)titleArray
    dataSourceArray:(NSArray*)dataArray
           delegate:(id<FilterViewDelegate>)delegate
设置UIButton的点击事件:
[b addTarget:self
          action:@selector(showTableView:) 
forControlEvents:UIControlEventTouchUpInside];

showTableView:显示PullDownMenu。代理

[PullDownMenu showMenuBelowView:self
                          array:[_dataArray objectAtIndex:b.tag]
              selectedMenuIndex:b.tag
                 selectedDetail:[_selectedArray objectAtIndex:b.tag]
                       delegate:self];

[_dataArray objectAtIndex:b.tag]为存储的显示的内容。code

二、PullDownMenu的实现

FilterView的UIButton点击后,建立PullDownMenu以及对应UITableView,并显示PullDownMenu。PullDownMenu是一个UIView,上面添加UITableView。继承

PullDownMenu的init

-(UIView*)createPullDownMenuView:(NSArray *)array
               selectedMenuIndex:(NSInteger)tag
                  selectedDetail:(NSDictionary*)selectedDetail
                        delegate:(id<PullDownMenuDelegate>)delegate

经过array判断是否有二级菜单。

显示PullDownMenu并点击

经过设置PullDownMenu的Frame调用[UIView animateWithDuration..]方法,来动画显示PullDownMenu。PullDownMenu的点击经过-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath来实现。

仍是看代码最清楚了点击下载代码
相关文章
相关标签/搜索