UIPickerView

实现效果

UIPickerView实现效果

UIDatePicker实现效果

记录

UILabel
    文本控件

    @properties

    (NSString *)text
        Label内容

    (UIFont *)font
        设置字体及文字大小

    (UIColor *)textColor
        设置字体颜色

    (NSTextAlignment)textAlignment
        设置文字对齐方式

            UITextAlignmentCenter
                居中对齐

            UITextAlignmentLeft
                左对齐

            UITextAlignmentRight
                右对齐

    (UIColor *)shadowColor
        设置文字阴影颜色
    
    (UIColor *)backgroundColor
        设置背景颜色


UIPickerView
    滚动选择器
    
    @properties

    (BOOL)showsSelectionIndicator
        获取、设置高亮选中行

    @tasks

    -(NSInteger)selectedRowInComponent:
        设置component选中行

    - (void)selectRow:(NSInteger)row inComponent:(NSInteger)component animated:(BOOL)animated;
        设置默认在compoent列中默认选中row行


要给UIPickerView绑定数据必须实现UIPickerViewDataSource和UIPickerViewDelegate两个协议


UIPickerViewDataSource
    
    @required tasks

    -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
        设置pickerView有多少列component

    -(NSInteger)pickerView:(UIPickerView *)pickerView:numberOfRowsIncomponent:(NSInteger)component
        设置pickerView中component列有多少行


UIPickerViewDelegate
    
    @tasks

    -(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
        设置pickerView中component列row行的数据

    -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
        选中pickerView中component列row行时触发的事件


UIDatePicker
    日期选择器
    
    @tasks

    (NSLocale *)locale

    (UIDatePickerModel)datePickerMode
        获取、设置UIDatePicker模式
            
            UIDatePickerModeDate
                日期选择

            UIDatePickerModeDateAndTime
                日期和时间选择

            UIDatePickerModeTime
                时间选择

            UIDatePickerModeCountDownTimer

    (NSDate)date
        获取、设置选中日期

    (NSDate)minimumDate
        获取、设置可选择的最小时间

    (NSDate)maximumDate
        获取、设置可选择的最大时间

练习

// ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIPickerViewDataSource, UIPickerViewDelegate>

@property (nonatomic, strong) UIPickerView *myPicker;
@property (nonatomic, strong) NSMutableArray *citys;

@property (nonatomic, strong) UIDatePicker *myDatePicker;
@property (nonatomic, strong) UILabel *label;

@end


// ViewController.m
@implementation ViewController

@synthesize myPicker;
@synthesize citys;

@synthesize myDatePicker;
@synthesize label;

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self learnUIDatePicker];
//    [self learnUIPickerView];
}

// UIDatePicker
- (void)learnUIDatePicker {
    label = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 300, 100)];
    label.text = @"选择日期"; // 设置内容
    label.font = [UIFont fontWithName: @"Arial" size: 20]; // 设置字体及文字大小
    label.textColor = [UIColor orangeColor]; // 设置字体颜色
    label.textAlignment = UITextAlignmentCenter; // 设置文字居中显示
    label.shadowColor = [UIColor blackColor]; // 设置阴影
    label.backgroundColor = [UIColor clearColor]; // 设置背景
    [self.view addSubview: label];
    
    myDatePicker = [[UIDatePicker alloc] initWithFrame: CGRectMake(0, 100, 0, 0)];
//    myDatePicker.center = self.view.center;
    
    NSTimeInterval secondPerDay = 24 * 60 * 60;
    NSTimeInterval secondPer2Year = secondPerDay * 356 * 2;
    
    NSDate *today = [[NSDate alloc] init];
    NSDate *min = [today dateByAddingTimeInterval: -secondPer2Year];
    NSDate *max = [today dateByAddingTimeInterval: secondPer2Year];
    
    [myDatePicker setLocale: [[NSLocale alloc] initWithLocaleIdentifier: @"zh_CN"]];
    [myDatePicker setDatePickerMode: UIDatePickerModeDate]; // 设置日期选择器模式
    [myDatePicker setDate: today animated: YES]; // 设置默认选中日期
    [myDatePicker setMinimumDate: min]; // 设置允许选择的最小日期
    [myDatePicker setMaximumDate: max]; // 设置允许选择的最大日期
    
    [myDatePicker addTarget: self action: @selector(onDatePickerChanged:) forControlEvents:UIControlEventValueChanged]; // 注册当datepicker值改变时触发事件
    [self.view addSubview: myDatePicker];
}

- (void)onDatePickerChanged: (UIDatePicker *)datePicker {
    label.text = [NSString stringWithFormat: @"%@", datePicker.date];
//    [self alertAtTitle: @"Message" message: [NSString stringWithFormat: @"%@", datePicker.date]];
}

// UIPickerView
- (void)learnUIPickerView {
    citys = [NSMutableArray arrayWithObjects: @"贵阳", @"遵义", @"六盘水", @"凯里", nil];
    
//    myPicker = [[UIPickerView alloc] init];
//    myPicker.center = self.view.center;
    myPicker = [[UIPickerView alloc] initWithFrame: CGRectMake(0, 0, 0, 0)];
    myPicker.dataSource = self;
    myPicker.delegate = self;
    myPicker.showsSelectionIndicator = YES; // 可以理解为高亮选中行
    
    [myPicker selectRow: 3 inComponent: 0 animated: YES]; // 设置选中行
    NSInteger selectedIndex = [myPicker selectedRowInComponent: 0]; // 获取选中行
    NSLog(@"%i", selectedIndex);
    
    [self.view addSubview: myPicker];
}

// 实现 UIPickerViewDataSource协议
// 返回UIPickerView有多少compnent
- (NSInteger)numberOfComponentsInPickerView: (UIPickerView *)pickerView {
    return 2;
}

// 返回component有多少行数据
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return citys.count;
}

// 实现UIPickerViewDelegate协议
// 返回component中一行数据的内容
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    return [citys objectAtIndex: row];
}

// 选中component中某一行数据时触发的回调方法
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    [self alertAtTitle: @"Message" message: [NSString stringWithFormat:@"selected %@ at index %i", [citys objectAtIndex: row], row]];
}

// UIAlertView
- (void)alertAtTitle: (NSString *)title message: (NSString *)message {
    UIAlertView *alertView = [[UIAlertView alloc]
                              initWithTitle: title
                              message: message
                              delegate: nil
                              cancelButtonTitle: @"OK"
                              otherButtonTitles: nil];
    [alertView show];
}
@end