UIPickerView的使用

Love The Way You Lie 2022-06-11 08:41 159阅读 0赞

简介：UIPickerView是一个选择器控件，它比UIDatePicker更加通用，它可以生成单列的选择器，也可生成多列的选择器，而且开发者完全可以自定义选择项的外观，因此用法非常灵活。UIPickerView直接继承了UIView，没有继承UIControl，因此，它不能像UIControl那样绑定事件处理方法，UIPickerView的事件处理由其委托对象完成。使用UIPickerView的对象应该遵守UIPickerViewDataSource,UIPickerViewDelegate。

# 一、UIPickerView控件常用的属性和方法如下： #

Ø numberOfComponents：获取UIPickerView指定列中包含的列表项的数量。该属性是一个只读属性。   
    
Ø showsSelectionIndicator：该属性控制是否显示UIPickerView中的选中标记（以高亮背景作为选中标记）。   
  
Ø \- numberOfRowsInComponent:：获取UIPickerView包含的列数量。   
    
Ø \- rowSizeForComponent:：获取UIPickerView包含的指定列中列表项的大小。该方法返回一个CGSize对象。   
  
Ø \- selectRow:inComponent:animated:：该方法设置选中该UIPickerView中指定列的特定列表项。最后一个参数控制是否使用动画。   
    
Ø \- selectedRowInComponent:：该方法返回该UIPickerView指定列中被选中的列表项。   
    
Ø \- viewForRow:forComponent:：该方法返回该UIPickerView指定列的列表项所使用的UIView控件。   
   
UIDatePicker控件只是负责该控件的通用行为，而该控件包含多少列，各列包含多少个列表项则由UIPickerViewDataSource对象负责。开发者必须为UIPickerView设置  
UIPickerViewDataSource对象，并实现如下两个方法。

Ø \- numberOfComponentsInPickerView:：该UIPickerView将通过该方法来判断应该包含多少列。   
   
Ø \- pickerView:numberOfRowsInComponent:：该UIPickerView将通过该方法判断指定列应该包含多少个列表项。

如果程序需要控制UIPickerView中各列的宽度，以及各列中列表项的大小和外观，或程序需要为UIPickerView的选中事件提供响应，都需要为UIPickerView设置UIPickerViewDelegate委托对象，并根据需要实现该委托对象中的如下方法。   
    
Ø \- pickerView:rowHeightForComponent:：该方法返回的CGFloat值将作为该UIPickerView控件中指定列中列表项的高度。   
  
Ø \- pickerView:widthForComponent:：该方法返回的CGFloat值将作为该UIPickerView控件中指定列的宽度。   
  
Ø \- pickerView:titleForRow:forComponent:：该方法返回的NSString值将作为该UIPickerView控件中指定列的列表项的文本标题。   
  
Ø \- pickerView:viewForRow:forComponent:reusingView:：该方法返回的UIView控件将直接作为该UIPickerView控件中指定列的指定列表项。   
  
Ø \- pickerView:didSelectRow:inComponent:：当用户单击选中该UIPickerView控件的指定列的指定列表项时将会激发该方法。

# 二、UIPickerView的使用方法（先以单列选择器为例）： #

## 1、遵守协议 ##

![575661-20160224163657224-1248620082.png][]

## 2、创建pickerView ##

![575661-20160224163707833-624354869.png][]

## 3、实现代理 ##

![复制代码][copycode.gif]

