iOS中自定義彈出pickerView效果(DEMO)

更新時(shí)間：2017年01月12日 15:35:32 作者：點(diǎn)柈

這篇文章主要介紹了iOS中自定義簡(jiǎn)單彈出pickerView(DEMO)的實(shí)例代碼,需要的朋友可以參考下

UIPickerView平常用的地方好像也不是很多，頂多就是一些需要選擇的地方，這次項(xiàng)目需要這一個(gè)功能，我就單獨(dú)寫了一個(gè)簡(jiǎn)單的demo，效果圖如下：

新增主頁(yè)面彈出view，在主頁(yè)面添加的代碼

有個(gè)小問(wèn)題就是第四個(gè)直接添加在主頁(yè)彈出來(lái)的view好像被導(dǎo)航欄給覆蓋了，我還沒(méi)去研究，就著急的先吧功能寫了。大家諒解下

9月-03-2016 17-49-51.gif

最初版本

話說(shuō)我終于弄了gif了，再也不要去截圖每張圖都發(fā)一遍了??！

這個(gè)demo呢，等于是可以拿來(lái)直接用的第三方了吧，只需要傳數(shù)據(jù)就可以了，彈出的三個(gè)框顯示的數(shù)據(jù)也不一樣，我的封裝能力不行，所以都是單獨(dú)寫了，在這里呢，我先把鏈接發(fā)上，大家要是沒(méi)有耐心的其實(shí)可以直接看demo，下載了，看下代碼基本上就會(huì)了。YLSPicker。

實(shí)現(xiàn)的基本思路呢，其實(shí)也挺簡(jiǎn)單的。我這里就說(shuō)下我實(shí)現(xiàn)的過(guò)程，然后貼上代碼片段，大家可以看一下。

第一步：主頁(yè)面的設(shè)置

這里其實(shí)也沒(méi)啥好說(shuō)的，頁(yè)面上三個(gè)不能輸入的三個(gè)文本框，然后點(diǎn)擊會(huì)彈出東西來(lái)。

//宏定義
#define YLSRect(x, y, w, h) CGRectMake([UIScreen mainScreen].bounds.size.width * x, [UIScreen mainScreen].bounds.size.height * y, [UIScreen mainScreen].bounds.size.width * w, [UIScreen mainScreen].bounds.size.height * h)
@interface ViewController ()<UITextFieldDelegate>
//聲明
/** text1 */
@property (nonatomic,strong) UITextField *text1;
/** text2 */
@property (nonatomic,strong) UITextField *text2;
/** text3 */
@property (nonatomic,strong) UITextField *text3;
@end
 - (void)viewDidLoad {
 [super viewDidLoad];
 self.title = @"Picker";
 //placeholder數(shù)組
 NSArray *placeholderArr = @[@"Picker OneVlaue",@"Picker TwoVlaue",@"Picker ThreeVlaue"];
 //循環(huán)添加文本框
 for (int i = 0; i < 3; i ++)
 {
  UITextField *text = [[UITextField alloc]initWithFrame:YLSRect(100/375, (140 + i * 60)/667, 175/375, 30/667)];
  text.borderStyle = UITextBorderStyleRoundedRect;
  text.backgroundColor = [UIColor lightGrayColor];
  text.tag = i + 1000;
  text.placeholder = placeholderArr[i];
  text.delegate = self;
  [self.view addSubview:text];
  if(text.tag == 1000)
  {
   self.text1 = text;
  }else if(text.tag == 1001)
  {
   self.text2 = text;
  }else
  {
   self.text3 = text;
  }
 } 
}

很多像我這樣的新手，對(duì)textfiled的代理都不是很清楚，像我這個(gè)點(diǎn)擊文本框不進(jìn)行編輯，然后還能彈出自定義view的事件應(yīng)該在哪里實(shí)現(xiàn)呢，答案就是在

//點(diǎn)擊文本框時(shí)觸發(fā)的事件
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField;

就這樣，主頁(yè)面算是勾畫好了。接下來(lái)就是自定義view的部分了。

第二步：實(shí)現(xiàn)自定義view

1.創(chuàng)建類YLSOPickerView

2.在.h文件中聲明變量，一個(gè)是需要傳入的數(shù)組，一個(gè)是彈出框的標(biāo)題。還要聲明兩個(gè)方法：

@interface YLSOPickerView : UIView
/** array */
@property (nonatomic,strong) NSArray *array;
/** title */
@property (nonatomic,strong) NSString *title;
//快速創(chuàng)建
+(instancetype)pickerView;
//彈出
-(void)show;
@end

3.接下來(lái)的就是最主要的工作，就是.m文件的編寫

宏定義

