UIPickerView初识

在之前没有使用过UIPickerView，最近有个项目需要写一个日期选择器和性别选择器，查阅了资料，大多数都是用UIPickerView来完成效果，于是就找了一个日期选择器的demo，效果如下：

感觉效果还行，于是在写性别选择器的时候，自己也封装了一个，需要用的时候稍微修改一下就ok了，效果如下：

使用时需要#import "ZGSexPickerView.h"和遵循协议ZGSexPickerViewDelegate
代码：
//ZGSexPickerView.h

#import <UIKit/UIKit.h>

@class ZGSexPickerView;//向前引用
@protocol ZGSexPickerViewDelegate <NSObject>
@optional
/**
 返回选择的时间字符串
 
 @param pickerView pickerView
 @param sexString 性别字符串
 */
- (void)pickerView:(ZGSexPickerView *)pickerView didSelectSexString:(NSString *)sexString;

@end

@interface ZGSexPickerView : UIView

@property (nonatomic, weak) id<ZGSexPickerViewDelegate> delegate;

- (void)show;

@end

//ZGSexPickerView.m

#import "ZGSexPickerView.h"

@interface ZGSexPickerView () <UIPickerViewDataSource,UIPickerViewDelegate>

@property (nonatomic, strong) NSArray *sexArray;
@property (nonatomic, strong) UIToolbar *toolBar;
@property (nonatomic, strong) UIPickerView *pickerView;
@property (nonatomic, strong) NSString *sex;
@property (nonatomic, strong) UIView *screenView;

@end

@implementation ZGSexPickerView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        [self initializeUserInterface];
    }
    return self;
}

#pragma mark - 初始化界面
- (void)initializeUserInterface {
    
    self.sexArray = @[@"保密",@"男",@"女"];
    self.sex = @"保密";
    
    //pickerView
    //初始化一个PickerView
    _pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 44, kScreenWidth, self.frame.size.height)];
    //指定Picker的代理
    _pickerView.backgroundColor = [UIColor whiteColor];
    _pickerView.dataSource = self;
    _pickerView.delegate = self;
    //是否要显示选中的指示器(默认值是NO)
    _pickerView.showsSelectionIndicator = NO;
    [self addSubview:self.pickerView];
    
    //toolBar
    _toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 44)];
    _toolBar.barStyle = UIBarStyleBlackTranslucent;
    // 设置UIToolbar背景色
    _toolBar.barTintColor = [UIColor colorWithRed:239.0/255.0
                                            green:239.0/255.0
                                             blue:244.0/255.0
                                            alpha:1.0];
    // 取消按钮
    UIBarButtonItem *leftItem = [[UIBarButtonItem alloc] initWithTitle:@"   取消"
                                                                 style:UIBarButtonItemStylePlain
                                                                target:self
                                                                action:@selector(removePickView)];
    
    [leftItem setTitleTextAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:14]}
                            forState:UIControlStateNormal];
    [leftItem setTintColor:[UIColor grayColor]];
    
    UIBarButtonItem *centerSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
    // 确定按钮
    UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithTitle:@"确定   "
                                                                  style:UIBarButtonItemStyleDone
                                                                 target:self
                                                                 action:@selector(doneBtnClicked)];
    [rightItem setTitleTextAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:14]}
                             forState:UIControlStateNormal];
    // 设置字体颜色
    //[rightItem setTintColor:[UIColor colorWithRed:67.0/255.0 green:199.0/255.0 blue:203.0/255.0 alpha:1.0]];
    
    _toolBar.items = @[leftItem,centerSpace,rightItem];
    [self addSubview:self.toolBar];
}

/**
 移除PickerView
 */
- (void)removePickView
{
    [self.screenView removeFromSuperview];
}
/**
 确定
 */
- (void)doneBtnClicked
{
    [self.delegate pickerView:self didSelectSexString:self.sex];
    [self removePickView];
}
- (void)show
{
    _screenView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeigth)];
    _screenView.backgroundColor = [UIColor colorWithRed:0/255.0
                                                  green:0/255.0
                                                   blue:0/255.0
                                                  alpha:0.3];
    
    [_screenView addSubview:self];
    
    [[UIApplication sharedApplication].keyWindow addSubview:_screenView];
}