//UIPickerViewDataSource中定义的方法，该方法的返回值决定该控件包含的列数
    - (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
    {
        return 1; // 返回1表明该控件只包含1列
    }
    
    //UIPickerViewDataSource中定义的方法，该方法的返回值决定该控件指定列包含多少个列表项
    - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
    {
        // 由于该控件只包含一列，因此无须理会列序号参数component
        // 该方法返回teams.count，表明teams包含多少个元素，该控件就包含多少行
        return _teams.count;
    }
    
    
    // UIPickerViewDelegate中定义的方法，该方法返回的NSString将作为UIPickerView
    // 中指定列和列表项的标题文本
    - (NSString *)pickerView:(UIPickerView *)pickerView
                 titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        // 由于该控件只包含一列，因此无须理会列序号参数component
        // 该方法根据row参数返回teams中的元素，row参数代表列表项的编号，
        // 因此该方法表示第几个列表项，就使用teams中的第几个元素
        
        return [_teams objectAtIndex:row];
    }
    
    // 当用户选中UIPickerViewDataSource中指定列和列表项时激发该方法
    - (void)pickerView:(UIPickerView *)pickerView didSelectRow:
    (NSInteger)row inComponent:(NSInteger)component
    {
        // 使用一个UIAlertView来显示用户选中的列表项
        UIAlertView* alert = [[UIAlertView alloc]
                              initWithTitle:@"提示"
                              message:[NSString stringWithFormat:@"你选中的球队是：%@"
                                       , [ _teams objectAtIndex:row]]
                              delegate:nil
                              cancelButtonTitle:@"确定"
                              otherButtonTitles:nil];
        [alert show];
    }

![复制代码][copycode.gif]

效果图

![575661-20160224163858911-591764760.gif][]

多列选择器（以二列为例）

##  1、遵守协议和创建两个数据源 ##

![575661-20160224165424099-1840931672.png][]

## 2、创建pickView ##

![575661-20160224165455490-1290963013.png][]

## 3、实现代理 ##

![复制代码][copycode.gif]

//UIPickerViewDataSource中定义的方法，该方法的返回值决定该控件包含的列数
    - (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
    {
        return 2; // 返回2表明该控件只包含2列
    }
    
    //UIPickerViewDataSource中定义的方法，该方法的返回值决定该控件指定列包含多少个列表项
    - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
    {
        // 如果该控件只包含一列，因此无须理会列序号参数component
        // 该方法返回teams.count，表明teams包含多少个元素，该控件就包含多少行
        if (component == 0) {
            return _areas.count;
        }
        else
            return _teams.count;
        
    }
    
    
    // UIPickerViewDelegate中定义的方法，该方法返回的NSString将作为UIPickerView中指定列和列表项的标题文本
    - (NSString *)pickerView:(UIPickerView *)pickerView
                 titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        // 由于该控件只包含一列，因此无须理会列序号参数component
        // 该方法根据row参数返回teams中的元素，row参数代表列表项的编号，
        // 因此该方法表示第几个列表项，就使用teams中的第几个元素
        if (component == 0) {
            return [_areas objectAtIndex:row];
        }
        return [_teams objectAtIndex:row];
    }
    
    
    // 当用户选中UIPickerViewDataSource中指定列和列表项时激发该方法
    - (void)pickerView:(UIPickerView *)pickerView didSelectRow:
    (NSInteger)row inComponent:(NSInteger)component
    {
        
        NSArray *tmp = component == 0 ? _areas: _teams;
        NSString *tip = component == 0 ? @"区域":@"球队";
        // 使用一个UIAlertView来显示用户选中的列表项
        UIAlertView* alert = [[UIAlertView alloc]
                              initWithTitle:@"提示"
                              message:[NSString stringWithFormat:@"你选中的%@是：%@"
                                       , tip ,[ tmp objectAtIndex:row]]
                              delegate:nil
                              cancelButtonTitle:@"确定"
                              otherButtonTitles:nil];
        [alert show];
    }
    
    // UIPickerViewDelegate中定义的方法，该方法返回的NSString将作为
    // UIPickerView中指定列的宽度
    -(CGFloat)pickerView:(UIPickerView *)pickerView
       widthForComponent:(NSInteger)component
    {
        // 如果是第一列，宽度为90
        if(component == 0) {
            return 90;
        }
        return 210; // 如果是其他列（只有第二列），宽度为210
    }

![复制代码][copycode.gif]

效果图

![575661-20160224170201552-1561122364.gif][]

现在我们一起学习相互依赖的多列选择器

##  1、遵守协议 ##

![575661-20160224172352693-421673113.png][]