#define YLSRect(x, y, w, h) CGRectMake([UIScreen mainScreen].bounds.size.width * x, [UIScreen mainScreen].bounds.size.height * y, [UIScreen mainScreen].bounds.size.width * w, [UIScreen mainScreen].bounds.size.height * h)
#define YLSFont(f) [UIFont systemFontOfSize:[UIScreen mainScreen].bounds.size.width * f]
#define YLSColorAlpha(r,g,b,a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:(a)]
#define YLSMainBackColor [UIColor colorWithRed:240/255.0 green:239/255.0 blue:245/255.0 alpha:1]
#define BlueColor [UIColor colorWithRed:0/255.0 green:122/255.0 blue:255/255.0 alpha:1]
#define ClearColor [UIColor clearColor]

聲明需要用到的控件，遵守響應(yīng)的協(xié)議

@interface YLSOPickerView()<UIPickerViewDelegate,UIPickerViewDataSource>
/** view */
@property (nonatomic,strong) UIView *topView;
/** button */
@property (nonatomic,strong) UIButton *doneBtn;
/** pickerView */
@property (nonatomic,strong) UIPickerView *pickerView;
/** 選擇傳回的值 */
@property (nonatomic,strong) NSString *result;
@end

實(shí)現(xiàn)init方法和創(chuàng)建方法

//快速創(chuàng)建
+ (instancetype)pickerView
{
 return [[self alloc]init];
}
-(instancetype)initWithFrame:(CGRect)frame
{
 self = [super initWithFrame:YLSRect(0, 0, 1, 917/667)];
 if (self)
 {
  self.backgroundColor = YLSColorAlpha(0, 0, 0, 0.4); 
 }
 return self;
}

這里呢我要說(shuō)一下的是，為了達(dá)到在點(diǎn)擊文本框從下彈出的一個(gè)動(dòng)態(tài)效果，所以起初的時(shí)候我將整個(gè)view的長(zhǎng)度設(shè)置成了一個(gè)屏幕的長(zhǎng)度加上選擇器的長(zhǎng)度，在彈出方法中我將整個(gè)view上移著添加進(jìn)屏幕。這樣會(huì)有好看點(diǎn)效果

添加頁(yè)面控件，設(shè)置樣式位置等

-(void)layoutSubviews
{
 [super layoutSubviews];
 self.topView = [[UIView alloc]initWithFrame:YLSRect(0, 667/667, 1, 250/667)];
 self.topView.backgroundColor = [UIColor whiteColor];
 [self addSubview:self.topView];
 //為view上面的兩個(gè)角做成圓角。不喜歡的可以注掉
 UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.topView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(5, 5)];
 CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
 maskLayer.frame = self.topView.bounds;
 maskLayer.path = maskPath.CGPath;
 self.topView.layer.mask = maskLayer;
 self.doneBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 [self.doneBtn setTitle:@"Done" forState:UIControlStateNormal];
 [self.doneBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
 [self.doneBtn setFrame:YLSRect(320/375, 5/667, 50/375, 40/667)];
 [self.doneBtn addTarget:self action:@selector(quit) forControlEvents:UIControlEventTouchUpInside];
 [self.topView addSubview:self.doneBtn];
 UILabel *titlelb = [[UILabel alloc]initWithFrame:YLSRect(100/375, 0, 175/375, 50/667)];
 titlelb.backgroundColor = ClearColor;
 titlelb.textAlignment = NSTextAlignmentCenter;
 titlelb.text = self.title;
 titlelb.font = YLSFont(20/375);
 [self.topView addSubview:titlelb];
 self.pickerView = [[UIPickerView alloc]init];
 [self.pickerView setFrame:YLSRect(0, 50/667, 1, 200/667)];
 [self.pickerView setBackgroundColor:YLSMainBackColor];
 [self.pickerView setDelegate:self];
 [self.pickerView setDataSource:self];
 [self.pickerView selectRow:0 inComponent:0 animated:YES];
 [self.topView addSubview:self.pickerView];
}

同樣，在這里我把topview的左上和右上兩個(gè)角設(shè)置成了圓角也就是為了好看點(diǎn)，其實(shí)沒(méi)啥區(qū)別，用的時(shí)候可以根據(jù)自己的需求來(lái)注釋掉啥的。

實(shí)現(xiàn)pickerView的協(xié)議方法

<UIPickerViewDelegate,UIPickerViewDataSource>
// 返回選擇器有幾列.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
 return 1;
}
// 返回每組有幾行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
 return [self.array count];
}
#pragma mark - 代理
// 返回第component列第row行的內(nèi)容（標(biāo)題）
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
 return self.array[row];
}
// 選中第component第row的時(shí)候調(diào)用
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
 self.result = self.array[row];
}

先現(xiàn)實(shí)show方法，然后實(shí)現(xiàn)點(diǎn)擊按鈕Done的推出方法

