【iOS】UIPickerView介绍

学习文章

IOS学习笔记（六）inputAccessoryView，inputView

效果

PickerView.gif

简单介绍

UIPickerView并不是一个使用频率很高的控件,但指不定你的应用中就会用到.

UIPickerView的用法符合苹果一贯的设计,跟UITableView很像,而且比UITableView简单.

跟UITableView做一下类比,UIPickerViewDataSource用来监听数据源,UIPickerViewDelegate用来监听事件.还有一个与UIPickerView相关的协议UIPickerViewAccessibilityDelegate,这是用来实现Accessibility and VoiceOver的,参见.

看网上的教程说UIPickerView的高度是一定的,然而我测试,高度还是由你设定的frame决定的,并没有什么固定值.

再说一下showsSelectionIndicator这个布尔值属性,iOS7之后没有效果了,参见

showsSelectionIndicator在iOS7后无效果.png

最后说一下,关于定制UIPickerView 的component 的三个代理方法

1.
- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component __TVOS_PROHIBITED;  
  
2.
- (nullable NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component NS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED; // attributed title is favored if both methods are implemented  
  
3.
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(nullable UIView *)view __TVOS_PROHIBITED;

这三个方法的优先级是递增的,也就是说,你实现了方法3,就不走方法2,你实现了方法2,就不走方法1了.

简单介绍的源码


#import "ViewController.h"


#define SCREEN_WIDTH  ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

// 还有一个与UIPickerView相关的协议UIPickerViewAccessibilityDelegate,这是用来实现Accessibility and VoiceOver的
@interface ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>

@property (nonatomic, strong) UIPickerView    *m_pickerView;
@property (nonatomic, strong) NSMutableArray  *m_yearArray;
@property (nonatomic, strong) NSMutableArray  *m_monthArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    self.title = @"UIPickerView简单介绍";
    
    self.m_yearArray  = [NSMutableArray arrayWithArray:@[@"2014年",@"2015年"]];
    self.m_monthArray = [NSMutableArray arrayWithArray:@[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月",@"8月",@"9月",@"10月",@"11月",@"12月"]];

    // 看网上的教程说UIPickerView的高度是一定的,然而我测试,高度还是由你设定的frame决定的,并没有什么固定值
    self.m_pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height - 200, self.view.frame.size.width, 200)];
    [self.view addSubview:self.m_pickerView];
    
    self.m_pickerView.dataSource = self;
    self.m_pickerView.delegate   = self;
    
    // iOS7之后没有效果了,参见https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/UIPickerView.html
    self.m_pickerView.showsSelectionIndicator = YES;
}

#pragma mark - UIPickerViewDataSource
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

    return 2;
}


- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {

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

#pragma mark - UIPickerViewDelegate
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {

    return self.view.frame.size.width/2.0;
}
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component __TVOS_PROHIBITED {

    return 40;
}


- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

    if (component == 0) {
        
        return self.m_yearArray[row];
        
    } else {
    
        return self.m_monthArray[row];
    }
}

// 此方法的优先级高于上面的方法,实现了此方法,则上面的方法就不执行了,这个很好理解
// 经过我的测试,此方法的reusingView并没什么用,可能是iOS7之后不再使用,方法说明中关于此参数是这样说的"A view object that was previously used for this row, but is now hidden and cached by the picker view.",另外参考http://stackoverflow.com/questions/20635949/reusing-view-in-uipickerview-with-ios-7
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(nullable UIView *)view  {
    
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 40)];
    
    if (component == 0) {
        
        label.text = self.m_yearArray[row];
        
    } else {
        
        label.text = self.m_monthArray[row];
    }
    
    
    return label;
}

@end

UIPickerView 作为 InputView

我们知道,UITextField 和UITextView 有两个属性 inputView 和 inputAccessoryView,可以用来自定义键盘和键盘的附属视图,其实,这两个属性UIResponder就有,只不过是readonly.

UIResponde两个属性.png

根据此,我们可以将UIPickerView 作为 任何 UIResponder 的子类的 InputView ,不过,我们需要做一些调整.

比如,我们准备让UIPickerView 作为 UIButton 的 InputView,我们需要实现一个 UIButton 的子类,在子类中,我们将这两个属性改为readwrite,并使这个子类可以成为第一响应者.

// 将UIResponder的这两个readonly属性变为readwrite
@property (nonatomic,strong,readwrite) __kindof UIView * inputView;
@property (nonatomic,strong,readwrite) __kindof UIView * inputAccessoryView;  
  
