UIPickerView

UIPickerView

UIPickerView 是使用旋轉輪或類似老虎機來顯示一組或多組值的視圖。

時鐘 應用中設置時間就是通過 UIPickerView 來實現的。

系統時鐘
彩云天氣-設置語言

UIPickerView.h 的源碼見附錄。

使用

單列選擇器

#import "ViewController.h"

@interface ViewController () <UIPickerViewDataSource, UIPickerViewDelegate>

@property (nonatomic, strong) UIPickerView *pickerView; // 選擇器視圖
@property (nonatomic, copy) NSArray *dataSourceArray;   // 數據源數組

@end

@implementation ViewController

#pragma mark - Lifecycle

- (void)viewDidLoad {
    [super viewDidLoad];
    // 設置選擇器數據源
    self.dataSourceArray = @[@"iMac",@"iPad",@"iPhone",@"iWatch",@"iPod"];
    // 添加選擇器視圖
    [self.view addSubview:self.pickerView];
}

#pragma mark - Custom Accessors

- (UIPickerView *)pickerView {
    if (!_pickerView) {
        CGRect frame = CGRectMake(50, 100, 275, 300);
        _pickerView = [[UIPickerView alloc] initWithFrame:frame];
        _pickerView.backgroundColor = [UIColor flatWhiteColor];
        _pickerView.dataSource = self;
        _pickerView.delegate = self;
    }
    return _pickerView;
}

#pragma mark - UIPickerViewDataSource

// 返回需要展示的列（columns）的數目
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 1;
}

// 返回每一列的行（rows）數
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return self.dataSourceArray.count;
}

#pragma mark - UIPickerViewDelegate

// 返回每一行的標題
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    return self.dataSourceArray[row];
}

// 某一行被選擇時調用
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    NSString *item = self.dataSourceArray[row];
    NSLog(@"第 %lu 項的 %@ 被選擇了！",row,item);
}

顯示效果

初始化選中中間項

// 初始化選中中間一項
[self.pickerView selectRow:2 inComponent:0 animated:NO];

這個方法可以讓選擇器初始化時選中指定項，這樣它就會居中顯示

效果如下：

多列選擇器

#import "ViewController.h"

@interface ViewController () <UIPickerViewDataSource, UIPickerViewDelegate>

// 選擇器視圖
@property (nonatomic, strong) UIPickerView *pickerView;
@property (nonatomic, copy) NSArray *column1Array;
@property (nonatomic, copy) NSArray *column2Array;

@end

@implementation ViewController

#pragma mark - Lifecycle

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 設置選擇器數據源
    self.column1Array = @[@"iMac",@"iPad",@"iPhone",@"iWatch",@"iPod"];
    self.column2Array = @[@"MacBook",@"MacBook Air",@"MacBook Pro",@"iMac",@"iMac Pro",@"Mac Pro",@"Mac mini"];
    
    // 添加選擇器視圖
    [self.view addSubview:self.pickerView];
}

#pragma mark - Custom Accessors

- (UIPickerView *)pickerView {
    if (!_pickerView) {
        CGRect frame = CGRectMake(50, 100, 275, 300);
        _pickerView = [[UIPickerView alloc] initWithFrame:frame];
        _pickerView.backgroundColor = [UIColor flatWhiteColor];
        _pickerView.dataSource = self;
        _pickerView.delegate = self;
    }
    return _pickerView;
}

#pragma mark - UIPickerViewDataSource

// 返回需要展示的列（columns）的數目
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    // 設置返回兩列
    return 2;
}

// 返回每一列的行（rows）數
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    switch (component) {
        case 0:
            // 第一列返回的行數
            return self.column1Array.count;
            break;
        case 1:
            // 第二列返回的行數
            return self.column2Array.count;
            break;
        default:
            return 0;
            break;
    }
}

#pragma mark - UIPickerViewDelegate

// 設置組件的寬度
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    if (component == 0) {
        return 90;
    }else {
        return 210;
    }
}

// 設置每行的高度
//- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component {
//    
//}

// 返回每一行的標題
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    switch (component) {
        case 0:
            // 第一列的標題
            return self.column1Array[row];
            break;
        case 1:
            // 第二列的標題
            return self.column2Array[row];
        default:
            return nil;
            break;
    }
}

// 某一行被選擇時調用
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    NSString *column1;
    NSString *column2;
    // 只會進入一個 case 分支, 不會兩個分支同時執行
    switch (component) {
        case 0: {
            column1 = self.column1Array[row];
            break;
        }
        case 1: {
            column2 = self.column2Array[row];
            break;
        }
        default:
            break;
    }
    NSLog(@"%@ - %@",column1,column2);
}

@end

顯示效果

相互依賴的多列選擇器

#import "ViewController.h"

@interface ViewController () <UIPickerViewDataSource, UIPickerViewDelegate>

// 選擇器視圖
@property (nonatomic, strong) UIPickerView *pickerView;

@property (nonatomic, copy) NSArray *column0Array; // 第一列
@property (nonatomic, copy) NSArray *column01Array; //與第一列相關聯的第二列

@property (nonatomic, copy) NSArray *column1Array;
@property (nonatomic, copy) NSArray *column2Array;
@property (nonatomic, copy) NSArray *column3Array;
@property (nonatomic, copy) NSArray *column4Array;
@property (nonatomic, copy) NSArray *column5Array;

@end

@implementation ViewController

#pragma mark - Lifecycle

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 設置選擇器數據源
    self.column0Array = @[@"Mac",@"iPad",@"iPhone",@"Watch",@"TV"];
    
    self.column1Array = @[@"MacBook",@"MacBook Air",@"MacBook Pro",@"iMac",@"iMac Pro",@"Mac Pro",@"Mac mini"];
    self.column2Array = @[@"iPad Pro",@"iPad",@"iPad mini 4"];
    self.column3Array = @[@"iPhone 7",@"iPhone 6s",@"iPhone SE"];
    self.column4Array = @[@"Apple Watch Serries 2",@"Apple Watch Nike+",@"Apple Watch Herms",@"Apple Watch Edition",@"Apple Watch Serries 1"];
    self.column5Array = @[@"Apple TV"];
    
    // 初始化第二列
    self.column01Array = self.column1Array;
    
    // 添加選擇器視圖
    [self.view addSubview:self.pickerView];
}

#pragma mark - Custom Accessors

- (UIPickerView *)pickerView {
    if (!_pickerView) {
        CGRect frame = CGRectMake(50, 100, 300, 300);
        _pickerView = [[UIPickerView alloc] initWithFrame:frame];
        _pickerView.backgroundColor = [UIColor flatWhiteColor];
        _pickerView.dataSource = self;
        _pickerView.delegate = self;
    }
    return _pickerView;
}

#pragma mark - UIPickerViewDataSource

// 返回需要展示的列（columns）的數目
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    // 設置返回兩列
    return 2;
}

// 返回每一列的行（rows）數
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    switch (component) {
        case 0:
            // 第一列返回的行數
            return self.column0Array.count;
            break;
        case 1:
            // 第二列返回的行數
            return self.column01Array.count;
            break;
        default:
            return 0;
            break;
    }
}

#pragma mark - UIPickerViewDelegate

// 設置組件的寬度
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    if (component == 0) {
        return 90;
    }else {
        return 210;
    }
}

// 返回每一行的標題
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    switch (component) {
        case 0:
            // 第一列的標題
            return self.column0Array[row];
            break;
        case 1:
            // 第二列的標題
            return self.column01Array[row];
        default:
            return nil;
            break;
    }
}

// 某一行被選擇時調用
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    if (component == 0) {
        // 根據選擇的左邊列，修改右邊列數組
        if (row == 0) {
            self.column01Array = self.column1Array;
        }else if (row == 1) {
            self.column01Array = self.column2Array;
        }else if (row == 2) {
            self.column01Array = self.column3Array;
        }else if (row == 3) {
            self.column01Array = self.column4Array;
        }else {
            self.column01Array = self.column5Array;
        }
        // 刷新右邊列數據
        [pickerView reloadComponent:1];
    }
}

@end

顯示效果

自定義視圖

// 返回自定義視圖
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(nullable UIView *)view {

    if (view == nil) {
        view = [[UIView alloc] init];
    }
    view.backgroundColor = [UIColor randomFlatColor];
    return view;
}