- (void)layoutSubviews {
    [super layoutSubviews];
}

//返回列数
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}
//每列行数
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return self.sexArray.count;
}
//组件宽度
-(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    return kScreenWidth;
}
//每行组件高度
-(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
    return 40;
}
//组件每行的标题
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return self.sexArray[row];
}
//选中行的事件处理
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    self.sex = self.sexArray[row];
//    [pickerView selectedRowInComponent:0];
}

#pragma mark - Action



#pragma mark - 懒加载


@end

使用方法

-(void)showSexpickerView{
    ZGSexPickerView *pickerView = [[ZGSexPickerView alloc] initWithFrame:(CGRectMake(0, kScreenHeigth - 216, kScreenWidth, 216))];
    pickerView.delegate = self;
    [pickerView show];
}
-(void)pickerView:(ZGSexPickerView *)pickerView didSelectSexString:(NSString *)sexString{
    NSLog(@"选择性别:%@",sexString);
}

新增Swift版：

import UIKit

class ZGJPickerView: UIView {
    
    //数据源数组
    //类型自行处理,此处暂定为可变数组
    var dataArray: NSMutableArray = {
       return NSMutableArray()
    }()
    
    //默认选中的字符
    var currentStr = ""
    
    private var screenView = UIView()
    
    override func drawRect(rect: CGRect) {
 
        self.creatUI()
    }
 
}

//MARK: -　界面
extension ZGJPickerView{
    
    func creatUI(){
        
        //pickerView
        let pickerView = UIPickerView(frame: CGRectMake(0, 44, kScreen_W, self.frame.size.height))
        pickerView.backgroundColor = UIColor.whiteColor()
        pickerView.dataSource = self
        pickerView.delegate = self
        //是否要显示选中的指示器(默认值是NO)
        pickerView.showsSelectionIndicator = false
        self.addSubview(pickerView)
        
        //toolBar
        let toolBar = UIToolbar(frame: CGRectMake(0, 0, kScreen_W, 44))
        toolBar.barStyle = UIBarStyle.BlackTranslucent
        // 设置UIToolbar背景色
        toolBar.barTintColor = UIColor(red: 239.0/255.0, green: 239.0/255.0, blue: 244.0/255.0, alpha: 1.0)
        // 取消按钮
        let leftItem = UIBarButtonItem(title: "  取消", style: UIBarButtonItemStyle.Plain, target: self, action: #selector(ZGJPickerView.removePickView))
        leftItem.setTitleTextAttributes([NSFontAttributeName:UIFont.systemFontOfSize(17)], forState: .Normal)
        leftItem.tintColor = UIColor.grayColor()
        let centerSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: self, action: nil)

        // 确定按钮
        let rightItem = UIBarButtonItem(title: "确定  ", style: UIBarButtonItemStyle.Done, target: self, action: #selector(ZGJPickerView.doneBtnClicked))
        rightItem.setTitleTextAttributes([NSFontAttributeName:UIFont.systemFontOfSize(17)], forState: .Normal)
        
        toolBar.items = [leftItem,centerSpace,rightItem]
        self.addSubview(toolBar)
        
        
    }
}

//MARK: - 点击事件
extension ZGJPickerView{
    
    func removePickView(){
        self.screenView.removeFromSuperview()
    }
    
    func doneBtnClicked()
    {
        //做什么自行处理
        self.removePickView()
    }
    
    func show(){
        screenView.frame = CGRectMake(0, 0, kScreen_W, kScreen_H)
        screenView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3)
        screenView.addSubview(self)
        UIApplication.sharedApplication().keyWindow?.addSubview(screenView)
    }
}

//MARK: UIPickerView协议
extension ZGJPickerView:UIPickerViewDataSource,UIPickerViewDelegate{
    //返回列数
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }
    //返回行数
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return 5//dataArray.count
    }
    
    //组件宽度
    func pickerView(pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {
        return kScreen_W
    }
    //每行组件高度
    func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 40
    }
    //组件每行的标题
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return "标题"
    }
    //选中行的事件处理
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        //row:列 component:组
        //自行处理,如dataArray[row]...
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,684评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,143评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,214评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,788评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,796评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,665评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,027评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,679评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,346评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1赞 331
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,412评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,015评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2赞 343

推荐阅读更多精彩内容