文档章节

iOS开发12:UIPickerView控件(2)

双子座
 双子座
发布于 2012/03/24 11:01
字数 1655
阅读 10415
收藏 17

这次要用UIPickerView控件做出这样的效果:它有两个转盘(Component),当左边的转盘改变了选择值,右边转盘所有的选项都改变。如下图所示:

 

为了达到这样的效果,还是先要创建两个NSArray对象,每个转盘对应一个。然后创建一个NSDictionary对象。我们可以想象出数据是树形的,NSDictionary可以看成是一个有两列的表格,第一列存储的是关键字,每个关键字对应一个NSArray对象,这些NSArray数组中存储的是一系列的NSString对象。

在这个例子中,第一例存储的是一些省份,第二列存储的是省份对应的地级市。

其实实现的方法跟上篇文章中的差不多,唯一不同的是要实现:改变左边转盘的选项,右边转盘内容发生相应的变化。这个功能要用到的函数我们上次也使用到了。

这次,我们先把要用到的代码写好,然后再用Interface Builder创建控件、实现映射等。

1、运行Xcode 4.2,新建一个Single View Application,名称为UIPickerView Test2:

2、创建数据。我们用到的数据如下:

江苏省:
南京市  无锡市  徐州市  常州市  苏州市  南通市  连云港市  淮安市  盐城市  扬州市  镇江市  泰州市  宿迁市
浙江省:
杭州市  宁波市  温州市  嘉兴市  湖州市  绍兴市  金华市  衢州市  舟山市  台州市  丽水市
安徽省:
合肥市  芜湖市  蚌埠市  淮南市  马鞍山市  淮北市  铜陵市  安庆市  黄山市  滁州市  阜阳市  宿州市  巢湖市  六安市  亳州市  池州市  宣城市
福建省:
福州市  厦门市  莆田市  三明市  泉州市  漳州市  南平市  龙岩市  宁德市
江西省:
南昌市  景德镇市  萍乡市  九江市  新余市  鹰潭市  赣州市  吉安市  宜春市  抚州市  上饶市
山东省:
济南市  青岛市  淄博市  枣庄市  东营市  烟台市  潍坊市  济宁市  泰安市  威海市  日照市  莱芜市  临沂市  德州市  聊城市  滨州市  菏泽市
河南省:
郑州市  开封市  洛阳市  平顶山市  安阳市  鹤壁市  新乡市  焦作市  濮阳市  许昌市  漯河市  三门峡市  南阳市  商丘市  信阳市  周口市  驻马店市
广东省:
广州市  深圳市  珠海市  汕头市  韶关市  佛山市  江门市  湛江市  茂名市  肇庆市  惠州市  梅州市  汕尾市  河源市  阳江市  清远市  东莞市  中山市  潮州市  揭阳市  云浮市
四川省:
成都市  自贡市  攀枝花市  泸州市  德阳市  绵阳市  广元市  遂宁市  内江市  乐山市  南充市  眉山市  宜宾市  广安市  达州市  雅安市  巴中市  资阳市

在前边的文章中曾经提到过plist文件,现在,我们就要用plist文件存储以上数据。为此,选择File — New — New File,在打开的窗口中,左边选择iOS中的Resource,右边选择Property List:

单击Next,在打开的窗口中,Save As中输入名称provinceCities,Group选择Supporting Files:

单击Create,就创建了provinceCities.plist。然后往其中添加数据,如下图所示:

3、单击ViewController.h,向其中添加代码:

#import <UIKit/UIKit.h>

#define kProvinceComponent 0
#define kCityComponent 1

@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource>

@property (strong, nonatomic) IBOutlet UIPickerView *picker;
@property (strong, nonatomic) NSDictionary *provinceCities;
@property (strong, nonatomic) NSArray *provinces;
@property (strong, nonatomic) NSArray *cities;

- (IBAction)buttonPressed;

@end

4、单击ViewController.m,向其中添加代码:

4.1 在@implementation下一行添加代码:

@synthesize picker;
@synthesize provinceCities;
@synthesize provinces;
@synthesize cities;

