iOS 下拉选择 comboBox

最近要做一个下拉选择的控件，搜索到网上对这类控件有个总称：comboBox

刚好看到一个简单的Demo非常适合我的需求，就自己也试着做了一个。

效果如下：



这个下拉选择控件，实际上是由一个UIButton 和一个 UITableView实现的

在点击Button后，显示tableView;选择了tableView的row后，button文字改变，并且tableView收起。

------------------------------------------

下面我们看看具体代码实现：

1、首先自定义一个cell，作为下拉列表展示的cell。这里我使用了Xib



把cell 中的 label连线到cell文件中

#import <UIKit/UIKit.h>

@interface SelectionCell : UITableViewCell

@property (retain, nonatomic) IBOutlet UILabel *lb;
@end

#import "SelectionCell.h"

@implementation SelectionCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// Initialization code

}
return self;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];

}

@end

2、在下拉搜索的控制器中创建按钮

//选择按钮
UIButton *selectBtn = [[UIButton alloc]init];
selectBtn.frame = CGRectMake(0, 0, 50, searchH);
[selectBtn setTitle:@"姓名" forState:UIControlStateNormal];
selectBtn.titleLabel.font = [UIFont systemFontOfSize:12];
[selectBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[selectBtn addTarget:self action:@selector(changeOpenStatus) forControlEvents:UIControlEventTouchUpInside];
self.selectBtn = selectBtn;

[searchView addSubview:self.selectBtn];

3、创建下拉的列表

下拉列表的高度可设置为0.

这里我使用了一个block来创建table，大家也可以用传统的数据源、代理的方法：）

//姓名/部门选择
_selectTable = [[TableViewWithBlock alloc]initWithFrame:CGRectMake(searchX, CGRectGetMaxY(searchView.frame) , selectBtn.mj_w, 0)];

[_selectTable initTableViewDataSourceAndDelegate:^(UITableView *tableView,NSInteger section){
return 2;

} setCellForIndexPathBlock:^(UITableView *tableView,NSIndexPath *indexPath){
SelectionCell *cell=[tableView dequeueReusableCellWithIdentifier:@"SelectionCell"];
if (!cell) {
cell=[[[NSBundle mainBundle]loadNibNamed:@"SelectionCell" owner:self options:nil]objectAtIndex:0];
[cell setSelectionStyle:UITableViewCellSelectionStyleGray];
}
if (indexPath.row == 0) {
[cell.lb setText:@"姓名"];
}else{
[cell.lb setText:@"部门"];
}

return cell;
} setDidSelectRowBlock:^(UITableView *tableView,NSIndexPath *indexPath){
SelectionCell *cell=(SelectionCell*)[tableView cellForRowAtIndexPath:indexPath];
[_selectBtn setTitle:cell.lb.text forState:UIControlStateNormal];
[_selectBtn sendActionsForControlEvents:UIControlEventTouchUpInside];
}];

[self.view addSubview:_selectTable];

4、定义一个列表是否展开的值

BOOL isOpened;

5、创建点击选择按钮实现的方法

- (void)changeOpenStatus {

NSLog(@"btnClick----------");

if (isOpened) {

[UIView animateWithDuration:0.3 animations:^{

CGRect frame=_selectTable.frame;
frame.size.height = 0;
[_selectTable setFrame:frame];

} completion:^(BOOL finished){

isOpened=NO;
}];
}else{

[UIView animateWithDuration:0.3 animations:^{

CGRect frame=_selectTable.frame;

frame.size.height = seleteTableH;
[_selectTable setFrame:frame];
} completion:^(BOOL finished){
isOpened=YES;
}];
}
}

------------------------------------------

这样，下拉选择菜单就实现了，你们学会了吗？