个人中心
gpt4 book ai didi

iOS中自定义弹出pickerView效果(DEMO)

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章iOS中自定义弹出pickerView效果(DEMO)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

 UIPickerView平常用的地方好像也不是很多，顶多就是一些需要选择的地方，这次项目需要这一个功能，我就单独写了一个简单的demo，效果图如下:

新增主页面弹出view，在主页面添加的代码 。

有个小问题就是第四个直接添加在主页弹出来的view好像被导航栏给覆盖了，我还没去研究，就着急的先吧功能写了。大家谅解下 。

iOS中自定义弹出pickerView效果(DEMO)

最初版本 。

iOS中自定义弹出pickerView效果(DEMO)

    话说我终于弄了gif了，再也不要去截图每张图都发一遍了！！ 。

    这个demo呢，等于是可以拿来直接用的第三方了吧，只需要传数据就可以了，弹出的三个框显示的数据也不一样，我的封装能力不行，所以都是单独写了，在这里呢，我先把链接发上，大家要是没有耐心的其实可以直接看demo，下载了，看下代码基本上就会了。YLSPicker.

    实现的基本思路呢，其实也挺简单的。我这里就说下我实现的过程，然后贴上代码片段，大家可以看一下.

第一步：主页面的设置 。

    这里其实也没啥好说的，页面上三个不能输入的三个文本框，然后点击会弹出东西来.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//宏定义
#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数组
  NSArray *placeholderArr = @[@ "Picker OneVlaue" ,@ "Picker TwoVlaue" ,@ "Picker ThreeVlaue" ];
  //循环添加文本框
  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;
   }
  }
}

    很多像我这样的新手，对textfiled的代理都不是很清楚，像我这个点击文本框不进行编辑，然后还能弹出自定义view的事件应该在哪里实现呢，答案就是在 。

?
1
2
//点击文本框时触发的事件
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField;

就这样，主页面算是勾画好了。接下来就是自定义view的部分了.

第二步：实现自定义view 。

    1.创建类YLSOPickerView 。

    2.在.h文件中声明变量，一个是需要传入的数组，一个是弹出框的标题。还要声明两个方法:

?
1
2
3
4
5
6
7
8
9
10
@interface YLSOPickerView : UIView
/** array */
@property (nonatomic,strong) NSArray *array;
/** title */
@property (nonatomic,strong) NSString *title;
//快速创建
+(instancetype)pickerView;
//弹出
-( void )show;
@end

    3.接下来的就是最主要的工作，就是.m文件的编写 。

宏定义 。

?
1
2
3
4
5
6
#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]

声明需要用到的控件，遵守响应的协议 。

?
1
2
3
4
5
6
7
8
9
10
@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

实现init方法和创建方法 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//快速创建
+ (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;
}

    这里呢我要说一下的是，为了达到在点击文本框从下弹出的一个动态效果，所以起初的时候我将整个view的长度设置成了一个屏幕的长度加上选择器的长度，在弹出方法中我将整个view上移着添加进屏幕。这样会有好看点效果 。

添加页面控件，设置样式位置等 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
-( 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上面的两个角做成圆角。不喜欢的可以注掉
  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的左上和右上两个角设置成了圆角也就是为了好看点，其实没啥区别，用的时候可以根据自己的需求来注释掉啥的.

实现pickerView的协议方法 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<UIPickerViewDelegate,UIPickerViewDataSource>
// 返回选择器有几列.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
  return 1 ;
}
// 返回每组有几行
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
  return [self.array count];
}
#pragma mark - 代理
// 返回第component列第row行的内容（标题）
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
  return self.array[row];
}
// 选中第component第row的时候调用
- ( void )pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
  self.result = self.array[row];
}

先现实show方法，然后实现点击按钮Done的推出方法 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//弹出
- ( void )show
{
  [self showInView:[UIApplication sharedApplication].keyWindow];
}
//添加弹出移除的动画效果
- ( void )showInView:(UIView *)view
{
  // 浮现
  [UIView animateWithDuration: 0.5 animations:^{
   CGPoint point = self.center;
   point.y -= 250 ;
   self.center = point;
  } completion:^(BOOL finished) {
  }];
  [view addSubview:self];
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-( 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];
  }];
}

    在这里呢，需要注意的是，假设你没有点击，没有滑动的话，self.result是空值，所以需要你判断下，若为空，传入数组第一个数据，不为空的话就直接传递了，另外我用的是通知传值，因为block传值我还没有去学习了解，所以这里就用上我会的一个通知传值，但是我有个小问题，希望看到的人回答下我，通知一般在什么时候移除比较好呢？?

第三步：主页实现点击出现的方法，并且接收回传的值.

主页面引入头文件#import “YLSOPickerView.h” 。

实现点击弹出的事件 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
#pragma mark - UITextFieldDelegate
//点击文本框时触发的事件，唤起跳出视图
- (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方法中接收通知，实现通知方法 。

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

这样一来，一个简单的挑选单个数据的自定义选择器就算是大功告成了，使用起来有些许不方法，大家如果使用的话可以自己修改修改，此外要是有什么好的改进方法，大家也可以教教我，一起学习学习 。

Others 。

    在另外两个文本框点击出现的选择器本质上还是与上面写的一样，只是第二个数有联动效果的，第一组数据滑动的时候，第二组数据也跟着换，那我在写的时候传入的数据是字典形式的，然后另外设置两个数组将字典里的数据接收了，当然，开始就传数组形式的数据也可以，只需要在协议方法里面修改响应的代码就可以了。其他没什么变化.

传值的时候 。

    第三个文本框也同样与前两个本质上行没有啥区别，只是在上面多了一个随机按钮，随机按钮点击事件实现也挺简单的 。

?
1
2
3
4
5
6
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];
?
1
2
3
4
5
6
7
8
9
10
11
12
13
-( void )random:(UIPickerView *)picker
{
  for ( int i = 0 ; i < 3 ; i++)
  {
   // 取出第i列的行数
   NSInteger count = [self.array[i] count];
   int random = arc4random_uniform((u_int32_t)count);
   //不会触发代理的选中方法
   [self.pickerView selectRow:random inComponent:i animated:YES];
   //label数据刷新
   [self pickerView:picker didSelectRow:random inComponent:i];
  }
}

以上所述是小编给大家介绍的iOS中自定义简单弹出pickerView(DEMO)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我网站的支持！ 。

原文链接：http://blog.csdn.net/sinat_31511831/article/details/54377898 。

最后此篇关于iOS中自定义弹出pickerView效果(DEMO)的文章就讲到这里了,如果你想了解更多关于iOS中自定义弹出pickerView效果(DEMO)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： Docker容器固定IP分配详解
文章推荐： VMware下CentOS6.4网卡设置为桥接模式静态IP配置方法详解
文章推荐： VMware 10 中为CentOS 7添加多网卡并重命名
文章推荐： Docker 教程之数据管理详细介绍
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com