UIPickerView初識

在之前沒有使用過UIPickerView,最近有個項目需要寫一個日期選擇器和性別選擇器,查閱了資料,大多數(shù)都是用UIPickerView來完成效果,于是就找了一個日期選擇器的demo,效果如下:

感覺效果還行,于是在寫性別選擇器的時候,自己也封裝了一個,需要用的時候稍微修改一下就ok了,效果如下:

使用時需要#import "ZGSexPickerView.h"和遵循協(xié)議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];
}

//返回列數(shù)
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}
//每列行數(shù)
-(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 {
    
    //數(shù)據(jù)源數(shù)組
    //類型自行處理,此處暫定為可變數(shù)組
    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協(xié)議
extension ZGJPickerView:UIPickerViewDataSource,UIPickerViewDelegate{
    //返回列數(shù)
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }
    //返回行數(shù)
    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]...
    }
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容