最近做项目用到一个关于下拉列表选择提现的控件,就在网上找了一下并结合自己的需求重新做了一个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 地址下载