脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iOS的UIPickerView控件

详解iOS开发中UIPickerView控件的使用方法

 更新时间：2015年11月06日 09:54:00   投稿：goldensun  
这篇文章主要介绍了详解iOS开发中UIPickerView控件的使用方法,代码基于传统的Objective-C,需要的朋友可以参考下

UIPickerView控件在给用户选择某些特定的数据时经常使用到，这里演示一个简单的选择数据，显示在UITextField输入框里，把UIPickerView作为输入View，用Toolbar作为选定数据的按钮。和其他UITableView控件相似，UIPickerView也需要数据源。
我们要实现的效果如下：

201511695037630.png (368×716)

下面开始使用的步骤。
1、打开XCode 4.3.2，新建一个Single View Application ,命名为PickerViewDemo，Company Identifier 为：com.rongfzh.yc
2、拖放控件
2.1、拖放一个UIPickerView，放置在View的最下方
2.2、拖放一个Toolbar控件，放置在View的外面，让它不属于View的子控件，并把item命名为“完成”，效果如下：

201511695101288.png (693×631)

2.3 放置一个Flexible Space Bar Button Item 撑开

201511695121292.png (404×152)

2.4  放一个UITextField,用来显示选择的数据

201511695138237.png (334×493)

3、创建映射
在ViewController.xib文件里按 alt + command+ enter键，打开Assistant Editor，按住Control键，选择各个控件，拖拽到 ViewController.h文件里，生成以下变量代码

复制代码 代码如下:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    NSArray *pickerArray;
}
- (IBAction)selectButton:(id)sender;
@property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;

@property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;
@property (strong, nonatomic) IBOutlet UITextField *textField;
@end


201511695204075.png (617×344)

4、实现数据源和协议
ViewController.h文件里实现

复制代码 代码如下:

<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>
{
    NSArray *pickerArray;
}
- (IBAction)selectButton:(id)sender;
@property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;

@property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;
@property (strong, nonatomic) IBOutlet UITextField *textField;
@end


ViewController.m文件
复制代码 代码如下:

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}
-(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return [pickerArray count];
}
-(NSString*) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return [pickerArray objectAtIndex:row];
}

-(void)textFieldDidEndEditing:(UITextField *)textField{
    NSInteger row = [selectPicker selectedRowInComponent:0];
    self.textField.text = [pickerArray objectAtIndex:row];
}


上面numberOfComponentsInPickerView返回有几个PickerView ，
textFieldDidEndEditing这个在textField结束编辑时，显示PickerView选择中的数据。

Toolbar 的item的完成按钮

复制代码 代码如下:

- (IBAction)selectButton:(id)sender {
    [textField endEditing:YES];
}

5、初始化
复制代码 代码如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
    pickerArray = [NSArray arrayWithObjects:@"动物",@"植物",@"石头",@"天空", nil];
    textField.inputView = selectPicker;
    textField.inputAccessoryView = doneToolbar;
    textField.delegate = self;
    selectPicker.delegate = self;
    selectPicker.dataSource = self;
    selectPicker.frame = CGRectMake(0, 480, 320, 216);

}


代码解释：
设置委托
   textField.delegate =self;
    selectPicker.delegate =self;
    selectPicker.dataSource =self;

隐藏UIPickerView

复制代码 代码如下:

    selectPicker.frame =CGRectMake(0,480,320, 216);

运行：

201511695228008.png (368×716)

UIPickerView控件的关联选择

201511695248501.png (368×716)

当选择左边的一级选项时，左边展示一级选项里含有的二级选项，选择后显示在TextField里。
如何实现呢？建立一个和左边的列表key对应的数组，当选择这个key时，刷新左边UIPickerView部分的内容显示对应数组的数据，选择时，找到
两个UIPickerView部件rowIndex，找出数据，放到TextField里。
1、打开上篇PickerViewDemo项目，在ViewController.h添加两个成员变量：NSArray *subPickerArray; NSDictionary *dicPicker;

复制代码 代码如下:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIPickerViewDelegate, UITextFieldDelegate,UIPickerViewDataSource>
{
    NSArray *pickerArray;
    NSArray *subPickerArray;
    NSDictionary *dicPicker;
}
- (IBAction)selectButton:(id)sender;
@property (strong, nonatomic) IBOutlet UIToolbar *doneToolbar;
@property (strong, nonatomic) IBOutlet UIPickerView *selectPicker;
@property (strong, nonatomic) IBOutlet UITextField *textField;
@end


2、初始化
复制代码 代码如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
    pickerArray = [NSArray arrayWithObjects:@"动物",@"植物",@"石头", nil];
    dicPicker = [NSDictionary dictionaryWithObjectsAndKeys:
                 [NSArray arrayWithObjects:@"鱼",@"鸟",@"虫子",            nil], @"动物",
                 [NSArray arrayWithObjects:@"花",@"草",@"葵花",            nil], @"植物",
                 [NSArray arrayWithObjects:@"疯狂的石头",@"花岗岩",@"鹅卵石", nil], @"石头",nil];
   
    subPickerArray = [dicPicker objectForKey:@"动物"];
    textField.inputView = selectPicker;
    textField.inputAccessoryView = doneToolbar;
    textField.delegate = self;
    selectPicker.delegate = self;
    selectPicker.dataSource = self;
    selectPicker.frame = CGRectMake(0, 480, 320, 216);

}


