UIPickerView与UIDatePicker

UIPickerView与UIDatePicker都是可以上下滑动选择内容的控件,不同的是UIPickerView可以设置任何内容,而UIDatePicker只能显示日期类,所以UIDatePicker相对比较简单.在使用时,时间日期类优先选择UIDatePicker,其他类型选择UIPickerView.

UIDatePicker

UIDatePicker是一个格式比较固定的控件,只需简单的设置即可使用.一般结合UItextFeild使用.
在开发中有时需要让用户选择出生日期,这时UIDatePicker就派上用场了.

搭建界面如下:

基本思路:创建一个UIDatePicker,设置textFeild的inputView属性为UIDatePicker.这样点击键盘时弹出的就是UIDatePicker了.代码如下:

//拿到storyboard中的birthdayField控件
@property (weak, nonatomic) IBOutlet UITextField *birthdayField;
//定义成员变量,给textFeild的文字赋值
@property(nonatomic,strong) UIDatePicker *datePicker;

- (void)viewDidLoad {
    [super viewDidLoad];
    //设置加载界面后_birthdayField获取焦点
    [_birthdayField becomeFirstResponder];
    //创建自定义生日键盘
    [self setBirthdayField];
}
- (void)setBirthdayField{
    //创建UIDatePicker
    UIDatePicker *datePicker = [[UIDatePicker alloc] init];
    //设置本地语言
    datePicker.locale = [NSLocale localeWithLocaleIdentifier:@"zh"];
    //设置日期显示的格式
    datePicker.datePickerMode = UIDatePickerModeDate;
    //设置_birthdayField的inputView控件为datePicker
    _birthdayField.inputView = datePicker;
    _datePicker = datePicker;
    //监听datePicker的ValueChanged事件
    [datePicker addTarget:self action:@selector(valueChange:) forControlEvents:UIControlEventValueChanged];
}

- (void)valueChange:(UIDatePicker *)datePicker{
    //创建一个日期格式
    NSDateFormatter *fmt = [[NSDateFormatter alloc] init];
    //设置日期的显示格式
    fmt.dateFormat = @"yyyy-MM-dd";
    //将日期转为指定格式显示
    NSString *dateStr = [fmt stringFromDate:datePicker.date];
    _birthdayField.text = dateStr;
}


- (void)textFieldDidBeginEditing:(UITextField *)textField;{
    //确保加载时也能获取datePicker的文字
    [self valueChange:_datePicker];
    
    
    > 设置textField不能输入文字
#pragma mark - UITextFieldDelegate

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
    return NO;
}

效果图:

UIPickerView

UIPickerView是一个比较纯洁的控件,因为它的内置属性较少,需要手动设置.UIPickerView跟UITableView差不多,既能滚动,又能显示数据.同理,UIPickerView也需要设置数据源和代理,遵守UIPickerViewDataSource,UIPickerViewDelegate并实现相应的数据源和代理方法才能正常使用控件.

开发中常用的UIPickerViewDataSource方法:

@required

// returns the number of 'columns' to display.返回列数
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;

// returns the # of rows in each component..返回第component列有多少行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;

开发中常用的UIPickerViewDelegate方法:

//返回第component列第row行的文字
- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;
//返回第Component列第row行的图片
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(nullable UIView *)view;
//选中第component第row行的时候调用.注意:这个方法只有用户手动选择的时候才会调用.
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component;
//返回第component列的宽度
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component ;
- //返回第component列第row行的高度
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component ;

实现点餐系统

1.搭建界面如下:

> 2.将随机按钮拖至控制器代码实现栏,监听其点击事件,将三个label pickerView拖至控制器代码类扩展中,方便控制其内容的显示.

3.设置pickerView的数据源及代理为当前控制器,可通过代码/storyboard均可设置.

  //代码设置
  _pickerView.delegate = self;
  _pickerView.datasource = self;

storyboard:

4.加载相应的plist文件,并实现数据源及代理方法.

//数组保存plist文件的数据
@property(nonatomic,strong) NSArray *foods;


@implementation ViewController
//数组懒加载
- (NSArray *)foods{
    if (_foods == nil) {
        NSString *path = [[NSBundle mainBundle] pathForResource:@"foods.plist" ofType:nil];
        _foods = [NSArray arrayWithContentsOfFile:path];
    }
    return _foods;
}

//监听按钮点击
- (IBAction)random:(UIButton *)sender {
    
    for (int i = 0; i < 3; i++) {
        //定义一个数随机每列的数量
        int count = arc4random_uniform((u_int32_t)[self.foods[i] count]);
        //定义一个数随机每列中每行的数字
        NSInteger random = arc4random_uniform((u_int32_t)count);
        //让pickerView随机选中第i列第random行
        [_pickerView selectRow:random inComponent:i animated:YES];
        //主动给label赋值
        [self pickerView:_pickerView didSelectRow:random inComponent:i];
    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
    //确保加载时也能显示对应label的文字
    for (int i = 0; i < 3; i++) {
        [self pickerView:_pickerView didSelectRow:0 inComponent:i];
    }
}

#pragma mark - <UIPickerViewDataSource>
//返回几行
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return self.foods.count;
}

// returns the # of rows in each component..返回第component列第row行的个数
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    
    return [self.foods[component] count];
}

#pragma mark - <UIPickerViewDelegate>
//返回文字数据
- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return self.foods[component][row];
}
//判断选择的某一列,显示对应的文字数据到label
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    switch (component) {
        case 0:
            self.furitLabel.text = self.foods[component][row];
            break;
        case 1:
            self.mainLabel.text = self.foods[component][row];
            break;
        case 2:
            self.drinkLabel.text = self.foods[component][row];
            break;
    } 
}

@end

效果图: