欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

iOS App中UIPickerView選擇欄控件的使用實(shí)例解析

 更新時(shí)間：2016年04月20日 09:34:07   作者：雙子座  
這篇文章主要介紹了iOS App中的UIPickerView選擇欄控件的使用,文中演示了兩個(gè)超詳細(xì)的例子,示例代碼為Objective-C,需要的朋友可以參考下

UIPickerView控件是比UIDatePicker控件更普通的Picker控件，UIDatePicker控件可以理解成是從UIPickerView控件加工出來(lái)的專門進(jìn)行日期選擇的控件。
UIPickerView控件的用法比UIDatePicker復(fù)雜一點(diǎn)。本文中的小例子將用UIPickerView控件做出兩種效果，第一個(gè)只有一個(gè)轉(zhuǎn)盤，第二個(gè)有兩個(gè)轉(zhuǎn)盤，但這兩個(gè)轉(zhuǎn)盤之間沒有依賴關(guān)系，也就是說(shuō)改變其中一個(gè)轉(zhuǎn)盤中的選擇，不會(huì)對(duì)第二個(gè)轉(zhuǎn)盤產(chǎn)生影響。在下一篇文章會(huì)做一個(gè)轉(zhuǎn)盤之間有依賴關(guān)系的例子。
下圖是我們的效果圖：

201642092318686.png (289×194)201642092345391.png (289×195)

第一個(gè)UIPickerView控件可以用來(lái)選擇Horse，Sheep，Pig，Dog，Cat，Chicken，Duck，Goose；第二個(gè)UIPickerView在第一個(gè)基礎(chǔ)上增加了一個(gè)轉(zhuǎn)盤。
閑話少說(shuō)，接下來(lái)就開始。
1、運(yùn)行Xcode，新建一個(gè)Single View Application，名稱為UIPickerView Test1，其他設(shè)置如下圖：

201642092406972.png (527×226)

2、單擊ViewController.xib，然后拖一個(gè)Picker View控件到視圖上：

201642092435719.png (1106×596)

然后再拖一個(gè)Button到Picker View下方，并修改名稱為Select：

201642092509331.png (434×165)

3、在ViewController.h中為Picker View控件創(chuàng)建Outlet映射，名稱為myPickerView，然后為Select按鈕創(chuàng)建Action映射，名稱為buttonPressed，具體方法不說(shuō)了，可以參照上一篇文章。
4、選中Picker View控件，打開Connections Inspector，找到delegate和datasource，從它們右邊的圓圈拉線到File's Owner：

201642092530816.png (883×217)

5、單擊ViewController.h，在其中添加代碼：

復(fù)制代碼 代碼如下:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIPickerViewDelegate, UIPickerViewDataSource>

@property (weak, nonatomic) IBOutlet UIPickerView *myPickerView;
@property (strong, nonatomic) NSArray *myPickerData;

- (IBAction)buttonPressed:(id)sender;

@end


 注意在@interface后面添加尖括號(hào)及其中內(nèi)容，我們將ViewController作為Picker View的Delegate以及DataSource。

6、代碼添加：

6.1 單擊ViewController.m，在@implementation的下一行添加代碼：

復(fù)制代碼 代碼如下:

@synthesize myPickerData;

6.2 找到buttonPressed方法，添加代碼如下：
復(fù)制代碼 代碼如下:

- (IBAction)buttonPressed:(id)sender {
    NSInteger row = [myPickerView selectedRowInComponent:0];
    NSString *selected = [myPickerData objectAtIndex:row];
    NSString *msg = [[NSString alloc] initWithFormat:
                       @"You selected %@!", selected];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello!"
                                                    message:msg
                                                   delegate:nil
                                          cancelButtonTitle:@"Yes, I Did."
                                          otherButtonTitles:nil];
    [alert show];
}

6.3 找到viewDidLoad方法，在其中添加代碼：
復(fù)制代碼 代碼如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
    NSArray *array = [[NSArray alloc] initWithObjects:@"Horse", @"Sheep", @"Pig", @"Dog", @"Cat", @"Chicken", @"Duck", @"Goose", nil];
    self.myPickerData = array;
}

6.4 找到viewDidUnload方法，在其中添加代碼：
復(fù)制代碼 代碼如下:

- (void)viewDidUnload
{
    [self setMyPickerView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.myPickerView = nil;
    self.myPickerData = nil;
}

6.5 在@end前面添加代碼：
復(fù)制代碼 代碼如下:

#pragma mark -
#pragma mark Picker Data Source Methods

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

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return [myPickerData count];
}

#pragma mark Picker Delegate Methods
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row             forComponent:(NSInteger)component {
    return [myPickerData objectAtIndex:row];
}


7、運(yùn)行：

201642092824191.png (315×450)201642092838249.png (315×450)

上面的例子只有一個(gè)轉(zhuǎn)盤，接下來(lái)我們?cè)诖嘶A(chǔ)上增加一個(gè)轉(zhuǎn)盤，第一個(gè)轉(zhuǎn)盤不變，第二個(gè)轉(zhuǎn)盤可以選擇Tree，F(xiàn)lower，Grass，F(xiàn)ence，House，Table，Chair，Book，Swing。只要添加代碼就行了。

8、單擊ViewController.h，在@interface下一行添加代碼：

復(fù)制代碼 代碼如下:

@property (strong, nonatomic) NSArray *myPickerData_2;

9、單擊ViewController.m，在其中添加代碼：

9.1 在@implementation的下一行添加代碼：

復(fù)制代碼 代碼如下:

@synthesize myPickerData_2;

9.2 找到viewDidLoad方法，在其中添加代碼：
復(fù)制代碼 代碼如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
    NSArray *array = [[NSArray alloc] initWithObjects:@"Horse", @"Sheep", @"Pig", @"Dog", @"Cat", @"Chicken", @"Duck", @"Goose", nil];
    self.myPickerData = array;
    NSArray *array_2 = [[NSArray alloc] initWithObjects:@"Tree", @"Flower", @"Grass", @"Fence", @"House", @"Table", @"Chair", @"Book",@"Swing" , nil];
    self.myPickerData_2 = array_2;
}

9.3 找到viewDidUnload方法，在其中追加代碼：
復(fù)制代碼 代碼如下:

- (void)viewDidUnload
{
    [self setMyPickerView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.myPickerView = nil;
    self.myPickerData = nil;
    self.myPickerData_2 = nil;
}

9.4 找到buttonPressed方法，修改代碼：
復(fù)制代碼 代碼如下:

- (IBAction)buttonPressed:(id)sender {
    NSInteger row = [myPickerView selectedRowInComponent:0];
    NSInteger row_2 = [myPickerView selectedRowInComponent:1];
   
    NSString *selected = [myPickerData objectAtIndex:row];
    NSString *selected_2 = [myPickerData_2 objectAtIndex:row_2];

    NSString *msg = [[NSString alloc] initWithFormat:
                       @"You selected %@ and %@!", selected, selected_2];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello!"
                                                    message:msg
                                                   delegate:nil
                                          cancelButtonTitle:@"Yes, I Did."
                                          otherButtonTitles:nil];
    [alert show];
}


9.5 找到numberOfComponentsInPickerView方法，修改其返回值為2：
復(fù)制代碼 代碼如下:

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

9.6 找到numberOfRowsInComponent方法，修改其中代碼：
復(fù)制代碼 代碼如下:

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    if (component == 0) {
        return [myPickerData count];
    }
    return [myPickerData_2 count];
}

9.7 找到下面的方法，修改代碼：
復(fù)制代碼 代碼如下:

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    if (component == 0) {
        return [myPickerData objectAtIndex:row];
    }
    return [myPickerData_2 objectAtIndex:row];
}

10、運(yùn)行：

201642092857931.png (315×450)201642092909311.png (315×450)

進(jìn)階實(shí)例
下面要用UIPickerView控件做出這樣的效果：它有兩個(gè)轉(zhuǎn)盤（Component），當(dāng)左邊的轉(zhuǎn)盤改變了選擇值，右邊轉(zhuǎn)盤所有的選項(xiàng)都改變。如下圖所示：

201642092925245.png (288×195)201642092941394.png (288×195)

為了達(dá)到這樣的效果，還是先要?jiǎng)?chuàng)建兩個(gè)NSArray對(duì)象，每個(gè)轉(zhuǎn)盤對(duì)應(yīng)一個(gè)。然后創(chuàng)建一個(gè)NSDictionary對(duì)象。我們可以想象出數(shù)據(jù)是樹形的，NSDictionary可以看成是一個(gè)有兩列的表格，第一列存儲(chǔ)的是關(guān)鍵字，每個(gè)關(guān)鍵字對(duì)應(yīng)一個(gè)NSArray對(duì)象，這些NSArray數(shù)組中存儲(chǔ)的是一系列的NSString對(duì)象。

