美文网首页
UIPickerView初识

UIPickerView初识

作者: T92 | 来源:发表于2017-01-19 13:57 被阅读97次

    在之前没有使用过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]...
        }
    }
    

    相关文章

      网友评论

          本文标题:UIPickerView初识

          本文链接:https://www.haomeiwen.com/subject/wqjibttx.html