UIPickView与UIDatePicker的使用

介绍UIPickView和UIDatePicker

1.UIPickView什么时候用？

• 通常在注册模块，当用户需要选择一些东西的时候，比如说城市，往往弹出一个PickerView给他们选择。
• 老虎机效果

2.UIPickView常见用法

• 独立的，没有任何关系 => 菜单系统。
• 相关联的，下一列和第一列有联系=> 省会城市选择
• 图文并帽， => 国旗选择。

3.UIPickView

4.UIDatePicker什么时候用？

• 当用户选择日期的时候，一般弹出一个UIDatePicker给用户选择。

5.UIDatePicker iOS6和iOS7的区别

UIPickView与UIDatePicker使用

UIPickView效果图

plist文件

实现过程

• 1.1：设置_pickerView的数据源及代理为控制器
• 1.2：控制器遵守数据源，代理协议
• 1.3：实现数据源方法

// 返回pickerView有多少列
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return self.foods.count;
}

// 返回第component列有多少行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    NSArray *arr = self.foods[component];
    return arr.count;
}

• 1.4：实现代理方法

// 返回第component列第row行标题
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    NSArray *arr = self.foods[component];

    return arr[row];
}
// 监听用户的选中
// 选中第component列第row行
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    NSLog(@"%ld %ld",component, row);
    // 获取用户选中的标题
    NSString *title = self.foods[component][row];
    _labelView.text = title;

}

• 1.5：其它代理方法

// 返回第component列有多宽
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;

// 返回第component列有高度
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;

// NSAttributedString:属性字符串(给文本添加一些属性),富文本,丰富文本,可以设置文字的颜色,字体,阴影,空心,图文混排
- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component NS_AVAILABLE_IOS(6_0); // attributed title is favored if both methods are implemented

// 返回第component列第row行视图
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;

UIPickView与UIDatePicker的综合使用

效果图

plist文件

实现过程

国旗文本框

• 1.1：自定义xib
• 1.2：创建模型Flag
• 1.3：创建继承UITextField的国旗FlagField

#import "FlagField.h"

#import "Flag.h"

#import "FlagView.h"

@interface FlagField ()<UIPickerViewDataSource,UIPickerViewDelegate>
/**
 *  flags
 */
@property (nonatomic, strong) NSMutableArray *flags;


@end

@implementation FlagField

- (NSMutableArray *)flags
{
    if (_flags == nil) {
        _flags = [NSMutableArray array];

        NSString *filePath = [[NSBundle mainBundle] pathForResource:@"flags.plist" ofType:nil];
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:filePath];

        for (NSDictionary *dict in dictArr) {
            Flag *falg = [Flag flagWithDict:dict];
            // 把模型保存到数组
            [_flags addObject:falg];
        }
    }

    return _flags;
}

// 对象只要从xib加载完成就会调用
- (void)awakeFromNib
{
    [self setUp];
}

// 通过代码创建必须调用
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setUp];
    }
    return self;
}

// 当前控件的初始化操作
- (void)setUp
{
    // 自定义国旗键盘,
    // pickerView控件可以不用设置尺寸,因为它有默认的尺寸
    UIPickerView *pickerView = [[UIPickerView alloc] init];

    pickerView.dataSource = self;

    pickerView.delegate = self;

    // 设置键盘view
    self.inputView = pickerView;

}

#pragma mark - UIPickerViewDataSource
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

// 返回这列有多少行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return self.flags.count;
}

#pragma mark - UIPickerViewDelegate
// 返回每一行长什么样控件
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    FlagView *flagV = [FlagView flagView];

    flagV.flag = self.flags[row];

    return flagV;
}

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
    return 100;
}

// 用户选中某一行调用
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    Flag *flag = self.flags[row];

    self.text = flag.name;
}
// 初始化文本框文字
- (void)setUpText
{
    [self pickerView:nil didSelectRow:0 inComponent:0];
}

出生年月文本框

• 2.1：创建继承UITextField的出生年月BirthdayField

#import "BirthdayField.h"

@implementation BirthdayField

- (void)awakeFromNib
{
    [self setUp];
}

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setUp];
    }
    return self;
}

// 初始化操作
- (void)setUp
{

    // 创建日期选择控件
    UIDatePicker *datePicker = [[UIDatePicker alloc] init];


    // 设置日期模式
    datePicker.datePickerMode = UIDatePickerModeDate;

    // 设置日期地区
    // zh:中国
    datePicker.locale = [NSLocale localeWithLocaleIdentifier:@"zh"];
    // 1990-1-1

    NSDateFormatter *fmt = [[NSDateFormatter alloc] init];
    fmt.dateFormat = @"yyyy-MM-dd";
    NSDate *date = [fmt dateFromString:@"1990-1-1"];

    // 设置一开始日期
    datePicker.date = date;

    // 监听用户输入
    [datePicker addTarget:self action:@selector(dateChange:) forControlEvents:UIControlEventValueChanged];

    // 自定义文本框键盘
    self.inputView = datePicker;
}

