点击textField弹出自定义pickerView的完整解决方案

这几天做一个应用有这样一个需求,有一个'新建收货地址'的页面(tableView),其中有一个textField是输入城市的,要求是点击textField(输入框)后,下面弹出来一个自定义的带有toolBar的pickerView,完成效果的效果图如下.

首先,我在网上查了好久,始终找不到一个符合要求的完整的解决方案,相信一定不是没有人懂这个功能,而是很多懂的人不屑于分享吧(或者是不愿意分享吧).废话不多说,直接上干货^_^

1- 首先上面的页面是一个viewController上添加一个tableViewController,pickerVIew和toolBar是属于上面的viewController.

易错点和难点我大致总结了一下:

1)pickerView和toolBar一定要属于上面的tableViewController,我(之前我把pickerView和toolBar作为下面的viewController,一直出错).

2)把pickerView和toolBar作为tableViewController的成员变量来强引用(保证两者创建完成后,在方法执行完毕不会被销毁就可以,方法不唯一).

3)pickerView和toolBar不必添加到任何一个视图上面,在textField被点击成为第一响应者的时候,系统会自动召唤pickerView和toolBar,两者会以'屏幕键盘'的弹出方式,从屏幕下面弹出来,这个功能应该是苹果封装设定好的,没有why.

4)pickerView和toolBar的大小需要自己设定好,具体细节可以自己研究一下.

5)当不需要pickerView的时候,只要取消textField的'第一响应者'身份就OK了.

6)picker需要遵守代理来自定义.

2- 重点代码

// tableViewController.m中的code

@interface AddressAddTableController () <UIPickerViewDelegate, UIPickerViewDataSource, UITextFieldDelegate>

@property(nonatomic,weak)UITextField *secfield;

@property(nonatomic,strong)UIPickerView *cityPickerView;

@property(nonatomic,strong)UIToolbar *myToolbar;

@property(nonatomic,strong)NSArray *nameArray;

@end

#pragma mark - 加载选择器&toolbar

- (void)loadPickerViewAndToolbar {
    
    // --- pickerView ---
    
    self.nameArray = [NSArray arrayWithObjects:@"qfeung", @"十万大山", @"通辽", @"南疆", @"上海", @"广州", @"深圳", @"重庆", @"武汉", @"天津", nil];
    
    // 创建pickerView
    self.cityPickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height, self.view.bounds.size.width, 200)];
    self.cityPickerView.backgroundColor = [UIColor lightGrayColor];
    
    // 代理
    self.cityPickerView.delegate = self;
    self.cityPickerView.dataSource = self;
    
    // --- tool bar ---
    
    UIBarButtonItem *doneBBI = [[UIBarButtonItem alloc]
                                initWithTitle:@"确定"
                                style:UIBarButtonItemStyleDone
                                target:self
                                action:@selector(doneClick)];

    UIBarButtonItem *cancelBBI = [[UIBarButtonItem alloc] initWithTitle:@"取消" style:UIBarButtonItemStylePlain target:self action:@selector(cancelClick)];
    UIBarButtonItem *flexibleBBI = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    self.myToolbar = [[UIToolbar alloc]initWithFrame:
                      CGRectMake(0, self.view.frame.size.height-
                                 self.cityPickerView.frame.size.height-20, self.view.bounds.size.width, 40)];
    [self.myToolbar setBarStyle:UIBarStyleBlackOpaque];
    NSArray *toolbarItems = [NSArray arrayWithObjects:cancelBBI, flexibleBBI, doneBBI, nil];
    [self.myToolbar setItems:toolbarItems];
    
}

#pragma mark - Picker view data source

// returns the number of 'columns' to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 1;
}

// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return _nameArray.count;
}

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component {
    return 30;
}

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    return self.view.bounds.size.width;
}
/**
 //- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
 //    NSString *str = [NSString stringWithString:_nameArray[row]];
 //    return str;
 //}
 */// <???>不知道有什么用?
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {
    if (!view) {
        view = [[UIView alloc] init];
    }
    UILabel *textlabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 30)];
    textlabel.textAlignment = NSTextAlignmentCenter;
    textlabel.text = _nameArray[row];
    textlabel.font = [UIFont systemFontOfSize:19];
    [view addSubview:textlabel];
    return view;
}


// didSelectRow
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    
    self.secfield.text = self.nameArray[row];
}

#pragma mark - tool bar 上按钮的点击事件

- (void)doneClick {
    if ( [self.secfield isFirstResponder] ) {
        [self.secfield resignFirstResponder];
    }
}

- (void)cancelClick {
    [self doneClick];
}

#pragma mark - Table view data source

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 6;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // sex select
    if (indexPath.row == 1) {
            AddressEditSelectTableCell *cell_select = [tableView dequeueReusableCellWithIdentifier:@"cellid_select" forIndexPath:indexPath];
        
        return cell_select;
    }
    // normal cell
    AddressEditNormalTableCell *cell_normal = [tableView dequeueReusableCellWithIdentifier:@"cellid_normal" forIndexPath:indexPath];
    switch (indexPath.row) {
        case 0:
            cell_normal.firLabel.text = @"联系人";
            cell_normal.secfield.placeholder = @"收货人姓名";
            break;
        case 2:
            cell_normal.firLabel.text = @"手机号码";
            cell_normal.secfield.placeholder = @"蜜蜂侠联系你的电话";
            cell_normal.secfield.keyboardType = UIKeyboardTypeNumberPad; 
            break;
        case 3:
            cell_normal.firLabel.text = @"所在城市";
            cell_normal.secfield.placeholder = @"请选择城市";
            
            cell_normal.secfield.delegate = self;
            
            cell_normal.secfield.inputView = self.cityPickerView;
            cell_normal.secfield.inputAccessoryView = self.myToolbar;
            
            self.secfield = cell_normal.secfield;
            
            break;
        case 4:
            cell_normal.firLabel.text = @"所在地区";
            cell_normal.secfield.placeholder = @"请选择你的住宅,大厦或学校";
            break;
        case 5:
            cell_normal.firLabel.text = @"详细地址";
            cell_normal.secfield.placeholder = @"请输入楼号门牌号等详细信息";
            break;
            
        default:
            break;
    }
    
    // Configure the cell...
    
    
    return cell_normal;
}

3- 重点代码截图分析