UIPickerView 选择框

前言

  • Objective-C

    1
    2
    NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIPickerView : UIView <NSCoding, 
    UITableViewDataSource>
  • Swift

    1
    2
    @available(iOS 2.0, *) public class UIPickerView : UIView, NSCoding, 
    UITableViewDataSource
  • 选择框可以让用户以滑动的方式选择值。

1、UIPickerView 的创建

  • 遵守协议 UIPickerViewDataSource, UIPickerViewDelegate

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // 实例化 UIPickerView 对象
    UIPickerView *pickerView = [[UIPickerView alloc] init];

    // 设置代理
    pickerView.dataSource = self;
    pickerView.delegate = self;

    // 将 pickerView 添加到屏幕
    [self.view addSubview:pickerView];

    // 设置列数,必须设置,UIPickerViewDataSource 协议方法
    - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

    return 3;
    }

    // 设置行数,必须设置,UIPickerViewDataSource 协议方法
    - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {

    return 10;
    }

    // 设置各行内容,必须设置,UIPickerViewDelegate 方法
    - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

    return [NSString stringWithFormat:@"%li行 - %li列", row, component];
    }
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // 实例化 UIPickerView 对象
    let pickerView: UIPickerView = UIPickerView()

    // 设置代理
    pickerView.dataSource = self
    pickerView.delegate = self

    // 将 pickerView 添加到屏幕
    self.view.addSubview(pickerView)

    // 设置列数,必须设置,UIPickerViewDataSource 协议方法
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {

    return 3
    }

    // 设置行数,必须设置,UIPickerViewDataSource 协议方法
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

    return 10
    }

    // 设置各行内容,必须设置,UIPickerViewDelegate 方法
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {

    return String(format: "%li行 - %li列", row, component)
    }

2、UIPickerView 的设置

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    // 设置默认值
    [pickerView selectRow:1 inComponent:0 animated:YES]; // 第 0 列的默认值为 1
    [pickerView selectRow:2 inComponent:1 animated:YES]; // 第 1 列的默认值为 2
    [pickerView selectRow:3 inComponent:2 animated:YES]; // 第 2 列的默认值为 3

    // 设置 frame
    /*
    高度只有三个值:162, 180 和 216,默认为 216,设置为其它的值无效
    */
    pickerView.frame = CGRectMake(10, 30, self.view.bounds.size.width - 20, 162);

    // 设置位置
    pickerView.center = self.view.center;

    // 设置背景颜色
    pickerView.backgroundColor = [UIColor orangeColor];

    // 是否显示指示器
    /*
    default is NO
    */
    pickerView.showsSelectionIndicator = YES;

    // 刷新指定的列
    [pickerView reloadComponent:0];

    // 刷新所有的列
    [pickerView reloadAllComponents];

    // 获取列数,只读
    NSInteger numberOfComponents = pickerView.numberOfComponents;

    // 获取指定列的行数
    NSInteger numberOfRows = [pickerView numberOfRowsInComponent:0];

    // 获取指定行的尺寸
    CGSize rowSize = [pickerView rowSizeForComponent:0];

    // 获取指定列被选中的行数索引
    NSInteger selectedIndex = [pickerView selectedRowInComponent:0];

    // 获取指定行列的视图
    UIView *view = [pickerView viewForRow:3 forComponent:0];

    // 设置列宽
    /*
    不设置时为默认宽度,UIPickerViewDelegate 方法
    */
    - (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {

    return 50;
    }

    // 设置行高
    /*
    不设置时为默认高度 32,UIPickerViewDelegate 方法
    */
    - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component {

    return 50;
    }
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    // 设置默认值
    pickerView.selectRow(1, inComponent: 0, animated: true) // 第 0 列的默认值为 1
    pickerView.selectRow(2, inComponent: 1, animated: true) // 第 1 列的默认值为 2
    pickerView.selectRow(3, inComponent: 2, animated: true) // 第 2 列的默认值为 3

    // 设置 frame
    /*
    高度只有三个值:162, 180 和 216,默认为 216,设置为其它的值无效
    */
    pickerView.frame = CGRectMake(10, 30, self.view.bounds.size.width - 20, 162)

    // 设置位置
    pickerView.center = self.view.center

    // 设置背景颜色
    pickerView.backgroundColor = UIColor.orangeColor()

    // 是否显示指示器
    /*
    default is NO
    */
    pickerView.showsSelectionIndicator = true

    // 刷新指定的列
    pickerView.reloadComponent(0)

    // 刷新所有的列
    pickerView.reloadAllComponents()

    // 获取列数,只读
    let numberOfComponents: Int = pickerView.numberOfComponents

    // 获取指定列的行数
    let numberOfRows: Int = pickerView.numberOfRowsInComponent(0)

    // 获取指定行的尺寸
    let rowSize: CGSize = pickerView.rowSizeForComponent(0)

    // 获取指定列被选中的行数索引
    let selectedIndex: Int = pickerView.selectedRowInComponent(0)

    // 获取指定行列的视图
    let view: UIView? = pickerView.viewForRow(3, forComponent: 0)

    // 设置列宽
    /*
    不设置时为默认宽度,UIPickerViewDelegate 方法
    */
    func pickerView(pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {

    return 50
    }

    // 设置行高
    /*
    不设置时为默认高度 32,UIPickerViewDelegate 方法
    */
    func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {

    return 50
    }

3、UIPickerViewDataSource 协议方法

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 设置列数
    - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

    }

    // 设置行数
    - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {

    }
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 设置列数
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {

    }

    // 设置行数
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

    }

4、UIPickerViewDelegate 协议方法

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // 设置各行内容为 字符串
    - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

    }

    // 设置各行内容为 NSAttributedString 型字符串
    - (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component {

    }

    // 设置各行内容为 view
    - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {

    }

    // 设置列宽
    - (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {

    }

    // 设置行高
    - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component {

    }

    // 检测行的选择状态,在滑动停止后触发
    - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {

    }
  • Swift

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // 设置各行内容为 字符串
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {

    }

    // 设置各行内容为 NSAttributedString 型字符串
    func pickerView(pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {

    }

    // 设置各行内容为 view
    func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView?) -> UIView {

    }

    // 设置列宽
    func pickerView(pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {

    }

    // 设置行高
    func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {

    }

    // 检测行的选择状态,在滑动停止后触发
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

    }
文章目录
  1. 1. 前言
  2. 2. 1、UIPickerView 的创建
  3. 3. 2、UIPickerView 的设置
  4. 4. 3、UIPickerViewDataSource 协议方法
  5. 5. 4、UIPickerViewDelegate 协议方法
隐藏目录