下拉列表的使用

最近做项目用到一个关于下拉列表选择提现的控件，就在网上找了一下并结合自己的需求重新做了一个demo，希望用到的可以看看

首先介绍一下ZBDropdownMenu.h文件，该类有一个代理方法，用于点击下拉列表后在列表消失或者出现时做一些事情，最后一个代理用于点击获取当前cell，进行其他操作

@class ZBDropdownMenu;

@protocol ZBDropdownMenuDelegate <NSObject>

@optional
- (void)dropdownMenuWillShow:(ZBDropdownMenu *)menu;    // 当下拉菜单将要显示时调用
- (void)dropdownMenuDidShow:(ZBDropdownMenu *)menu;     // 当下拉菜单已经显示时调用
- (void)dropdownMenuWillHidden:(ZBDropdownMenu *)menu;  // 当下拉菜单将要收起时调用
- (void)dropdownMenuDidHidden:(ZBDropdownMenu *)menu;   // 当下拉菜单已经收起时调用

- (void)dropdownMenu:(ZBDropdownMenu *)menu selectedCellNumber:(NSInteger)number; // 当选择某个选项时调用

@end


@interface ZBDropdownMenu : UIView <UITableViewDataSource,UITableViewDelegate>

@property (nonatomic,strong) UIButton * mainBtn;  // 主按钮 可以自定义样式 可在.m文件中修改默认的一些属性

@property (nonatomic,strong) NSString * title;    // 可以定义按钮title

@property (nonatomic, weak) id <ZBDropdownMenuDelegate>delegate;


- (void)setMenuTitles:(NSArray *)titlesArr rowHeight:(CGFloat)rowHeight;  // 设置下拉菜单控件样式

- (void)showDropDown; // 显示下拉菜单
- (void)hideDropDown; // 隐藏下拉菜单

下面介绍一下最主要的两个方法就是点击消失或者出现下拉动画，其实就是改变tableView的高度，并加入动画即可

- (void)showDropDown{   // 显示下拉列表
    
    [_listView.superview bringSubviewToFront:_listView]; // 将下拉列表置于最上层
    
    if ([self.delegate respondsToSelector:@selector(dropdownMenuWillShow:)]) {
        [self.delegate dropdownMenuWillShow:self]; // 将要显示回调代理
    }
    // 改变箭头方向
    _arrowMark.transform = CGAffineTransformMakeRotation(M_PI);
    
    [UIView animateWithDuration:AnimateTime animations:^{
        
        _listView.frame  = CGRectMake(_listView.X,
                                      _listView.Y
        , _listView.Witdh, _rowHeight *_titleArr.count);
        _tableView.frame = CGRectMake(0, 0, _listView.Witdh, _listView.Height);
        
    }completion:^(BOOL finished) {
        
        if ([self.delegate respondsToSelector:@selector(dropdownMenuDidShow:)]) {
            [self.delegate dropdownMenuDidShow:self]; // 已经显示回调代理
        }
    }];
    
    _mainBtn.selected = YES;
}

隐藏动画

- (void)hideDropDown{  // 隐藏下拉列表
    
    if ([self.delegate respondsToSelector:@selector(dropdownMenuWillHidden:)]) {
        [self.delegate dropdownMenuWillHidden:self]; // 将要隐藏回调代理
    }
    
    _arrowMark.transform = CGAffineTransformIdentity;
    [UIView animateWithDuration:AnimateTime animations:^{
        
        _listView.frame  = CGRectMake(_listView.X, _listView.Y, _listView.Witdh, 0);
        _tableView.frame = CGRectMake(0, 0, _listView.Witdh, _listView.Height);
        
    }completion:^(BOOL finished) {
        
        if ([self.delegate respondsToSelector:@selector(dropdownMenuDidHidden:)]) {
            [self.delegate dropdownMenuDidHidden:self]; // 已经隐藏回调代理
        }
    }];
    
    _mainBtn.selected = NO;
}

使用方法很简单，直接创建一个对象，并添加下拉列表的数据,并给title设置自己的风格

    NSArray *titleArray = @[@"储蓄银行卡",@"微信",@"支付宝"];
    ZBDropdownMenu * dropdownMenu = [[ZBDropdownMenu alloc] init];
    [dropdownMenu setFrame:CGRectMake(14, 144, SCREEN_WIDTH - 28, 50)];
    [dropdownMenu setMenuTitles:titleArray rowHeight:50];
    dropdownMenu.delegate = self;
    dropdownMenu.title = @"提现方式";
    dropdownMenu.tag = 0;
    // 给title设置富文本
    NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@：   %@",dropdownMenu.title,titleArray[0]]];
    [str addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0,dropdownMenu.title.length)];
    [str addAttribute:NSForegroundColorAttributeName value:[UIColor lightGrayColor] range:NSMakeRange(dropdownMenu.title.length+4,[titleArray[0] length])];
    [dropdownMenu.mainBtn setAttributedTitle:str forState:UIControlStateNormal];
    
    [self.view addSubview:dropdownMenu];
    

详细完整demo 地址下载