// 这个方法必须实现
- (BOOL) canBecomeFirstResponder {
    
    return YES;
}

接下来,我用两种方式来实现将 UIPickerView 作为 InputView ,一种将 UIPickerView封装到View层(用UIButton的子类作为例子),一种将UIPickerView 封装到控制器层(用UILabel的子类作为例子).

封装到View层源码

ButtonWithPickerView.h

#import <UIKit/UIKit.h>

// 此类用以说明如何将 PickerView 封装到 View 层
@interface ButtonWithPickerView : UIButton

@end

ButtonWithPickerView.m

#import "ButtonWithPickerView.h"

#define SCREEN_WIDTH  ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

@interface ButtonWithPickerView () <UIPickerViewDataSource,UIPickerViewDelegate>

// 将UIResponder的这两个readonly属性变为readwrite
@property (nonatomic,strong,readwrite) __kindof UIView * inputView;
@property (nonatomic,strong,readwrite) __kindof UIView * inputAccessoryView;
@property (nonatomic, strong) NSMutableArray  *m_yearArray;
@property (nonatomic, strong) NSMutableArray  *m_monthArray;

@property (nonatomic, strong) NSString * m_yearStr;
@property (nonatomic, strong) NSString * m_monthStr;

@end

@implementation ButtonWithPickerView

// 这个方法必须实现
- (BOOL) canBecomeFirstResponder {
    
    return YES;
}

// inputView背景色设为透明是无效的
- (UIPickerView *)inputView {

    if (_inputView == nil) {
        
        self.m_yearArray  = [NSMutableArray arrayWithArray:@[@"2014年",@"2015年"]];
        self.m_monthArray = [NSMutableArray arrayWithArray:@[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月",@"8月",@"9月",@"10月",@"11月",@"12月"]];
        
        self.m_yearStr  = self.m_yearArray[0];
        self.m_monthStr = self.m_monthArray[0];
        
        UIPickerView *pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, SCREEN_HEIGHT - 200, SCREEN_WIDTH, 200)];
        pickerView.dataSource = self;
        pickerView.delegate   = self;
        
        return pickerView;
    }
    
    return _inputView;
}

//  inputAccessoryView 是 UIView即可,不一定非得是UIToolbar
- (UIToolbar*)inputAccessoryView {

    if (_inputAccessoryView == nil) {
        
        UIToolbar * toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)];
        
        UIBarButtonItem * item = [[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(btnResignFirstResponder)];
        toolBar.items = @[item];
        
        return toolBar;
    }
    
    return _inputAccessoryView;
}

- (void)btnResignFirstResponder {

    [self resignFirstResponder];
}

#pragma mark - UIPickerViewDataSource
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    
    return 2;
}


- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    
    if (component == 0) {
        
        return self.m_yearArray.count;
        
    } else {
        
        return self.m_monthArray.count;
    }
}

#pragma mark - UIPickerViewDelegate
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    
    return SCREEN_WIDTH/2.0;
}
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component __TVOS_PROHIBITED {
    
    return 40;
}


- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    
    if (component == 0) {
        
        return self.m_yearArray[row];
        
    } else {
        
        return self.m_monthArray[row];
    }
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    
    if (component == 0) {
        
        self.m_yearStr = self.m_yearArray[row];
        
    } else {
    
        self.m_monthStr = self.m_monthArray[row];
    }
    
    [self setTitle:[NSString stringWithFormat:@"%@  %@",self.m_yearStr,self.m_monthStr] forState:UIControlStateNormal];
}

@end

SecondViewController.m

#import "SecondViewController.h"
#import "ButtonWithPickerView.h"

#define SCREEN_WIDTH  ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

@interface SecondViewController ()

@end

@implementation SecondViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    self.title = @"Button调出PickerView";

    self.view.backgroundColor = [UIColor whiteColor];
    
    ButtonWithPickerView *btn = [ButtonWithPickerView buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:btn];
    
    btn.frame           = CGRectMake(0, 0, 300, 40);
    btn.center          = self.view.center;
    btn.backgroundColor = [UIColor purpleColor];
    [btn setTitle:@"PickView" forState:UIControlStateNormal];
    [btn addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside];
}

- (void)btnAction:(UIButton*)sender {

    [sender becomeFirstResponder];
}

@end

封装到控制器层源码

LabelWithPickView.h

#import <UIKit/UIKit.h>

@interface LabelWithPickView : UILabel

// 将UIResponder的这两个readonly属性变为readwrite
@property (nonatomic,strong,readwrite) __kindof UIView * inputView;
@property (nonatomic,strong,readwrite) __kindof UIView * inputAccessoryView;

