IOS筆記045-UIDatePicker和UIPickerView

這是兩種可以上下滾動的控件。

這是UIDatePicker，可以顯示日期和時間。

這個是UIPickerView，顯示類似幾個選擇項的界面。

注意點:PickerView的高度不能改,默認162,PickerView里面每行的高度 可以改,不要弄混淆了。 

 

做一個簡單界面進行練習。單擊生日輸入框彈出自定義UIDatePicker，單擊城市彈出自定義UIPickerView選擇城市。

1、UIDatePicker使用

在點擊過文本輸入框后彈出日期選中鍵盤。需要給UITextField控件的inutView屬性指定需要顯示的界面。

這里顯示的代碼如下：

- (void)setBirthdayFieldKeyboard

{

    //

    UIDatePicker *datePicker = [[UIDatePicker alloc] init];

    _datePicker = datePicker;

    // 只顯示時間

    datePicker.datePickerMode = UIDatePickerModeDate;

    // 顯示中文

    datePicker.locale = [NSLocalelocaleWithLocaleIdentifier:@"zh"];

    // 監聽值得改變

    [datePicker addTarget:selfaction:@selector(datePickerValueChanged:) forControlEvents:UIControlEventValueChanged];

    self.birthdayField.inputView = datePicker;

}

在程序加載時進行設定

- (void)viewDidLoad {

    [superviewDidLoad];

    [selfsetBirthdayFieldKeyboard];

}

然后對UITextField的一些屬性進行設置，比如說不能輸入日期，只能選擇顯示日期。可以在以下代理方法中實現

#pragma mark - textField代理方法

// 是否允許修改填充字符串

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string

{

    returnNO;

}

當然使用之前要指定代理並遵守協議。

然后再選擇過時間后，同步更新到文本輸入框中，這里需要監聽控件的valueChanged的方法

    [datePicker addTarget:self action:@selector(datePickerValueChanged:) forControlEvents:UIControlEventValueChanged];

響應方法

- (void)datePickerValueChanged:(UIDatePicker *)datePicker

{

    NSDateFormatter *formatter = [[NSDateFormatteralloc] init];

    // 格式化日期格式

    formatter.dateFormat = @"yyyy-MM-dd";

    NSString *date = [formatter stringFromDate:datePicker.date];

    // 顯示時間

    self.birthdayField.text = date;

}

最后要設置以下UITextField控件的默認值，默認顯示0行0列的值

在改變文本輸入框狀態時進行設置默認值。

// 是否允許開始編輯（代理方法）

- (void)textFieldDidBeginEditing:(UITextField *)textField

{

    // 添加自定義窗口

    [selfdatePickerValueChanged:self.datePicker];

}

2、UIPickerView使用

先將城市選擇鍵盤添加到文本輸入框

// 設置城市鍵盤

- (void)setCitiesFieldKeyboard

{

    //

    UIPickerView *picker = [[UIPickerViewalloc] init];

    _cityPicker = picker;

    picker.dataSource = self;

    picker.delegate = self;

    self.cityField.inputView = picker; 

}

設置代理和數據源為控制器，實現響應的方法

#pragma mark UIPickerView 數據源

// 列數

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView

{

    return 2;

}

// 某一列行數

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component

{

    if (component == 0)  // 省會

    {

        return self.provinces.count;

    }

    else  // 其他城市

    {

        SLQProvince *pro = self.provinces[_proIndex];

        return pro.cities.count;

    }

}

代理方法

#pragma mark UIPickerView 代理

// 每行的標題

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

{

    if (component == 0)  // 省會

    {

        // 獲取省會

        SLQProvince *pro = self.provinces[row];

        return pro.name;

    }

    else  // 其他城市

    {

        

        SLQProvince *pro = self.provinces[_proIndex];

        return pro.cities[row];

    }

}

// 是否選中某行

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component

{

    // 滾動省會刷新城市

    if(component == 0)

    {

        // 記錄當前省會

        _proIndex = [pickerView selectedRowInComponent:0];

        [pickerView reloadComponent:1];

    }

    

    // 獲取選中省會

    SLQProvince *pro = self.provinces[_proIndex];

    NSInteger cityIndex = [pickerView selectedRowInComponent:1];

    NSString *cityName = pro.cities[cityIndex];

    _cityField.text = [NSString stringWithFormat:@"%@-%@",pro.name,cityName];

}

然后在文本輸入框的代理方法中添加默認顯示對象

// 是否允許開始編輯

- (void)textFieldDidBeginEditing:(UITextField *)textField

