功能

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

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

实现

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

1、一直显示并可以点击的View1(FilterView),由UIButton组成。

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

事件部分:

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

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

具体实现

1、FilterView的实现

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

FilterView的Delegate

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

@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]为存储的显示的内容。

2、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来实现。

还是看代码最清楚了点击下载代码

走路放慢脚步
107 声望3 粉丝

It is what you do that defines you