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

效果图:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容