//彈出
- (void)show
{
 [self showInView:[UIApplication sharedApplication].keyWindow];
}
//添加彈出移除的動(dòng)畫效果
- (void)showInView:(UIView *)view
{
 // 浮現(xiàn)
 [UIView animateWithDuration:0.5 animations:^{
  CGPoint point = self.center;
  point.y -= 250;
  self.center = point;
 } completion:^(BOOL finished) { 
 }];
 [view addSubview:self];
}

-(void)quit
{
 [UIView animateWithDuration:0.5 animations:^{
  self.alpha = 0;
  CGPoint point = self.center;
  point.y += 250;
  self.center = point;
 } completion:^(BOOL finished) {
  if (!self.result) {
   self.result = self.array[0];
  }
  NSLog(@"%@",self.result);
  [[NSNotificationCenter defaultCenter]postNotificationName:@"value" object:self.result];
  [self removeFromSuperview];
 }];
}

在這里呢，需要注意的是，假設(shè)你沒(méi)有點(diǎn)擊，沒(méi)有滑動(dòng)的話，self.result是空值，所以需要你判斷下，若為空，傳入數(shù)組第一個(gè)數(shù)據(jù)，不為空的話就直接傳遞了，另外我用的是通知傳值，因?yàn)閎lock傳值我還沒(méi)有去學(xué)習(xí)了解，所以這里就用上我會(huì)的一個(gè)通知傳值，但是我有個(gè)小問(wèn)題，希望看到的人回答下我，通知一般在什么時(shí)候移除比較好呢？？

第三步：主頁(yè)實(shí)現(xiàn)點(diǎn)擊出現(xiàn)的方法，并且接收回傳的值。

主頁(yè)面引入頭文件#import “YLSOPickerView.h”

實(shí)現(xiàn)點(diǎn)擊彈出的事件

#pragma mark - UITextFieldDelegate
//點(diǎn)擊文本框時(shí)觸發(fā)的事件，喚起跳出視圖
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
 if(textField.tag == 1000)
 {
  YLSOPickerView *picker = [[YLSOPickerView alloc]init];
  picker.array = @[@"iPhone4",@"iPhone4S",@"iPhone5",@"iPhone5S",@"iPhone5C",@"iPhone6",@"iPhone6Plus",@"iPhone6S",@"iPhone6SPlus"];
  picker.title = @"pick number";
  [picker show];
 }
 return NO;
}

在- (void)viewDidLoad方法中接收通知，實(shí)現(xiàn)通知方法

[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(getValue:) name:@"value" object:nil];
-(void)getValue:(NSNotification *)notification
{
 self.text1.text = notification.object;
}

這樣一來(lái)，一個(gè)簡(jiǎn)單的挑選單個(gè)數(shù)據(jù)的自定義選擇器就算是大功告成了，使用起來(lái)有些許不方法，大家如果使用的話可以自己修改修改，此外要是有什么好的改進(jìn)方法，大家也可以教教我，一起學(xué)習(xí)學(xué)習(xí)

Others

在另外兩個(gè)文本框點(diǎn)擊出現(xiàn)的選擇器本質(zhì)上還是與上面寫的一樣，只是第二個(gè)數(shù)有聯(lián)動(dòng)效果的，第一組數(shù)據(jù)滑動(dòng)的時(shí)候，第二組數(shù)據(jù)也跟著換，那我在寫的時(shí)候傳入的數(shù)據(jù)是字典形式的，然后另外設(shè)置兩個(gè)數(shù)組將字典里的數(shù)據(jù)接收了，當(dāng)然，開(kāi)始就傳數(shù)組形式的數(shù)據(jù)也可以，只需要在協(xié)議方法里面修改響應(yīng)的代碼就可以了。其他沒(méi)什么變化。

傳值的時(shí)候

第三個(gè)文本框也同樣與前兩個(gè)本質(zhì)上行沒(méi)有啥區(qū)別，只是在上面多了一個(gè)隨機(jī)按鈕，隨機(jī)按鈕點(diǎn)擊事件實(shí)現(xiàn)也挺簡(jiǎn)單的

self.ranBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 [self.ranBtn setTitle:@"Random" forState:UIControlStateNormal];
 [self.ranBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
 [self.ranBtn setFrame:YLSRect(5/375, 5/667, 100/375, 40/667)];
 [self.ranBtn addTarget:self action:@selector(random:) forControlEvents:UIControlEventTouchUpInside];
 [self.topView addSubview:self.ranBtn];

-(void)random:(UIPickerView *)picker
{
 for (int i = 0; i < 3; i++)
 {
  // 取出第i列的行數(shù)
  NSInteger count = [self.array[i] count];
  int random = arc4random_uniform((u_int32_t)count);
  //不會(huì)觸發(fā)代理的選中方法
  [self.pickerView selectRow:random inComponent:i animated:YES];
  //label數(shù)據(jù)刷新
  [self pickerView:picker didSelectRow:random inComponent:i];
 }
}

以上所述是小編給大家介紹的iOS中自定義簡(jiǎn)單彈出pickerView(DEMO)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: