[小白學iOS程式設計03]UIPickerView控件學習_省市關聯

注：［小白學iOS程式設計］是本小白根據某視訊學習iOS程式設計過程的筆記記錄，内容比較容易，高手勿噴。

轉自請注明原部落格位址:http://blog.csdn.net/fan_yufan/article/details/45922303

1. 效果圖展示

2. 項目代碼

2.1 在Main.storyboard中拖入UIPickerView控件，點選此控件後右鍵，選擇dataSource以及delegate并把它們拖到View Controller中，然後實作dataSource和delegate協定

UIPickerViewDataSource，UIPickerViewDelegate

中的方法。

2.2 将素材檔案provinces.plist拖拽到Supporting Files中。觀察下provinces.plist中的資料。

2.3 代碼編寫

2.3.1 将provinces.plist的資料轉換為HMProvince模型

//
//  HMProvince.h
//  03-省市關聯
//


#import <Foundation/Foundation.h>

@interface HMProvince : NSObject

@property(nonatomic,copy)NSString *name;
@property(nonatomic,strong)NSArray *cities;

-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)provinceWithDict:(NSDictionary *)dict;

@end
           

//
//  HMProvince.m
//  03-省市關聯
//

#import "HMProvince.h"

@implementation HMProvince

-(instancetype)initWithDict:(NSDictionary *)dict{

    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }

    return self;
}
+(instancetype)provinceWithDict:(NSDictionary *)dict{
    return [[self alloc] initWithDict:dict];
}
@end
           

2.3.2 HMViewController控制器中代碼的編寫

//
//  HMViewController.h
//  03-省市關聯
//

#import <UIKit/UIKit.h>

@interface HMViewController : UIViewController

@end
           

//
//  HMViewController.m
//  03-省市關聯
//

#import "HMViewController.h"
#import "HMProvince.h"

@interface HMViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>

@property(nonatomic,strong)NSArray *provinces;

@property(nonatomic,assign)int provinceIndex;//選中城市索引

@end

@implementation HMViewController


-(NSArray *)provinces{
    if (_provinces == nil) {
        NSString *path = [[NSBundle mainBundle] pathForResource:@"provinces" ofType:@"plist"];

        NSArray *provinceArr = [NSArray arrayWithContentsOfFile:path];

        NSMutableArray *provincesM = [NSMutableArray array];

        for (NSDictionary *dict in provinceArr) {
            HMProvince *province = [HMProvince provinceWithDict:dict];
            [provincesM addObject:province];

        }

        _provinces = provincesM;


    }

    return _provinces;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSLog(@"%@",self.provinces);
}


// returns the number of 'columns' to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return ;
}

// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{

    if (component == ) {
        return self.provinces.count;
    }else{
        HMProvince *province = self.provinces[self.provinceIndex];
        return province.cities.count;
    }
}


-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
    UILabel *label = nil;

    if (view != nil) {
        label = (UILabel *)view;
        //設定bound
    }else{
        label = [[UILabel alloc] init];
    }


    //顯示省份
    if (component == ) {
        HMProvince *province = self.provinces[row];
        label.text = province.name;
        label.backgroundColor = [UIColor grayColor];
        //label.bounds = CGRectMake(0, 0, 150, 30);
    }else{//顯示城市
        //預設是第一城市
        HMProvince *province = self.provinces[self.provinceIndex];
        label.text = province.cities[row];
        //label.bounds = CGRectMake(0, 0, 100, 30);
        label.backgroundColor = [UIColor purpleColor];

    }

    return label;

}


-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{

    //省份選中
    if (component == ) {
        HMProvince *province = self.provinces[row];
        NSLog(@"選中省份 %@",province.name);
        //更改目前選中的省份索引
        self.provinceIndex = row;

        //重新整理右邊的資料
        [pickerView reloadComponent:];

        //重新設定右邊的資料顯示第一行
        [pickerView selectRow: inComponent: animated:YES];
    }
}

//view的寬度
-(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    //省份的label寬度為150
    if (component == ) {
        return ;
    }else{
    //市的labl的寬度為100
        return ;
    }
}

-(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
    return ;
}

@end
           

3. 知識點總結

3.1 UIPickerView 中的方法

//重新整理第i組的資料
[self.pickerView reloadComponent:i];
           

#pragma mark 設定pickerView裡每一個view的高度
-(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;
#pragma mark 設定pickerView裡每一個view的寬度
-(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;
           

4. 素材内容連結

• provinces.plist檔案