## 2、创建pickView ##

![575661-20160224172454177-1105843998.png][]

## 3、实现协议 ##

![复制代码][copycode.gif]

//UIPickerViewDataSource中定义的方法，该方法的返回值决定该控件包含的列数
    - (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
    {
        return 2; // 返回2表明该控件只包含2列
    }
    
    //UIPickerViewDataSource中定义的方法，该方法的返回值决定该控件指定列包含多少个列表项
    - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
    {
        // 由于该控件只包含一列，因此无须理会列序号参数component
        // 该方法返回teams.count，表明teams包含多少个元素，该控件就包含多少行
        
        if (component == 0) {
            return _areas.count;
        }
        else
        
            return [[_teams objectForKey:_selectedAreas]count];
        
    }
    
    
    // UIPickerViewDelegate中定义的方法，该方法返回的NSString将作为UIPickerView
    // 中指定列和列表项的标题文本
    - (NSString *)pickerView:(UIPickerView *)pickerView
                 titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        // 由于该控件只包含一列，因此无须理会列序号参数component
        // 该方法根据row参数返回teams中的元素，row参数代表列表项的编号，
        // 因此该方法表示第几个列表项，就使用teams中的第几个元素
        
        if (component == 0) {
            return [_areas objectAtIndex:row];
        }
        return [[_teams objectForKey:_selectedAreas]objectAtIndex:row];
        
    }
    
    // 当用户选中UIPickerViewDataSource中指定列和列表项时激发该方法
    - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
    {
        
        if (component == 0) {
            _selectedAreas = [_areas objectAtIndex:row];
            [self.pickView reloadComponent:1];
            
        }
        
        NSArray *tmp = component == 0 ? _areas: [_teams objectForKey:_selectedAreas];
        
        NSString *tip = component == 0 ? @"区域":@"球队";
        // 使用一个UIAlertView来显示用户选中的列表项
        UIAlertView* alert = [[UIAlertView alloc]
                              initWithTitle:@"提示"
                              message:[NSString stringWithFormat:@"你选中的%@是：%@"
                                       , tip ,[ tmp objectAtIndex:row]]
                              delegate:nil
                              cancelButtonTitle:@"确定"
                              otherButtonTitles:nil];
        [alert show];
    }
    
    
    // UIPickerViewDelegate中定义的方法，该方法返回的NSString将作为
    // UIPickerView中指定列的宽度
    -(CGFloat)pickerView:(UIPickerView *)pickerView
       widthForComponent:(NSInteger)component
    {
        // 如果是第一列，宽度为90
        if(component == 0) {
            return 90;
        }
        return 210; // 如果是其他列（只有第二列），宽度为210
    }

![复制代码][copycode.gif]

效果图：

![575661-20160224172533396-1302192846.gif][]

[575661-20160224163657224-1248620082.png]: /images/20220611/ed3233f4946b492fb3561a069f103539.png
[575661-20160224163707833-624354869.png]: /images/20220611/0d8ae561a72f498bbca8bd4a86d9e221.png
[copycode.gif]: /images/20220611/c6b69dd372734989afe0d9915cc2dbb0.png
[575661-20160224163858911-591764760.gif]: /images/20220611/ec9c05fa2f4d4e48b97e883e86e38759.png
[575661-20160224165424099-1840931672.png]: /images/20220611/fb6c87be66d648609a0adee92488fdc0.png
[575661-20160224165455490-1290963013.png]: /images/20220611/17b18ebabaee4370a4bf54643a3ea15a.png
[575661-20160224170201552-1561122364.gif]: /images/20220611/a4489a0ce31e42be8b0bbfe4f2601474.png
[575661-20160224172352693-421673113.png]: /images/20220611/9860d5b77572492cb67734a91a496556.png
[575661-20160224172454177-1105843998.png]: /images/20220611/4be08152d6294020a3e52f03bdc51d6d.png
[575661-20160224172533396-1302192846.gif]: /images/20220611/11a2f14642d244e1951b85c4f85c8887.png