给 NSDictionary *dicPicker;赋值，对应的三个关键字添加了对应的数组。
3、Component返回两个，这样就有两个齿轮了。
复制代码 代码如下:

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 2;
}

4、使用宏
在#import "ViewController.h"下面定义两个宏，代表UIPickerView齿轮的左边的部分和右边的部分。左边的部分是0，右边的是1.
复制代码 代码如下:

#import "ViewController.h"
#define kFirstComponent 0
#define kSubComponent 1

5、判断是那个齿轮，返回相应的数据的Count。
复制代码 代码如下:

-(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if(component == kFirstComponent){
        return [pickerArray count];
    }else {
        return [subPickerArray count];
    }

}


6、根据component返回相应的String数据
复制代码 代码如下:

    -(NSString*) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    if(component == kFirstComponent){
        return [pickerArray objectAtIndex:row];
    }else {
        return [subPickerArray objectAtIndex:row];
    }
}

7、拖动左边的齿轮时，右边的数据相应的Reload更新。
复制代码 代码如下:

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    if (component == kFirstComponent) {
        subPickerArray = [dicPicker objectForKey:[pickerArray objectAtIndex:row]];
        [pickerView selectRow:0 inComponent:kSubComponent animated:YES];
        [pickerView reloadComponent:kSubComponent];
    }
}

8、相应选择的数据，并显示在TextField上。
复制代码 代码如下:

-(void)textFieldDidEndEditing:(UITextField *)textField{
    NSInteger firstViewRow = [selectPicker selectedRowInComponent:kFirstComponent];
    NSInteger subViewRow = [selectPicker selectedRowInComponent:kSubComponent];
    NSString * firstString = [pickerArray objectAtIndex:firstViewRow];
    NSString * subString =  [[dicPicker objectForKey:[pickerArray objectAtIndex:firstViewRow]] objectAtIndex:subViewRow] ;
    NSString *textString = [[NSString alloc ] initWithFormat:@"您选择了：%@%@%@", firstString, @" 里的 ", subString];
    self.textField.text = textString;
}

- (IBAction)selectButton:(id)sender {
    [textField endEditing:YES];
}


大功告成，运行，点击TextField，弹出：

201511695331764.png (368×716)

您可能感兴趣的文章:

相关文章

  • iOS正确监听手机静音键和侧边音量键的方法示例

    iOS正确监听手机静音键和侧边音量键的方法示例

    这篇文章主要给大家介绍了关于iOS正确监听手机侧边音量键的相关资料，并且给大家分享了ios监听静音键的示例代码，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-11-11
  • 浅谈IOS中AFNetworking网络请求的get和post步骤

    浅谈IOS中AFNetworking网络请求的get和post步骤

    本篇文章主要介绍了浅谈IOS中AFNetworking网络请求的get和post步骤的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • iOS界面跳转时导航栏和tabBar的隐藏与显示功能

    iOS界面跳转时导航栏和tabBar的隐藏与显示功能

    这篇文章主要介绍了iOS界面跳转时导航栏和tabBar的隐藏与显示功能,需要的朋友可以参考下
    2017-02-02
  • iOS UITextField 显示银行卡格式的方法

    iOS UITextField 显示银行卡格式的方法

    下面小编就为大家分享一篇iOS UITextField 显示银行卡格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS给border设置渐变色的方法实例

    iOS给border设置渐变色的方法实例

    这篇文章主要给大家介绍了关于iOS给border设置渐变色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • iOS之Cocoapods安装教程(全面解析)

    iOS之Cocoapods安装教程(全面解析)

    下面小编就为大家带来一篇iOS之Cocoapods安装教程(全面解析)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • iOS实现音乐播放器图片旋转

    iOS实现音乐播放器图片旋转

    这篇文章主要为大家详细介绍了iOS实现音乐播放器图片旋转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • iOS开发中苹果输入手机号变用户的名字

    iOS开发中苹果输入手机号变用户的名字

    今天我们的用户输入手机号之后变成了用户的名字，没办法获取验证码，因为手机格式不对。下面通过本文给大家分享开发中苹果输入手机号变用户的名字,需要的朋友可以参考下
    2017-05-05
  • 详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

    详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

    这篇文章主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • IOS 开发之UITableView 删除表格单元写法

    IOS 开发之UITableView 删除表格单元写法

    这篇文章主要介绍了IOS 开发之UITableView 删除表格单元写法的相关资料,这里提供实例帮助大家实现该功能，希望能帮助到大家，需要的朋友可以参考下
    2017-08-08

最新评论