{

    if (textField == self.birthdayField)

    {

        // 添加自定義窗口

        [selfdatePickerValueChanged:self.datePicker];

    }

    else

    {

        [selfpickerView:self.cityPickerdidSelectRow:0inComponent:0]; // 默認顯示0行0列

    }

}

效果

 

 

 主要代碼參考

//
//  ViewController.m
//  KVC實現原理
//
//  Created by Christian on 15/6/9.
//  Copyright (c) 2015年 slq. All rights reserved.
//

#import "ViewController.h"
#import "SLQProvince.h"
@interface ViewController () <UITextFieldDelegate,UIPickerViewDataSource,UIPickerViewDelegate>

@property (nonatomic,weak) UIDatePicker *datePicker;
@property (nonatomic, weak) UIPickerView *cityPicker;
@property (nonatomic, strong) NSMutableArray *provinces;

@property (nonatomic, assign) NSInteger proIndex;

@end

@implementation ViewController


// 懶加載省會
- (NSMutableArray *)provinces
{
    if (_provinces == nil) {
        // 裝所有的省會
        _provinces = [NSMutableArray array];
        
        // 加載plist文件
        NSString *filePath = [[NSBundle mainBundle] pathForResource:@"provinces.plist" ofType:nil];
        NSArray *arr = [NSArray arrayWithContentsOfFile:filePath];
        
        for (NSDictionary *dict in arr) {
            // 字典轉模型
            SLQProvince *p = [SLQProvince provinceWithDict:dict];
            
            [_provinces addObject:p];
        }
    }
    return _provinces;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //
    self.birthdayField.delegate = self;
    self.cityField.delegate = self;
    //
    [self setBirthdayFieldKeyboard];
    [self setCitiesFieldKeyboard];
    
}

#pragma mark - textField代理方法
// 是否允許修改填充字符串
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
    return NO;
}
// 是否允許開始編輯
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
    if (textField == self.birthdayField)
    {
        // 添加自定義窗口
        [self datePickerValueChanged:self.datePicker];
    }
    else
    {
        [self pickerView:self.cityPicker didSelectRow:0 inComponent:0];
    }
}

#pragma mark - UIPickerView
#pragma mark UIPickerView 數據源
// 列數
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 2;
}
// 某一列行數
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    if (component == 0)  // 省會
    {
        return self.provinces.count;
    }
    else  // 其他城市
    {
        SLQProvince *pro = self.provinces[_proIndex];
        return pro.cities.count;
    }
}

#pragma mark UIPickerView 代理
// 每行的標題
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    if (component == 0)  // 省會
    {
        // 獲取省會
        SLQProvince *pro = self.provinces[row];
        return pro.name;
    }
    else  // 其他城市
    {
        
        SLQProvince *pro = self.provinces[_proIndex];
        return pro.cities[row];
    }
}
// 是否選中某行
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    // 滾動省會刷新城市
    if(component == 0)
    {
        // 記錄當前省會
        _proIndex = [pickerView selectedRowInComponent:0];
        [pickerView reloadComponent:1];
    }
    
    // 獲取選中省會
    SLQProvince *pro = self.provinces[_proIndex];
    NSInteger cityIndex = [pickerView selectedRowInComponent:1];
    NSString *cityName = pro.cities[cityIndex];
    _cityField.text = [NSString stringWithFormat:@"%@-%@",pro.name,cityName];
}


#pragma mark - 自定義方法
// 設置城市鍵盤
- (void)setCitiesFieldKeyboard
{
    //
    UIPickerView *picker = [[UIPickerView alloc] init];
    _cityPicker = picker;
    picker.dataSource = self;
    picker.delegate = self;
    self.cityField.inputView = picker;
}

// 設置生日鍵盤
- (void)setBirthdayFieldKeyboard
{
    //
    UIDatePicker *datePicker = [[UIDatePicker alloc] init];
    _datePicker = datePicker;
    // 只顯示時間
    datePicker.datePickerMode = UIDatePickerModeDate;
    // 顯示中文
    datePicker.locale = [NSLocale localeWithLocaleIdentifier:@"zh"];
    // 監聽值得改變
    [datePicker addTarget:self action:@selector(datePickerValueChanged:) forControlEvents:UIControlEventValueChanged];
    self.birthdayField.inputView = datePicker;
}

- (void)datePickerValueChanged:(UIDatePicker *)datePicker
{
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    // 格式化日期格式
    formatter.dateFormat = @"yyyy-MM-dd";
    NSString *date = [formatter stringFromDate:datePicker.date];
    // 顯示時間
    self.birthdayField.text = date;
}
@end

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意點:PickerView的高度不能改,默認162,PickerView里面每行的高度 可以改,不要弄混淆了。