iOS開發之城市選擇器

YungFan發表於2017-12-13
iOS

城市選擇器，藉助於UIPickerView來實現，第一列為省份，第二列為第一列省份對應的城市或者區，資料放在plist中，plist結構如下圖所示，第一層是一個Dictionary，每個省份對應的城市是一個Array：

plist.png

實現步驟

第一步

拖入一個UIPickerView到StoryBoard中，然後設定UIPickerViewDelegate,和UIPickerViewDataSource為當前的控制器，如下圖紅色區域所示：

設定資料來源與代理.png

第二步

在對應的ViewController中進行實現，程式碼註釋非常詳細

#import "ViewController.h"

@interface ViewController () <UIPickerViewDelegate, UIPickerViewDataSource>

/**
 *  plist對應的字典
 */
@property (nonatomic, strong) NSDictionary* cityNames;
/**
 *  省份
 */
@property (nonatomic, strong) NSArray* provinces;
/**
 *  城市
 */
@property (nonatomic, strong) NSArray* cities;
/**
 *  選中的省份
 */
@property (nonatomic, strong) NSString* selectedProvince;

@end

@implementation ViewController

/**
 *  懶載入plist
 *
 *  @return plist對應的字典
 */
- (NSDictionary*)cityNames
{
    if (_cityNames == nil) {

        NSString* path = [[NSBundle mainBundle] pathForResource:@"cityData" ofType:@"plist"];

        _cityNames = [NSDictionary dictionaryWithContentsOfFile:path];
    }

    return _cityNames;
}

/**
 *  懶載入省份
 *
 *  @return 省份對應的陣列
 */
- (NSArray*)provinces
{
    if (_provinces == nil) {

        //將省份儲存到陣列中  但是字典儲存的是無序的 所以讀出來的省份也是無序的
        _provinces = [self.cityNames allKeys];
    }

    return _provinces;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    
     //設定預設選中的省份是provinces中的第一個元素
    self.selectedProvince = self.provinces[0];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/**
 *  返回每一列的行數
 *
 *  @param pickerView
 *  @param component
 *
 *  @return
 */
- (NSInteger)pickerView:(UIPickerView*)pickerView numberOfRowsInComponent:(NSInteger)component
{

    if (component == 0) {
        return self.provinces.count;
    }
    else {

        self.cities = [self.cityNames valueForKey:self.selectedProvince];

        return self.cities.count;
    }
}

/**
 *  返回每一行顯示的文字
 *
 *  @param pickerView
 *  @param row
 *  @param component
 *
 *  @return
 */
- (NSString*)pickerView:(UIPickerView*)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    //第一列返回所有的省份
    if (component == 0) {
        return self.provinces[row];
    }
    else {

        self.cities = [self.cityNames valueForKey:self.selectedProvince];

        return self.cities[row];
    }
}


/**
 *  一共多少咧
 *
 *  @param pickerView
 *
 *  @return
 */
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
{
    return 2;
}

/**
 *  選中某一行後回撥 聯動的關鍵
 *
 *  @param pickerView
 *  @param row        使用者選擇的省份
 *  @param component
 */
- (void)pickerView:(UIPickerView*)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{

    if (component == 0) {

        //選中的省份
        self.selectedProvince = self.provinces[row];
        //重新載入第二列的資料
        [pickerView reloadComponent:1];
        //讓第二列歸位
        [pickerView selectRow:0 inComponent:1 animated:YES];
    }
}

@end
複製程式碼

實現效果

城市選擇器.gif

附件

plist檔案下載地址：http://pan.baidu.com/s/1dETRthZ

相關文章