iOs基礎篇（二十二）—— UIPickerView、UIDatePicker控件的使用

一、UIPickerView

UIPickerView是一個選擇器控件，可以生成單列的選擇器，也可生成多列的選擇器，而且開發者完全可以自定義選擇項的外觀，因此用法非常靈活。

1、常用屬性

（1）numberOfComponents：獲取UIPickerView指定列中包含的列表項的數量。

（2）showsSelectionIndicator：控制是否顯示UIPickerView中的選中標記（以高亮背景作為選中標記）。

2、常見方法

（1）- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;

　　獲取UIPickerView包含的列數量

 

（2）- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;

　　該UIPickerView將通過該方法判斷指定列應該包含多少個列表項

 

（3）- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;

　　該方法返回的CGFloat值將作為該UIPickerView控件中指定列的寬度

 

（4）- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;

　　該方法返回的CGFloat值將作為該UIPickerView控件中指定列中列表項的高度

 

（5）- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;

　　該方法返回的NSString值將作為該UIPickerView控件中指定列的列表項的文本標題

 

（6）- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;

　　該方法返回的UIView控件將直接作為該UIPickerView控件中指定列的指定列表項

 

（7）- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component;

  　　當用戶單擊選中該UIPickerView控件的指定列的指定列表項時將會激發該方法

 

demo代碼：

 

#import "ViewController.h"

@interface ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>{
 
    UIPickerView *pickerView;
    NSArray *nameArray;
    NSArray *ageArray;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    CGFloat width = self.view.frame.size.width;
    
    pickerView = [[UIPickerView alloc] initWithFrame:(CGRect){0,0,width,300}];
    [self.view addSubview:pickerView];
    pickerView.dataSource = self;
    pickerView.delegate = self;
    pickerView.showsSelectionIndicator = YES;
    
    // 創建並初始化兩個NSArray對象，分別作為兩列的數據
    nameArray = @[@"一", @"二", @"三", @"四", @"五", @"六"];
    ageArray =  @[@"11", @"22", @"33", @"44", @"55", @"66"];
    
}

// UIPickerViewDataSource中定義的方法，該方法返回值決定該控件包含多少列
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 2;// 返回2表明該控件只包含2列
}

//該方法的返回值決定該控件指定列包含多少個列表項
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if (component==0) {
        // 如果是第一列，返回nameArray中元素的個數
        // 即nameArray包含多少個元素，第一列就包含多少個列表項
        return [nameArray count];
    }else
        // 如果是其他列，返回ageArray中元素的個數。
        // 即ageArray包含多少個元素，其他列（只有第二列）包含多少個列表項
        return [ageArray count];
}

//UIPickerView中指定列的寬度
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{

    if (component==0) {
        // 如果是第一列，寬度為50
        return 50;
    }else
        // 如果是其他列（只有第二列），寬度為80
        return 80;
}

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{

    return 40;
}

//當用戶選中UIPickerViewDataSource中指定列和列表項時激發該方法
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    NSArray* name = [nameArray objectAtIndex:row];
    // 使用一個UIAlertView來顯示用戶選中的列表項
    UIAlertView* alert = [[UIAlertView alloc]
                          initWithTitle:@"提示"
                          message:[NSString stringWithFormat:@"你選中的%@是：%@"
                                   , name, [ageArray objectAtIndex:row]]
                          delegate:nil
                          cancelButtonTitle:@"確定"
                          otherButtonTitles:nil];
    [alert show];
}

//UIPickerView中指定列和列表項上顯示的標題
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    // 如果是第一列，返回nameArray中row索引處的元素
    // 即第一列的列表項標題由nameArray集合元素決定
    if (component==0) {
        return [nameArray objectAtIndex:row];
    }else
        return [ageArray objectAtIndex:row];

}

 

 

二、UIDatePicker

 UIDatePicker繼承自UIControl，專門用於接受日期、時間和持續時長的輸入。日期選取器的各列會按照指定的風格進行自動配置，這樣就讓開發者不必關心如何配置表盤這樣的底層操作。你也可以對其進行定制，令其使用任何范圍的日期。

1、創建UIDatePicker及添加代理

（1）創建UIPickerView；

（2）將pickerView添加至視圖；

（3）實現監聽事件方法；

#import "ViewController.h"

@interface ViewController (){

    UIDatePicker *datePicker;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    datePicker = [[UIDatePicker alloc] initWithFrame:(CGRect){0,0,300,300}];
    [self.view addSubview:datePicker];
    
    [datePicker addTarget:self action:@selector(dateChange:) forControlEvents:UIControlEventValueChanged];
    
}

- (void)dateChange:(UIDatePicker*)dateSender{
    UIDatePicker *ctrl = (UIDatePicker*)dateSender;
    NSDate *date = ctrl.date;
    
    NSLog(@"%@",date);

}

2、UIDatePicker設置顯示格式

(1) 創建並初始化NSLocale;

(2) 將datePicker.locale屬性set為NSLocale的值;

(3) 設置12/24小時制是根據手機本身時間顯示;

    
    NSLocale *locale = [[NSLocale alloc] initWithLocaleIdentifier:@"zw"];
    datePicker.locale = locale;

3、設置DatePicker的日歷

默認為當天；

[datePicker setCalendar:[NSCalendar currentCalendar]];

4、設置DatePicker的時區

[datePicker setTimeZone:[NSTimeZone defaultTimeZone]];

5、設置DatePicker的允許的最小/最大日期

minimumDate/maximunDate;

6、設置DatePicker的倒計時間

1) 設置日期選擇的模

 [datePicker setDatePickerMode:UIDatePickerModeCountDownTimer];

 2) 設置倒計時的時長

注意：設置倒計時時長需要在確定模式之后指定

 // 倒計時的時長，以秒為單位

[datePicker setCountDownDuration:10 * 60];

效果圖：

7、設置分鍾間隔

datePicker.minuteInterval = 15;

8、顯示小時，分鍾和AM/PM,這個的名稱是根據本地設置的

[datePicker setDatePickerMode:UIDatePickerModeTime]; 

效果圖：

9、顯示年月日，名稱根據本地設置的

[datePicker setDatePickerMode:UIDatePickerModeDate];

效果圖：

10、 顯示日期，小時，分鍾，和AM/PM,名稱是根據本地設置的

[datePicker setDatePickerMode:UIDatePickerModeDateAndTime];

效果圖：

11、顯示小時和分鍾

[datePicker setDatePickerMode:UIDatePickerModeCountDownTimer];

效果圖：