@end

LabelWithPickView.m


#import "LabelWithPickView.h"

#define SCREEN_WIDTH  ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

@implementation LabelWithPickView

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {
        
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction)];
        [self addGestureRecognizer:tap];
    }
    
    return self;
}

- (void)tapAction {

    [self becomeFirstResponder];
}

// 这个方法必须实现
- (BOOL) canBecomeFirstResponder {
    
    return YES;
}

@end

ThirdViewController.m

#import "ThirdViewController.h"
#import "LabelWithPickView.h"

#define SCREEN_WIDTH  ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

@interface ThirdViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>

@property (nonatomic, strong) NSMutableArray    *m_yearArray;
@property (nonatomic, strong) NSMutableArray    *m_monthArray;
@property (nonatomic, strong) LabelWithPickView *m_label;

@end

@implementation ThirdViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    self.title = @"Label调出PickerView";
    
    self.view.backgroundColor = [UIColor orangeColor];
    
    self.m_yearArray  = [NSMutableArray arrayWithArray:@[@"2014年",@"2015年"]];
    self.m_monthArray = [NSMutableArray arrayWithArray:@[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月",@"8月",@"9月",@"10月",@"11月",@"12月"]];

    UIPickerView *pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 200)];
    pickerView.dataSource = self;
    pickerView.delegate   = self;
    pickerView.backgroundColor = [UIColor redColor];
    
    UIToolbar * toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)];
    
    UIBarButtonItem * item = [[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(toolBarItemAction)];
    toolBar.items = @[item];
    
    self.m_label = [[LabelWithPickView alloc]initWithFrame:CGRectMake((SCREEN_WIDTH - 300)/2.0, 100, 300, 40)];
    [self.view addSubview:self.m_label];
    
    self.m_label.userInteractionEnabled = YES;
    self.m_label.backgroundColor        = [UIColor redColor];
    self.m_label.text                   = @"Tap Me";
    self.m_label.textAlignment          = NSTextAlignmentCenter;

    // inputView背景色设为透明是无效的
    self.m_label.inputView              = pickerView;
    
    //  inputAccessoryView 是 UIView即可,不一定非得是UIToolbar
    self.m_label.inputAccessoryView     = toolBar;
    
    
    self.m_label.inputView.backgroundColor = [UIColor clearColor];
}

- (void)toolBarItemAction {

    [self.m_label resignFirstResponder];
    
    UIPickerView *pickerView = self.m_label.inputView;
    
    NSInteger year  = [pickerView selectedRowInComponent:0];
    NSInteger month = [pickerView selectedRowInComponent:1];
    
    NSString *yearStr  = self.m_yearArray[year];
    NSString *monthStr = self.m_monthArray[month];
    
    self.m_label.text = [NSString stringWithFormat:@"%@  %@",yearStr,monthStr];
}

#pragma mark - UIPickerViewDataSource
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    
    return 2;
}


- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    
    if (component == 0) {
        
        return self.m_yearArray.count;
        
    } else {
        
        return self.m_monthArray.count;
    }
}

#pragma mark - UIPickerViewDelegate
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    
    return self.view.frame.size.width/2.0;
}
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component __TVOS_PROHIBITED {
    
    return 40;
}


- (nullable NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    
    if (component == 0) {
        
        return self.m_yearArray[row];
        
    } else {
        
        return self.m_monthArray[row];
    }
}

@end

下载源码

下载地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,376评论 6赞 491
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,126评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,966评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,432评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,519评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,792评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,933评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,701评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,143评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,292评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,896评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2赞 348

推荐阅读更多精彩内容

  • iOS WebSocket长链接（Swift）
    WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,796评论 8赞 183
  • iOS面试题300+
    *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,131评论 30赞 470
  • 0414晨读感悟
    1.当我们在刚开始上班，工作或者学习的时候，刚开始的状态都是极好的，所以我们应该首先把自己认为最难，最需要做的事情...
    溫暖的黃小廚阅读 161评论 4赞 3
  • 桂与枣
    风再烈，也会过； 夏再热，也有秋。 恍然间，桂花又开了，眼下最多的是灿灿的金桂；虽小，数量却多，繁星样地点缀在郁郁...
    风言无语阅读 413评论 10赞 41
  • 爱的发声练习
    从前听说有人可以用双脚丈量这片无垠的土地。我不敢嗤之以鼻，却总也有些懵懂不及。我是个怪人，对一切未知亦或已知却不敢...
    想要推翻世界的张小野阅读 232评论 0赞 0