- (void)dateChange:(UIDatePicker *)datePicker
{
    NSDateFormatter *fmt = [[NSDateFormatter alloc] init];
    fmt.dateFormat = @"yyyy-MM-dd";
    NSString *dateStr = [fmt stringFromDate:datePicker.date];
//    NSLog(@"%@",dateStr);
    self.text = dateStr;
}
// 初始化文本框文字
- (void)setUpText
{
    [self dateChange:(UIDatePicker *)self.inputView];

}

城市文本框

• 3.1：创建模型Province
• 3.2：创建继承UITextField的城市CityField

#import "CityField.h"

#import "Province.h"

@interface CityField () <UIPickerViewDataSource,UIPickerViewDelegate>

@property (nonatomic, assign) NSInteger selProvinceIndex;

// 保存所有省模型
@property (nonatomic, strong) NSMutableArray *provinces;

@end

@implementation CityField

- (NSMutableArray *)provinces
{
    if (_provinces == nil) {
        _provinces = [NSMutableArray array];

       NSString *filePath = [[NSBundle mainBundle] pathForResource:@"provinces.plist" ofType:nil];
        // 加载字典数组
        NSArray *dictArr = [NSArray arrayWithContentsOfFile:filePath];
        for (NSDictionary *dict in dictArr) {
           Province *p = [Province provinceWithDict:dict];

            [_provinces addObject:p];
        }

    }

    return _provinces;
}

- (void)awakeFromNib
{
    [self setUp];
}

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setUp];
    }
    return self;
}

// 初始化操作
- (void)setUp
{

    UIPickerView *pickerView = [[UIPickerView alloc] init];

    pickerView.dataSource = self;
    pickerView.delegate = self;

    // 自定义城市键盘
    self.inputView = pickerView;
}


#pragma mark - UIPickerViewDataSource
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 2;
}

// 返回第component列有多少行
// 第0列: 省 第1列:当前第0列选中的省会的城市
// 第0列:有多少省模型就有多少行
// 第1列:看下当前选中省有多少个城市就有多少行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    if (component == 0) { // 省

        return self.provinces.count;

    }else{ // 当前第0列选中省的城市
        // 获取当前第0列选中哪个省
      Province *p = self.provinces[_selProvinceIndex];

        return p.cities.count;
    }
}

#pragma mark - UIPickerViewDelegate

// 返回每一行的标题
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    if (component == 0) { // row:省

        Province *p = self.provinces[row];

        return p.name;

    }else{ // row:城市

        // 获取当前第0列选中哪个省
        Province *p = self.provinces[_selProvinceIndex];

        return p.cities[row];

    }
}

// 用户选中某一行的时候调用
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{

    if (component == 0) { // 滚动省
        // 记录当前选中的省(行)
        _selProvinceIndex = row;

        // 刷新第1列
        [pickerView reloadComponent:1];
    }

    // 给文本框赋值

    // 获取当前第0列选中的省
    Province *p = self.provinces[_selProvinceIndex];

    // 省会名称
    NSString *pName = p.name;

    // 获取第1列选中的城市
    NSInteger cityIndex = [pickerView selectedRowInComponent:1];

    // 获取城市名称
    NSString *cityName = p.cities[cityIndex];

    self.text = [NSString stringWithFormat:@"%@ %@",pName,cityName];


}

// 初始化文本框文字
- (void)setUpText
{
    [self pickerView:nil didSelectRow:0 inComponent:0];
}
@end

控制器

#import "ViewController.h"
#import "UITextField+Text.h"

@interface ViewController ()<UITextFieldDelegate>
@property (weak, nonatomic) IBOutlet UITextField *flagField;
@property (weak, nonatomic) IBOutlet UITextField *birthdayField;
@property (weak, nonatomic) IBOutlet UITextField *cityField;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 设置代理
    _flagField.delegate = self;
    _birthdayField.delegate = self;
    _cityField.delegate = self;


}

#pragma mark - UITextFieldDelegate
// 是否允许用户输入文字
// 作用:拦截用户的输入
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
    return NO;
}

// 文本框开始编辑的时候调用
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
    // 需要给文本框赋值
    [textField setUpText];
}

@end

为UITextField创建一个分类，添加一个设置方法

#import 

@interface UITextField (Text)

- (void)setUpText;

@end