首页 > 代码库 > [iOS基础控件 - 6.10.1] PickerView 餐点搭配Demo

[iOS基础控件 - 6.10.1] PickerView 餐点搭配Demo

A.需求
1.使用PickerView做出有3列餐点(水果、主菜、饮料)的搭配Demo
2.选择的餐点实时显示在“显示区”
3.提供“随机”按钮,随机选择菜品搭配
 
B.实现步骤
1.拖入一个PickerView
Image(143)
 
2.用控制器配置dataSource和delegate
 1 // 遵守UIPickerViewDataSource,UIPickerViewDelegate 2 @interface ViewController () <UIPickerViewDataSource, UIPickerViewDelegate> 3  4 /** 选择器 */ 5 @property (weak, nonatomic) IBOutlet UIPickerView *pickerView; 6  7 @end 8  9 @implementation ViewController10 11 - (void)viewDidLoad {12     [super viewDidLoad];13     // Do any additional setup after loading the view, typically from a nib.14    15     // 设置dataSource16     self.pickerView.dataSource = self;17     // 设置delegage18     self.pickerView.delegate = self;19 }
 
3.实现代理方法
 1 #pragma mark - 代理方法 2 /** 列数 */ 3 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { 4     return 3; 5 } 6  7 /** 对应列的行数 */ 8 - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { 9     return 5;10 }11 12 /** 对应列和行的显示内容 */13 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {14     return @"内容";15 }
 
Image(144)
 
4.引入plist文件,读取数据
Image(145)
 
 1 /** 加载数据,延迟加载 */ 2 - (NSArray *) foodCategories { 3     if (nil == _foodCategories) { 4         _foodCategories = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"foods.plist" ofType:nil]]; 5     } 6      7     return _foodCategories; 8 } 9 10 #pragma mark - dataSource方法11 /** 列数 */12 - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {13     return self.foodCategories.count;14 }15 16 /** 对应列的行数 */17 - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {18     NSArray *foods = self.foodCategories[component];19     return foods.count;20 }21 22 23 #pragma mark - delegate方法24 /** 对应列和行的显示内容 */25 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {26     NSArray *foods = self.foodCategories[component];27     return foods[row];28 }
 
 
Image(146)
 
5.制作显示区
Image(147)
 
1 /** 水果 */2 @property (weak, nonatomic) IBOutlet UILabel *fruitLabel;3 /** 主菜 */4 @property (weak, nonatomic) IBOutlet UILabel *mainLabel;5 /** 饮料 */6 @property (weak, nonatomic) IBOutlet UILabel *drinkLabel;
 
6.响应选择事件
 1 /** 响应选择餐点事件 */ 2 - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { 3     NSArray *foods = self.foodCategories[component]; 4     NSString *food = foods[row]; 5     6     switch (component) { 7         case 0: 8             self.fruitLabel.text = food; 9             break;10         case 1:11             self.mainLabel.text = food;12             break;13         case 2:14             self.drinkLabel.text = food;15             break;16         default:17             break;18     }
 
Image(148)
 
7.制作“随机”功能
 1 /** 随机选择餐点 */ 2 - (IBAction)onRandomClicked { 3     // 循环所有餐点种类 4     for (int i=0; i<self.foodCategories.count; i++) { 5         // 之前选择的餐点行数 6         NSInteger originalRow = [self.pickerView selectedRowInComponent:i]; 7         8         NSInteger row = originalRow; 9        10         // 此种类内含有的所有餐点11         NSArray *foods = self.foodCategories[i];12         // 如果随机的餐点跟上一次的相同,继续随机13         while (row == originalRow) {14             row = arc4random() % foods.count;15         }16        17         // 通知pickerView改变选择18         [self.pickerView selectRow:row inComponent:i animated:YES];19        20         // 改变显示区21         [self pickerView:self.pickerView didSelectRow:row inComponent:i];22     }23 }
 
Image(149)
 
 
 

[iOS基础控件 - 6.10.1] PickerView 餐点搭配Demo