4.2 在ViewDidLoad方法中添加代码:

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    NSBundle *bundle = [NSBundle mainBundle];
    NSURL *plistURL = [bundle URLForResource:@"provinceCities" withExtension:@"plist"];
    
    NSDictionary *dictionary = [NSDictionary dictionaryWithContentsOfURL:plistURL];
    self.provinceCities = dictionary;
    NSArray *components = [self.provinceCities allKeys];
    NSArray *sorted = [components sortedArrayUsingSelector:@selector(compare:)];
    self.provinces = sorted;
    
    NSString *selectedState = [self.provinces objectAtIndex:0];
    NSArray *array = [provinceCities objectForKey:selectedState];
    self.cities = array;
}

代码中

NSBundle *bundle = [NSBundle mainBundle];

用于获得当前程序的Main Bundle,这个Bundle可以看成是一个文件夹,其中的内容遵循特定的框架。Main Bundle的一种主要用途是使用程序中的资源,如图片、声音等,本例中使用的是plist文件。下面的一行

NSURL *plistURL = [bundle URLForResource:@"provinceCities" withExtension:@"plist"];

用来获取provinceCities.plist的路径,之后将这个文件中的内容都放在一个NSDictionary对象中,用的是

NSDictionary *dictionary = [NSDictionary dictionaryWithContentsOfURL:plistURL];

4.3 找到viewDidUnload方法,添加代码:

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.picker = nil;
    self.provinceCities = nil;
    self.provinces = nil;
    self.cities = nil;
}

4.4 在@end之前添加代码,实现buttonPressed方法:

- (IBAction)buttonPressed:(id)sender {
    NSInteger provinceRow = [picker selectedRowInComponent:kProvinceComponent];
    NSInteger cityRow = [picker selectedRowInComponent:kCityComponent];
    
    NSString *province = [self.provinces objectAtIndex:provinceRow];
    NSString *city = [self.cities objectAtIndex:cityRow];
    
    NSString *title = [[NSString alloc] initWithFormat:@"你选择了%@.", city];
    NSString *message = [[NSString alloc] initWithFormat:@"%@属于%@", city, province];
    
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title message:message delegate:nil cancelButtonTitle:@"好的" otherButtonTitles: nil];
    [alert show];
}

4.5 在@end之前添加代码:

#pragma mark -
#pragma mark Picker Date Source Methods
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 2;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    if (component == kProvinceComponent) {
        return [self.provinces count];
    }
    return [self.cities count];
}

#pragma mark Picker Delegate Methods
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    if (component == kProvinceComponent) {
        return [self.provinces objectAtIndex:row];
    }
    return [self.cities objectAtIndex:row];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    if (component == kProvinceComponent) {
        NSString *selectedState = [self.provinces objectAtIndex:row];
        NSArray *array = [provinceCities objectForKey:selectedState];
        self.cities = array;
        [picker selectRow:0 inComponent:kCityComponent animated:YES];
        [picker reloadComponent:kCityComponent];
    }
}

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    if (component == kCityComponent) {
        return 150;
    }
    return 140;
}

可以看到,跟上篇文章的例子相比,大部分代码是一样的,不同的是增加了pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component这个方法。这个方法中,当检测到修改的是左边转盘的值,则将self.cities中的内容替换成相应的数组,并执行[picker reloadComponent:kCityComponent];这个语句。

最后一个方法

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

可以用来修改每个转盘的宽度,虽然在这个例子中不必要,但是我们得知道是怎么做的。

代码部分结束,接下来是使用Interface Builder添加控件、创建映射。

5、单击ViewController.xib,往其中添加一个UIPickerView控件和一个Button,按钮的名称改为“选择”,具体方法参照前面一篇文章:

接下来要做的就是拉几条线。

6、选中新添加的UIPickerView控件,按住Control,拖到File’s Owner图标,在弹出菜单选择delegate和dataSource:

打开Assistant Editor,确保其中打开的是ViewController.h,然后从picker属性前边的小圆圈拉线到UIPickerView控件:

同样,从buttonPressed方法前边的小圆圈拉线到“选择”按钮。

7、运行:

最终代码:http://www.oschina.net/code/snippet_164134_11067

© 著作权归作者所有

双子座
粉丝 540
博文 78
码字总数 61009
作品 0
南京
程序员
私信 提问
加载中

评论(13)

zengyongwei15
zengyongwei15
79楼主干的漂亮~~
郝一霖
郝一霖
选择第一列的同时 立即滑动第二列 数据就对不上了
郝一霖
郝一霖
有问题
z
zk0301
dataSource好像adnroid里面的adapter 拖线什么的最晕了
下一篇 冲啊
l
liaoyinhan
我无法往provinceCities.plist里添加数据。。。
双子座
双子座 博主

引用来自“yangdefeng”的评论

麻烦大哥上传一下啦。

http://www.oschina.net/code/snippet_164134_11067
y
yangdefeng
麻烦大哥上传一下啦。
双子座
双子座 博主

引用来自“yangdefeng”的评论

大哥这个的源码在哪里下载?

没上传
y
yangdefeng
大哥这个的源码在哪里下载?
双子座
双子座 博主

引用来自“memory_scar”的评论

我想在storyboard里面使用
但是找不到files' owner 该怎么办啊

貌似只能用代码实现。在ViewController中的viewDidLoad方法中添加代码:
myPicker.delegate = self;
myPicker.dataSource = self;
这里的myPicker是你为UIPickerView控件创建的Outlet映射名称
iOS选择器视图控件(UIPickerView)使用方法总结

iOS中UIPickerView使用总结 UIPickerView是iOS中的原生选择器控件,使用方便,用法简单,效果漂亮。 @property(nonatomic,assign) id<UIPickerViewDataSource> dataSource; @property(nonat......

珲少
2015/06/10
602
0
【书坊赠书福利——第二期】《iOS 8开发指南》

本周是人邮IT书坊赠书的第二期,第一期参与度极高,微信君在此感谢你们的支持,第一期获奖赠书已全部寄出。 本周赠品 本周,微信君给大家推荐@人民邮电出版社-信息技术分社 刚刚上架的新书《...

生气的散人
2014/09/23
381
0
【IOS视频教学】三个月学会IOS开发

一、windows系统下安装虚拟机-mac系统-视频教程-安装件全套下载:http://www.wyzc.com/forum/56212.html 二、史上最佳0基础Swift语言视频教程下载链接:http://www.wyzc.com/forum/56744.htm...

马洪伟
2014/12/25
432
0
TeeChart .NET for iOS图表开发入门教程

去年,TeeChart 为iOS图表开发专门发布了TeeChart NET for iOS(包含在TeeChart Mobile中,TeeChart8.5折进行中),相信很多人都对其感兴趣。慧都为大家制作了TeeChart NET for iOS的入门教程...

裸奔的火腿肠
2014/02/25
75
0
iOS学习之自定义弹出UIPickerView或UIDatePicker(动画效果)

前面iOS学习之UIPickerView控件的简单使用 用到的UIPickerView弹出来是通过 textField.inputView = selectPicker; textField.inputAccessoryView = doneToolbar; 这中方法来做的。如果UIPic...

知行合一100
2012/08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【0911】linux软件包安装和卸载

【0911】linux软件包安装和卸载 一、安装软件包的三种方法 1、rpm工具:与win中的exe安装包类似,红帽子公司包管理系统 2、yum工具:属于一种用python开发的工具,支持自动的安装依赖的包 3、...

飞翔的竹蜻蜓
19分钟前
3
0
【外行学IT】手机网页自适应之rem和viewport

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习。 我在学习写手机网页时也困惑了许久,出现过下面的问题: 图片...

前端老手
30分钟前
5
0
三、Java设计模式之单一职责原则

定义:不要存在多于一个导致类变更的原因。 一个类、接口、方法只负责一项职责 优点:降低类的复杂度、提高类的可读性,提高系统的可维护性、降低变更引起的风险

东风破2019
38分钟前
4
0
搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) KaliArch关注1人评论28269人阅读2017-12-04 21:57:41 MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https:/...

linjin200
57分钟前
6
0
Pandas DataFrame创建方法大全

Pandas是Python的数据分析利器,DataFrame是Pandas进行数据分析的基本结构,可以把DataFrame视为一个二维数据表,每一行都表示一个数据记录。本文将介绍创建Pandas DataFrame的6种方法。 创建...

汇智网教程
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部