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

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

下面开始使用的步骤。
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命名为“完成”,效果如下:

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

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

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

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);

运行:

UIPickerView控件的关联选择

当选择左边的一级选项时,左边展示一级选项里含有的二级选项,选择后显示在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,弹出:

时间: 2015-11-05

实例讲解iOS应用开发中UIPickerView滚动选择栏的用法

基础 1.UIPickerView 属性 数据源(用来告诉UIPickerView有多少列多少行) 复制代码 代码如下: @property(nonatomic,assign) id dataSource; 代理(用来告诉UIPickerView每1列的每1行显示什么内容,监听UIPickerView的选择) 复制代码 代码如下: @property(nonatomic,assign) id   delegate; 是否要显示选中的指示器 复制代码 代码如下: @property(nonatom

IOS 开发之PickerView自定义视图的实例详解

IOS 开发之PickerView自定义视图的实例详解 例如选择国家,左边是名称右边是国家,不应该使用两列,而是自定义PickerView的一列,可以通过xib来实现. 注意,虽然PickerView也是一列,但是数据源方法是@required,所以必须实现. 因此,核心思想就是一列,自定义PickerView的行视图. 使用viewForRow方法可以设定行视图. 这样的视图可以通过xib和它的控制器进行封装: Xib的控制器继承自UIView类即可. 控制器维护一个用于设置数据的模型对象fl

iOS中自定义弹出pickerView效果(DEMO)

UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添加的代码 有个小问题就是第四个直接添加在主页弹出来的view好像被导航栏给覆盖了,我还没去研究,就着急的先吧功能写了.大家谅解下 最初版本 话说我终于弄了gif了,再也不要去截图每张图都发一遍了!! 这个demo呢,等于是可以拿来直接用的第三方了吧,只需要传数据就可以了,弹出的三个框显示的数据也不一样,我的封装能力

详解iOS App中UIPickerView滚动选择栏的添加方法

1.UIPickerView的宽度和高度是固定的,纵向是320216,横向是568162 2.属性: 复制代码 代码如下: @property(nonatomic,readonly)NSInteger numberOfComponents; // 选择框的行数 @property(nonatomic,assign)idUIPickerViewDataSource> dataSource; (类似于UITableView) @property(nonatomic,assign)idUIPicker

iOS开发之UIPickerView实现城市选择器的步骤详解

前言 UIPickerView是一个选择器控件,它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活.UIPickerView直接继承了UIView,没有继承UIControl,因此,它不能像UIControl那样绑定事件处理方法,UIPickerView的事件处理由其委托对象完成. 本文借助于UIPickerView来实现城市选择器,第一列为省份,第二列为第一列省份对应的城市或者区,数据放在plist中,plist结构如下图所示,第一层是一个Di

IOS 开发之PickerView文字和随机数的使用

IOS 开发之PickerView文字和随机数的使用 PickerView用于展示供选择的内容(例如日期选取.点菜等). 有三种情况: 1.每一列都是独立的选取 2.右边的列受到左边列的影响 3.包含图片 PickerView和TableView类似,通过数据源来显示数据,与TableView同样地,让控制器称为其数据源. 但是PickerView的数据源仅仅提供行数和列数,在代理方法内才能设置内容. 通过两个数据源方法设置行和列数,通过一个代理方法来设定内容,注意component表示第几列:

iOS App中UIPickerView选择栏控件的使用实例解析

UIPickerView控件是比UIDatePicker控件更普通的Picker控件,UIDatePicker控件可以理解成是从UIPickerView控件加工出来的专门进行日期选择的控件. UIPickerView控件的用法比UIDatePicker复杂一点.本文中的小例子将用UIPickerView控件做出两种效果,第一个只有一个转盘,第二个有两个转盘,但这两个转盘之间没有依赖关系,也就是说改变其中一个转盘中的选择,不会对第二个转盘产生影响.在下一篇文章会做一个转盘之间有依赖关系的例子. 下

js判断页面中是否有指定控件的简单实例

if (document.getElementById('show_pic')!=null){document.getElementById('show_pic').src=this.value;} show_pic是页面中的一个图片控件,我们首先要保证这个控件存在于页面上,才能对其进行操作,不然JS就会出现错误,所以用这种方式进行了判断,我听网友说,JS中还有一个函数,可以判断对象是否存在,可惜我没有找到.

Android评分控件RatingBar使用实例解析

无论游戏,应用,网站,都少不了评分控件.在Android SDK 中提供了 RatingBar控件来实现相应的工作. <RatingBar/>标签有几个常用评分相关属性 android:numStars,指定评分五角星数. android:rating,指定当前分数 android:stepSize, 指定分数增量 <RatingBar/>还有3种 常用的style属性 默认style 就是ratingBarStyle style ratingBarStyleIndicator 不

iOS开发中一些手写控件及其相关属性的使用

手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View Contollor和view的关系 2.注意点 在OC开发中,Storyboard中的所有操作都可以通过代码实现,程序员一定要熟练掌握代码布局界面的能力! 设置控件监听方法的示例代码如下: 复制代码 代码如下: [btn addTarget:s

VC++中HTControl的CHTButton按钮控件类用法实例解析

本文以实例形式讲解了VC++中HTControl控件类的CHTButton按钮控件类用法,相信对大家更好的理解VC++有一定的帮助.具体内容如下: 一般了解VC++的朋友都知道,VC++ 按钮控件CHTButton隶属HTControl控件组,直接由WIN32 API实现,你可以在SDK,MFC,wxWidget等环境下使用它.支持生成各种类型的按钮,比如:普通按钮,PNG透明按钮,复选框按钮,单选按钮等.使用时请注意,窗体必须动态创建,代码段如下: m_HTBtnClose.Create(75

IOS中的target action控件的实现

IOS中的target action控件的实现 实现代码: #import <Foundation/Foundation.h> @interface Sample : NSObject { SEL action; id target; } @property SEL action; @property (assign) id target; -(void)addTarget:(id) t action:(SEL) s; -(void)sample_dosomthing; @end #impor

Angularjs中使用layDate日期控件示例

layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指

总结Android中MD风格相关控件

要使用MD风格控件,首先需要在Gradle中加入Support Design Library,例如: compile 'com.android.support:design:24.1.1' 一.CoordinatorLayout 1.CoordinatorLayout + AppBarLayout 布局文件代码如下: <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.