該方法可以返回任意 UIView 或其子類對象，比如 UILabel。

顯示效果

附錄1、UIPickerView 源碼

//
//  UIPickerView.h
//  UIKit
//
//  Copyright (c) 2006-2015 Apple Inc. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <CoreGraphics/CoreGraphics.h>
#import <UIKit/UIView.h>
#import <UIKit/UIKitDefines.h>

NS_ASSUME_NONNULL_BEGIN

@protocol UIPickerViewDataSource, UIPickerViewDelegate;

// **********************?? UIPickerView 頭文件******************************

NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIPickerView : UIView <NSCoding>

@property(nullable,nonatomic,weak) id<UIPickerViewDataSource> dataSource;                // 數據源協議，默認為 nil. 弱引用
@property(nullable,nonatomic,weak) id<UIPickerViewDelegate>   delegate;                  // 委托協議，默認為 nil. 弱引用

/** 
 * 該屬性控制是否顯示UIPickerView中的選中標記（以高亮背景作為選中標記）
 * 
 * 在iOS 7及更高版本上，你無法自定義 UIPickerView 選擇指示器。 
 * 選擇指示器將始終顯示，因此將此屬性設置為NO無效。
 **/
@property(nonatomic)        BOOL                       showsSelectionIndicator;   // 默認為  NO

// 從數據源和委托中獲取和緩存的信息
@property(nonatomic,readonly) NSInteger numberOfComponents; // 組件數目
- (NSInteger)numberOfRowsInComponent:(NSInteger)component;  // 指定組件中的 Item 項數目
- (CGSize)rowSizeForComponent:(NSInteger)component;         // 指定組件中 Item 項的尺寸

// 返回通過實現委托協議 pickerView:viewForRow:forComponent:reusingView: 得到的視圖
// 如果 row/組件不可見或者沒有實現 pickerView:viewForRow:forComponent:reusingView: 委托協議就返回 nil
- (nullable UIView *)viewForRow:(NSInteger)row forComponent:(NSInteger)component;

// 重新加載整個視圖或單個組件
- (void)reloadAllComponents;
- (void)reloadComponent:(NSInteger)component;

// 選擇項。 在這種情況下，意味著在中間顯示適當的行
- (void)selectRow:(NSInteger)row inComponent:(NSInteger)component animated:(BOOL)animated;  // 將指定的行滾動到中心位置。

- (NSInteger)selectedRowInComponent:(NSInteger)component;                                   // 返回所選行。 如果沒有選擇就返回-1

@end


// **********************?? UIPickerView 數據源協議******************************
__TVOS_PROHIBITED
@protocol UIPickerViewDataSource<NSObject>
@required // 必須實現

// 返回顯示的“列”數。
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;

// 返回每個組件中的行數
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;
@end

// **********************?? UIPickerView 委托協議******************************
__TVOS_PROHIBITED
@protocol UIPickerViewDelegate<NSObject>
@optional

// 返回每個組件的列的寬度和行的高度。
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component __TVOS_PROHIBITED;

// 關于高度值
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component __TVOS_PROHIBITED;

// 這些方法返回一個簡單的 NSString 字符串，NSAttributedString 字符串或一個視圖（如UILabel）來顯示組件的行。 
// 對于視圖版本，我們緩存任何隱藏的，未被使用的視圖，并將它們傳回以供重用。
// 如果您返回一個不同的對象，舊的將被釋放。 視圖將以行的 rect 為中心
// The methods in this group are marked @optional. However, to use a picker view, you must implement either the pickerView:titleForRow:forComponent: or the pickerView:viewForRow:forComponent:reusingView: method to provide the content of component rows. 下面兩個協議兩個必須實現其中一個以顯示組件內容
- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component __TVOS_PROHIBITED;
- (nullable NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component NS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED; // 如果兩種方法都實現，attributed title 優先被選擇
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(nullable UIView *)view __TVOS_PROHIBITED;

// 當用戶選擇組件中的某一行時，將會被調用。
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component __TVOS_PROHIBITED;

@end

NS_ASSUME_NONNULL_END

參考

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容