在這個(gè)例子中，第一例存儲(chǔ)的是一些省份，第二列存儲(chǔ)的是省份對(duì)應(yīng)的地級(jí)市。

其實(shí)實(shí)現(xiàn)的方法跟上篇文章中的差不多，唯一不同的是要實(shí)現(xiàn)：改變左邊轉(zhuǎn)盤的選項(xiàng)，右邊轉(zhuǎn)盤內(nèi)容發(fā)生相應(yīng)的變化。這個(gè)功能要用到的函數(shù)我們上次也使用到了。

這次，我們先把要用到的代碼寫好，然后再用Interface Builder創(chuàng)建控件、實(shí)現(xiàn)映射等。

1、運(yùn)行Xcode 4.2，新建一個(gè)Single View Application，名稱為UIPickerView Test2：

201642093005019.png (466×198)

2、創(chuàng)建數(shù)據(jù)。我們用到的數(shù)據(jù)如下：

201642093020104.png (698×416)

在前邊的文章中曾經(jīng)提到過(guò)plist文件，現(xiàn)在，我們就要用plist文件存儲(chǔ)以上數(shù)據(jù)。為此，選擇File — New — New File，在打開的窗口中，左邊選擇iOS中的Resource，右邊選擇Property List：

201642093036571.png (635×212)

單擊Next，在打開的窗口中，Save As中輸入名稱provinceCities，Group選擇Supporting Files：

201642093053389.png (385×280)

單擊Create，就創(chuàng)建了provinceCities.plist。然后往其中添加數(shù)據(jù)，如下圖所示：

201642093107971.png (392×374)

3、單擊ViewController.h，向其中添加代碼：

復(fù)制代碼 代碼如下:

#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下一行添加代碼：

復(fù)制代碼 代碼如下:

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

4.2 在ViewDidLoad方法中添加代碼：
復(fù)制代碼 代碼如下:

- (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;
}

代碼中
復(fù)制代碼 代碼如下:

NSBundle *bundle = [NSBundle mainBundle];

用于獲得當(dāng)前程序的Main Bundle，這個(gè)Bundle可以看成是一個(gè)文件夾，其中的內(nèi)容遵循特定的框架。Main Bundle的一種主要用途是使用程序中的資源，如圖片、聲音等，本例中使用的是plist文件。下面的一行
復(fù)制代碼 代碼如下:

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

用來(lái)獲取provinceCities.plist的路徑，之后將這個(gè)文件中的內(nèi)容都放在一個(gè)NSDictionary對(duì)象中，用的是
復(fù)制代碼 代碼如下:

NSDictionary *dictionary = [NSDictionary dictionaryWithContentsOfURL:plistURL];

4.3 找到viewDidUnload方法，添加代碼：
復(fù)制代碼 代碼如下:

- (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之前添加代碼，實(shí)現(xiàn)buttonPressed方法：
復(fù)制代碼 代碼如下:

- (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之前添加代碼：
復(fù)制代碼 代碼如下:

#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這個(gè)方法。這個(gè)方法中，當(dāng)檢測(cè)到修改的是左邊轉(zhuǎn)盤的值，則將self.cities中的內(nèi)容替換成相應(yīng)的數(shù)組，并執(zhí)行[picker reloadComponent:kCityComponent];這個(gè)語(yǔ)句。

最后一個(gè)方法

復(fù)制代碼 代碼如下:

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

可以用來(lái)修改每個(gè)轉(zhuǎn)盤的寬度，雖然在這個(gè)例子中不必要，但是我們得知道是怎么做的。

代碼部分結(jié)束，接下來(lái)是使用Interface Builder添加控件、創(chuàng)建映射。

5、單擊ViewController.xib，往其中添加一個(gè)UIPickerView控件和一個(gè)Button，按鈕的名稱改為“選擇”，具體方法參照前面一

201642093136475.png (417×464)

接下來(lái)要做的就是拉幾條線。

6、選中新添加的UIPickerView控件，按住Control，拖到File's Owner圖標(biāo)，在彈出菜單選擇delegate和dataSource：
201642093152344.png (560×283)

打開Assistant Editor，確保其中打開的是ViewController.h，然后從picker屬性前邊的小圓圈拉線到UIPickerView控件：

201642093208465.png (686×257)

同樣，從buttonPressed方法前邊的小圓圈拉線到“選擇”按鈕。

7、運(yùn)行：

201642093225313.png (315×450)

相關(guān)文章

最新評(píng)論