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

2020-01-18 19:36:18于海丽


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

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

第二步:实现自定义view

    1.创建类YLSOPickerView

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


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

    3.接下来的就是最主要的工作,就是.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]

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


@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方法和创建方法


//快速创建
+ (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上移着添加进屏幕。这样会有好看点效果

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


-(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];
}