iOS开发之UI控件——UIPickerView实现点菜系统界面布局

1.UIPickerView常用属性和常用方法

1.1.UIPickerView的常见属性

// 数据源(用来告诉UIPickerView有多少列多少行)

@property(nonatomic,assign)id<UIPickerViewDataSource> dataSource;

// 代理(用来告诉UIPickerView每1列的每1行显示什么内容,监听UIPickerView的选择)

@property(nonatomic,assign)id<UIPickerViewDelegate>   delegate;

// 是否要显示选中的指示器

@property(nonatomic)       BOOL                       showsSelectionIndicator;

// 一共有多少列

@property(nonatomic,readonly) NSInteger numberOfComponents;

2.UIPickerView的常见方法

// 重新刷新所有列

- (void)reloadAllComponents;

// 重新刷新第component列

- (void)reloadComponent:(NSInteger)component;

// 主动选中第component列的第row行

- (void)selectRow:(NSInteger)row inComponent:(NSInteger)component animated:(BOOL)animated;

// 获得第component列的当前选中的行号

- (NSInteger)selectedRowInComponent:(NSInteger)component;

3.数据源方法(UIPickerViewDataSource)

//  一共有多少列

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;

//  第component列一共有多少行

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

4.代理方法(UIPickerViewDelegate)

//  第component列的宽度是多少

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

//  第component列的行高是多少

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

//  第component列第row行显示什么文字

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

//  第component列第row行显示怎样的view(内容)

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

//  选中了pickerView的第component列第row行

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

UIDatePicker

1.常见属性

// datePicker的显示模式

@property (nonatomic) UIDatePickerMode datePickerMode;

// 显示的区域语言

@property (nonatomic, retain) NSLocale   *locale;

2.监听UIDatePicker的选择

* 因为UIDatePicker继承自UIControl,所以通过addTarget:...监听

2.IPickerView实现点菜系统界面布局实现

//
//  MJViewController.m


#import "MJViewController.h"

@interface MJViewController () <UIPickerViewDataSource, UIPickerViewDelegate>
- (IBAction)randomFood;
@property (weak, nonatomic) IBOutlet UILabel *fruitLabel;
@property (weak, nonatomic) IBOutlet UILabel *mainLabel;
@property (weak, nonatomic) IBOutlet UILabel *drinkLabel;
@property (nonatomic, strong) NSArray *foods;
@property (weak, nonatomic) IBOutlet UIPickerView *pickerView;
@end

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 初始化
//    self.fruitLabel.text = self.foods[0][0];
//    self.mainLabel.text = self.foods[1][0];
//    self.drinkLabel.text = self.foods[2][0];
//    [self pickerView:nil didSelectRow:0 inComponent:0];
//    [self pickerView:nil didSelectRow:0 inComponent:1];
//    [self pickerView:nil didSelectRow:0 inComponent:2];
    for (int component = 0; component < self.foods.count; component++) {
        [self pickerView:nil didSelectRow:0 inComponent:component];
    }
}

- (NSArray *)foods
{
    if (_foods == nil) {
        // _foods数组中装着3个数组
        _foods = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"foods" ofType:@"plist"]];
    }
    return _foods;
}

#pragma mark - 数据源方法
/**
 *  一共有多少列
 */
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return self.foods.count;
}

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

#pragma mark - 代理方法
/**
 *  第component列的第row行显示什么文字
 */
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return self.foods[component][row];
}

/**
 *  选中了第component列的第row行
 */
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    if (component == 0) { // 水果
        self.fruitLabel.text = self.foods[component][row];
    } else if (component == 1) { // 主菜
        self.mainLabel.text = self.foods[component][row];
    } else if (component == 2) { // 饮料
        self.drinkLabel.text = self.foods[component][row];
    }
}

/**
 *  随机选中某一种食物
 */
- (IBAction)randomFood {
    for (int component = 0; component < self.foods.count; component++) {
        // 第component列数组的总长度
        int count = [self.foods[component] count];
        // 之前的行号
        int oldRow = [self.pickerView selectedRowInComponent:component];
        // 第几行(默认新的行号跟旧的行号一样)
        int row = oldRow;
//        arc4random_uniform(count)
        
        // 保证行数跟上一次不一样
        while (row == oldRow) {
            row = arc4random()%count;
        }
        
        // 让pickerView主动选中第compoent列的第row行
        [self.pickerView selectRow:row inComponent:component animated:YES];
        
        // 设置label的文字
        [self pickerView:nil didSelectRow:row inComponent:component];
    }
//    [self.pickerView selectRow:arc4random()%[self.foods[0] count] inComponent:0 animated:YES];
//    [self.pickerView selectRow:arc4random()%[self.foods[1] count] inComponent:1 animated:YES];
//    [self.pickerView selectRow:arc4random()%[self.foods[2] count] inComponent:2 animated:YES];
}
@end

plist文件

3.运行效果