ios控制項 UIPickerView實現省、市、地區聯動選取器

來源:互聯網
上載者:User

前言:UIPickerView是一個選取器控制項,它可以產生單列的選取器,也可產生多列的選取器,而且開發人員完全可以自訂選擇項的外觀,因此用法非常靈活。UIPickerView直接繼承了UIView,沒有繼承UIControl,因此,它不能像UIControl那樣綁定事件處理方法,UIPickerView的事件處理由其委派物件完成。

本文:UIPickerView控制項常用的屬性和方法如下:
  numberOfComponents:擷取UIPickerView指定列中包含的清單項目的數量。該屬性是一個唯讀屬性。
  showsSelectionIndicator:該屬性控制是否顯示UIPickerView中的選中標記(以高亮背景作為選中標記)。
  numberOfRowsInComponent:擷取UIPickerView包含的列數量。
  rowSizeForComponent:擷取UIPickerView包含的指定列中清單項目的大小。該方法返回一個CGSize對象。
  selectRow:inComponent:animated::該方法設定選中該UIPickerView中指定列的特定清單項目。最後一個參數控制是否使用動畫。
  selectedRowInComponent::該方法返回該UIPickerView指定列中被選中的清單項目。
  viewForRow:forComponent::該方法返回該UIPickerView指定列的清單項目所使用的UIView控制項。

UIDatePicker控制項只是負責該控制項的通用行為,而該控制項包含多少列,各列包含多少個清單項目則由UIPickerViewDataSource對象負責。開發人員必須為UIPickerView設定UIPickerViewDataSource對象,並實現如下兩個方法。
  numberOfComponentsInPickerView::該UIPickerView將通過該方法來判斷應該包含多少列。
  pickerView:numberOfRowsInComponent::該UIPickerView將通過該方法判斷指定列應該包含多少個清單項目。

如果程式需要控制UIPickerView中各列的寬度,以及各列中清單項目的大小和外觀,或程式需要為UIPickerView的選中事件提供響應,都需要為UIPickerView設定UIPickerViewDelegate委派物件,並根據需要實現該委派物件中的如下方法。
  pickerView:rowHeightForComponent::該方法返回的CGFloat值將作為該UIPickerView控制項中指定列中清單項目的高度。
  pickerView:widthForComponent::該方法返回的CGFloat值將作為該UIPickerView控制項中指定列的寬度。
  pickerView:titleForRow:forComponent::該方法返回的NSString值將作為該UIPickerView控制項中指定列的清單項目的文本標題。
  pickerView:viewForRow:forComponent:reusingView::該方法返回的UIView控制項將直接作為該UIPickerView控制項中指定列的指定清單項目。
  pickerView:didSelectRow:inComponent::當使用者單擊選中該UIPickerView控制項的指定列的指定清單項目時將會激發該方法

Interface Builder只支援為UIPickerView設定一個屬性——Shows Selection Indicator,該屬性用於控制是否顯示UIPickerView中的選中標記(以高亮背景作為選中標記)。

執行個體:通過前面的知識普及,我們知道了UIPickerView的使用方法, 下面通過一個小例子,來更全面的理解。

1.在storyboard裡的controllerView上面拖一個控制項,連結到.h檔案中,代碼如下:

@property (weak, nonatomic) IBOutlet UIPickerView *picker;

2.在.m檔案裡設定代理,並設定全域變數,代碼如下:

#import "ViewController.h"
@interface ViewController ()<UIPickerViewDelegate,UIPickerViewDataSource>
{
    NSArray *_province;
    NSDictionary *_city;
    NSDictionary *_country;
}
@end

3.設定城市省份資料,代碼如下:


//省
_province = @[@"北京", @"廣西", @"廣東"];
//市
_city = @{
           @"北京":@[@"朝陽區", @"東城區", @"西城區"],
           @"廣西":@[@"桂林市", @"南寧市"],
           @"廣東":@[@"惠州市", @"廣州市", @"深圳市",@"東莞市"]
 //縣區
_country = @{
             @"朝陽區":@[@"朝陽區1", @"朝陽區2", @"朝陽區3"],
             @"東城區":@[@"東城區1", @"東城區2",@"東城區3",@"東城區4"],
             @"西城區":@[@"西城區1", @"西城區2", @"西城區3",@"西城區4"],
             @"桂林市":@[@"桂林市1", @"桂林市2", @"桂林市3"],
             @"南寧市":@[@"南寧市1", @"南寧市2",@"南寧市3",@"南寧市4"],
             @"惠州市":@[@"惠州市1", @"惠州市2", @"惠州市3",@"惠州市4"],
             @"廣州市":@[@"廣州市1", @"廣州市2", @"廣州市3"],
             @"深圳市":@[@"深圳市1", @"深圳市2",@"深圳市3",@"深圳市4"],
             @"東莞市":@[@"東莞市1", @"東莞市2", @"東莞市3",@"東莞市4"],
             };
4.綁定代理,代碼如下:


self.picker.dataSource = self;
self.picker.delegate = self;

5.設定UIPickerView的資料來源方法,代碼如下:


#pragma mark - 該方法的傳回值決定該控制項包含多少列
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pickerView
{
    return 3;
}
#pragma mark - 該方法的傳回值決定該控制項指定列包含多少個清單項目
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if (0 == component)
    {
        return _province.count;
    }
    if (1 == component) {
        NSInteger rowProvince = [pickerView selectedRowInComponent:0];
        NSString *provinceName = _province[rowProvince];
        NSArray *citys = _city[provinceName];
        return citys.count;
    }else{
        NSInteger rowProvince = [pickerView selectedRowInComponent:0];
        NSString *provinceName = _province[rowProvince];
        NSArray *citys = _city[provinceName];
 
        NSInteger rowCity = [pickerView selectedRowInComponent:1];
        NSString *cityName = citys[rowCity];
        NSArray *country = _country[cityName];
 
        return country.count;
    }
}

 6.設定UIPickerView的代理方法,代碼如下:

#pragma mark - 該方法返回的NSString將作為UIPickerView中指定列和清單項目的標題文本
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    if (0 == component) {
        return _province[row];
    }
    if(1 == component){
        NSInteger rowProvince = [pickerView selectedRowInComponent:0];
        NSString *provinceName = _province[rowProvince];
        NSArray *citys = _city[provinceName];
        return citys[row];
    }else{
        NSInteger rowProvince = [pickerView selectedRowInComponent:0];
        NSString *provinceName = _province[rowProvince];
        NSArray *citys = _city[provinceName];
 
        NSInteger rowCity = [pickerView selectedRowInComponent:1];
        NSString *cityName = citys[rowCity];
        NSArray *country = _country[cityName];
 
        return country[row];
    }
}

7.當選中某行時,通過如下的代碼即可擷取到選中的城市地區,


#pragma mark - 當使用者選中UIPickerViewDataSource中指定列和清單項目時激發該方法
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    if(0 == component){
        [pickerView reloadComponent:1];
        [pickerView reloadComponent:2];
    }
    if(1 == component)
        [pickerView reloadComponent:2];
        NSInteger rowOne = [pickerView selectedRowInComponent:0];
        NSInteger rowTow = [pickerView selectedRowInComponent:1];
        NSInteger rowThree = [pickerView selectedRowInComponent:2];
 
        NSString *provinceName = _province[rowOne];
 
        NSArray *citys = _city[provinceName];
 
        NSString *cityName = citys[rowTow];
        NSArray *countrys = _country[cityName];
 
        NSLog(@"%@~%@~%@", _province[rowOne], citys[rowTow],countrys[rowThree]);
}
運行結果:好了,通過以上幾個步驟,就可以製作出一個簡單的城市選取器。運行效如下:

            

註:藍色按鈕”確定”那一行,是一個UIToolbar控制項,在此就不作詳解了,不然會有點喧賓奪主,有興趣的好友,可以私下交流,或者下回分解。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.