iOS两款你可能会用到的弹出框

前言

好久没写博客了……最近拿到了一版原型图&＃xff0c;各种弹框&＃xff0c;简直快把老爷给弹死了……因为实现功能是其次的&＃xff0c;最主要还得把这些东西给封装一下&＃xff0c;方便同事的调用。于是乎&＃xff0c;我就开始了爬坑的过程。经过两天的耕耘&＃xff0c;出了两款风格迥异的弹框&＃xff0c;这里给大家分享一下。。。同时也祭奠一下&＃xff0c;我老去的容颜……

效果图

底部PickerView弹框&＃xff08;这个东西还是蛮常见的&＃xff09;

view.gif

中间TextView弹框&＃xff08;这个东西真不常见&＃xff0c;Alert支持的是单行输入&＃xff0c;也就是textField&＃xff09;

vie.gif

底部PickerView弹框&＃xff08;LHEditPickerView&＃xff09;

首先生成了一个LHEditPickView这个就是大家看到的那个弹出框的实体view
代码如下&＃xff1a;
LHEditPickView.h

#import &＃64;interface LHEditPickView : UIView/*** 背景图&＃xff08;半透明全屏&＃xff09;*/
&＃64;property (nonatomic,weak)UIView *blackBgView;/*** 下部弹出框的ToolBar*/
&＃64;property (nonatomic,weak)UIToolbar *toolBarView;/*** 弹出框主题背景*/
&＃64;property (nonatomic,weak)UIView *mainBgView;/*** 部门选择PickView*/
&＃64;property (nonatomic,weak)UIPickerView *pickerView;/*** 取消按钮*/&＃64;property (nonatomic,weak)UIButton *cancelBtn;/*** 确定按钮*/
&＃64;property (nonatomic,weak)UIButton *sureBtn;&＃64;property (nonatomic,strong)NSArray *data;&＃64;property (nonatomic,copy) void (^refreshUserInterface)(NSString *);&＃64;property (nonatomic,copy) void (^dropEditPickerView)();&＃64;end&＃39;


LHEditPickView.m

#import "LHEditPickView.h"&＃64;interface LHEditPickView()<UIPickerViewDelegate,UIPickerViewDataSource>{
//按钮的宽度
CGFloat _btnWidth;
NSString *_result;
}&＃64;end&＃64;implementation LHEditPickView-(instancetype)initWithFrame:(CGRect)frame{
self&＃61;[super initWithFrame:frame];
if(self){//主背景图UIView *mainBgView&＃61;[[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];self.mainBgView&＃61;mainBgView;mainBgView.backgroundColor&＃61;[UIColor whiteColor];[self addSubview:mainBgView];//ToolBarUIToolbar *toolView&＃61;[[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height/6)];[toolView setBackgroundImage:[UIImage imageNamed:&＃64;"daohangtiao"] forToolbarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];self.toolBarView&＃61;toolView;toolView.backgroundColor&＃61;[UIColor blueColor];[mainBgView addSubview:toolView];//取消&＃xff0c;确定按钮_btnWidth&＃61;100.0;UIButton *cancelbtn&＃61;[UIButton buttonWithType:UIButtonTypeCustom];cancelbtn.frame&＃61;CGRectMake(0, 0, _btnWidth, CGRectGetHeight(toolView.frame));[cancelbtn setTitle:&＃64;"取消" forState:UIControlStateNormal];[cancelbtn addTarget:self action:&＃64;selector(onclickCancel:) forControlEvents:UIControlEventTouchUpInside];self.cancelBtn&＃61;cancelbtn;[toolView addSubview:cancelbtn];_btnWidth&＃61;100.0;UIButton *sureBtn&＃61;[UIButton buttonWithType:UIButtonTypeCustom];sureBtn.frame&＃61;CGRectMake(frame.size.width-_btnWidth, 0, _btnWidth, CGRectGetHeight(toolView.frame));[sureBtn setTitle:&＃64;"确定" forState:UIControlStateNormal];self.sureBtn&＃61;sureBtn;[self.sureBtn addTarget:self action:&＃64;selector(onclickSure:) forControlEvents:UIControlEventTouchUpInside];[toolView addSubview:sureBtn];//UIPickerViewUIPickerView *picker&＃61;[[UIPickerView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(toolView.frame), frame.size.width, (frame.size.height/6)*5)];self.pickerView&＃61;picker;picker.showsSelectionIndicator&＃61;YES;picker.delegate&＃61;self;picker.dataSource&＃61;self;[mainBgView addSubview:picker];}
return self;
}//设置data并且设设置_result的初始值
-(void)setData:(NSArray *)data{
if(_data!&＃61;data){_data&＃61;data;_result&＃61;data[0];
}
//刷新所有元素
[self.pickerView reloadAllComponents];
}#pragma mark -ButtonClick-(void)onclickCancel:(id)sender{
if(self.dropEditPickerView){self.dropEditPickerView();
}
}//确定按钮,block传值
-(void)onclickSure:(id)sender{
if(self.refreshUserInterface){self.refreshUserInterface(_result);
}
if(self.dropEditPickerView){self.dropEditPickerView();
}
}#pragma mark -PickerViewDelegate
//有多少行
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
return self.data.count;
}
//有多少列
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 1;
}//设置每一行的内容
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
return self.data[row];
}//设置选中结果
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
_result&＃61;self.data[row];
}&＃64;end


由于本人习惯于代码布局&＃xff0c;所以很low……呵呵哒
现在主体显示的部分已经有了&＃xff0c;现在就该操心怎么将它显示出来了&＃xff0c;于是我又创建了一个类——LHBottomPickerView&＃xff08;显示LHEditPickView)废话不多说&＃xff0c;上代码&＃xff1a;
LHBottomPickerView.h

#import #import "LHEditPickView.h"
&＃64;interface LHBottomPickerView : UIView
&＃64;property (nonatomic,weak)UIView *grayBgView;
&＃64;property (nonatomic,weak)LHEditPickView *editView;
&＃64;property (nonatomic,weak)UIViewController *controller;
&＃64;property (nonatomic,copy)void (^bottomResultPresent)(NSString *);
&＃64;property (nonatomic,strong)UITapGestureRecognizer *recognizer;&＃43;(instancetype)showWithController:(UIViewController *)controller andData:(NSArray *)data;
-(instancetype)initWithController:(UIViewController *)controller;&＃43;(void)showEditPickerViewWithController:(UIViewController *)controller andData:(NSArray *)data andBlock:(void (^)(NSString *temp))bottomResultPresent;&＃64;end


LHBottomPickerView.m

#import "LHBottomPickerView.h"
#import "AppDelegate.h"&＃64;interface LHBottomPickerView()<UIGestureRecognizerDelegate>&＃64;end&＃64;implementation LHBottomPickerView-(instancetype)initWithController:(UIViewController *)controller{
self&＃61;[super init];
if(self){//黑色半透明背景AppDelegate *app&＃61;(AppDelegate *)[UIApplication sharedApplication].delegate;UIView *grayBgView&＃61;[[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];grayBgView.backgroundColor&＃61;[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];[app.window.rootViewController.view addSubview:grayBgView];grayBgView.hidden&＃61;YES;self.grayBgView&＃61;grayBgView;//为grayBgView添加点击手势UITapGestureRecognizer *tapGestureRecognizer &＃61; [[UITapGestureRecognizer alloc] init];tapGestureRecognizer.numberOfTapsRequired &＃61; 1; // 设置单击几次才触发方法[self.grayBgView setUserInteractionEnabled:YES];tapGestureRecognizer.delegate&＃61;self;[tapGestureRecognizer addTarget:self action:&＃64;selector(popAndPushPickerView)]; // 添加点击手势的方法tapGestureRecognizer.cancelsTouchesInView &＃61; NO;[self.grayBgView addGestureRecognizer:tapGestureRecognizer];self.recognizer&＃61;tapGestureRecognizer;//LHEditPickerViewLHEditPickView *editView&＃61;[[LHEditPickView alloc]initWithFrame:CGRectMake(0, controller.view.bounds.size.height, controller.view.bounds.size.width, controller.view.bounds.size.height/5*2)];self.editView&＃61;editView;self.editView.refreshUserInterface&＃61;^(NSString * result){if(self.bottomResultPresent){self.bottomResultPresent(result);}};self.editView.dropEditPickerView&＃61;^(){[self popAndPushPickerView];};[self.grayBgView addSubview:editView];}
return self;
}&＃43;(instancetype)showWithController:(UIViewController *)controller andData:(NSArray *)data{
LHBottomPickerView *bottom&＃61;[[self alloc]initWithController:controller];
bottom.controller&＃61;controller;
bottom.editView.data&＃61;data;
[controller.view addSubview:bottom];
[bottom popAndPushPickerView];
return bottom;
}-(void)popAndPushPickerView{
if(self.grayBgView.hidden){[UIView animateWithDuration:0.5 animations:^{self.grayBgView.hidden&＃61;NO;self.editView.frame&＃61;CGRectMake(0, self.controller.view.bounds.size.height/5*3, self.controller.view.bounds.size.width, self.controller.view.bounds.size.height/5*2);}];[self.grayBgView setUserInteractionEnabled:YES];
}else{[UIView animateWithDuration:0.5 animations:^{self.editView.frame&＃61;CGRectMake(0, self.controller.view.bounds.size.height, self.controller.view.bounds.size.width, self.controller.view.bounds.size.height/5*2);} completion:^(BOOL finished) {[UIView animateWithDuration:0.5 animations:^{self.grayBgView.hidden&＃61;YES;}];}];}}-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
if ( [touch.view isKindOfClass:[UIButton class]])
{return NO;
}
//由于LHEdiPickView中的toolView也受到了手势的影响&＃xff0c;所以在这里将这这个ToolView屏蔽掉
if([touch.view isKindOfClass:[UIToolbar class]]){return NO;
}return YES;
}&＃43;(void)showEditPickerViewWithController:(UIViewController *)controller andData:(NSArray *)data andBlock:(void (^)(NSString *temp))bottomResultPresent{
LHBottomPickerView *bottom&＃61;[LHBottomPickerView showWithController:controller andData:data];
bottom.bottomResultPresent&＃61;bottomResultPresent;
}&＃64;end


下面就是最神奇的地方&＃xff0c;调用竟然会如此简单&＃xff0c;还是上代码&＃xff1a;
ViewController.h

#import "ViewController.h"
#import "LHBottomPickerView.h"
&＃64;interface ViewController ()
&＃64;property (nonatomic,weak)UIView *grayBgView;
&＃64;property (nonatomic,weak)LHEditPickView *editView;
&＃64;property (nonatomic,weak)UILabel *label;
&＃64;property (nonatomic,weak)UIButton *button;
&＃64;end&＃64;implementation ViewController- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button&＃61;[UIButton buttonWithType:UIButtonTypeCustom];
button.frame&＃61;CGRectMake(0, 0, 100, 100);
button.backgroundColor&＃61;[UIColor redColor];
[self.view addSubview:button];
self.button&＃61;button;
[button addTarget:self action:&＃64;selector(clickBtn) forControlEvents:UIControlEventTouchUpInside];}-(void)clickBtn{
//**看到没&＃xff0c;就是这么简单**
[LHBottomPickerView showEditPickerViewWithController:self andData:&＃64;[&＃64;"早晨",&＃64;"中午",&＃64;"下午"] andBlock:^(NSString *temp) {[self.button setTitle:temp forState:UIControlStateNormal];
}];}&＃64;end


总结一下知识点&＃xff1a;

• block使用&＃xff1a;block属性、block参数、block传递、block回调
• 手势冲突

弹出TextView弹框&＃xff08;LHPopTextView&＃xff09;

这个弹框&＃xff0c;当时写的时候就想去用AlertController或者AlertView,但是发现alertView和AlertController自带的是一个TextField,并且还是单行的&＃xff0c;显然满足不了我的需求&＃xff0c;真心不想自己写这一部分东西&＃xff0c;但是最后&＃xff0c;还是重写吧&＃xff0c;因为没有&＃xff0c;所以得造。

• 这个与上一个效果略有不同&＃xff0c;就是那个灰色的遮盖&＃xff0c;第一个是用了UIView然后添加了手势&＃xff0c;但是添加手势以后&＃xff0c;会出现手势冲突&＃xff0c;所以这个我把背景遮盖给换成了一个UIButton&＃xff0c;这样子省了不少的功夫。代码如下&＃xff1a;

LHTopTextView.h(弹出框的视图)

#import &＃64;interface LHTopTextView : UIView&＃64;property (nonatomic,weak)UITextView *textView;
&＃64;property (nonatomic,weak)UIButton *submitBtn;
&＃64;property (nonatomic,weak)UIButton *cancelBtn;&＃64;property (nonatomic,weak)UILabel *titleLabel;&＃64;property (nonatomic,copy) void(^submitBlock)(NSString * text);
&＃64;property (nonatomic,copy) void(^closeBlock)();&＃64;end


LHTopTextView.m

#import "LHTopTextView.h"&＃64;interface LHTopTextView()<UITextViewDelegate>{
CGFloat _space;
NSString *_text;
CGFloat _margin;
}
&＃64;end&＃64;implementation LHTopTextView-(instancetype)initWithFrame:(CGRect)frame{
self&＃61;[super initWithFrame:frame];
if(self){//设置两个控件之间的间距_space&＃61;10.0;//设置与边框的间距_margin&＃61;15.0;//设置圆角self.layer.cornerRadius&＃61;5;[self.layer setMasksToBounds:YES];//设置背景色self.backgroundColor&＃61;[UIColor whiteColor];//驳回申诉UILabel *titleLabel&＃61;[[UILabel alloc]initWithFrame:CGRectMake((frame.size.width-2*_margin)/3&＃43;_margin, _margin,(frame.size.width-2*_margin)/3, (frame.size.height-_margin*2-_space)/7)];self.titleLabel&＃61;titleLabel;[self addSubview:titleLabel];[titleLabel setFont:[UIFont systemFontOfSize:20]];titleLabel.textAlignment&＃61;NSTextAlignmentCenter;[titleLabel setText:&＃64;"驳回申诉"];//输入框UITextView *textView&＃61;[[UITextView alloc]initWithFrame:CGRectMake(_margin, CGRectGetMaxY(titleLabel.frame)&＃43;_space, frame.size.width-2*_margin, CGRectGetHeight(titleLabel.frame)*4)];textView.backgroundColor&＃61;[UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.739140070921986];self.textView&＃61;textView;textView.font&＃61;[UIFont systemFontOfSize:15];NSString *str&＃61;&＃64;"请您输入您对处理结果的评价&＃xff0c;最多128个字";textView.textColor&＃61;[UIColor whiteColor];textView.text&＃61;str;textView.returnKeyType&＃61;UIReturnKeyDone;textView.delegate&＃61;self;[self addSubview:textView];//seperateLineUIView *lineView&＃61;[[UIView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(textView.frame)&＃43;_margin, frame.size.width, 1)];lineView.backgroundColor&＃61;[UIColor grayColor];[self addSubview:lineView];//取消按钮UIButton *cancelBtn&＃61;[UIButton buttonWithType:UIButtonTypeCustom];cancelBtn.frame&＃61;CGRectMake(0, CGRectGetMaxY(lineView.frame), frame.size.width/2, CGRectGetHeight(titleLabel.frame)*2);[cancelBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];[cancelBtn setTitle:&＃64;"关闭" forState:UIControlStateNormal];self.cancelBtn&＃61;cancelBtn;[cancelBtn addTarget:self action:&＃64;selector(clickCancel:) forControlEvents:UIControlEventTouchUpInside];[self addSubview:cancelBtn];//按钮分隔线UIView *seperateLine&＃61;[[UIView alloc]initWithFrame:CGRectMake(CGRectGetMaxX(cancelBtn.frame), CGRectGetMinY(cancelBtn.frame), 1, CGRectGetHeight(cancelBtn.frame))];seperateLine.backgroundColor&＃61;[UIColor grayColor];[self addSubview:seperateLine];//确定按钮UIButton *sureBtn&＃61;[UIButton buttonWithType:UIButtonTypeCustom];sureBtn.frame&＃61;CGRectMake(CGRectGetMaxX(seperateLine.frame), CGRectGetMinY(cancelBtn.frame), CGRectGetWidth(cancelBtn.frame), CGRectGetHeight(cancelBtn.frame));self.submitBtn&＃61;sureBtn;[sureBtn setTitle:&＃64;"提交" forState:UIControlStateNormal];[sureBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];[sureBtn addTarget:self action:&＃64;selector(clickSubmit:) forControlEvents:UIControlEventTouchUpInside];[self addSubview:sureBtn];}
return self;
}-(void)textViewDidBeginEditing:(UITextView *)textView{
textView.textColor&＃61;[UIColor blackColor];
textView.text&＃61;nil;
}
/*** 通过代理方法去设置不能超过128个字&＃xff0c;但是可编辑*/
#pragma mark -UITextViewDelegate
-(void)textViewDidChange:(UITextView *)textView{
if(textView.text.length>&＃61;128){textView.text&＃61;[textView.text substringToIndex:127];
}
}#pragma mark -return键弹回键盘
-(BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text


{

if ([text isEqualToString:&＃64;"\n"]) {[textView resignFirstResponder];return NO;}
return YES; }#pragma mark -处理确定点击事件-(void)clickSubmit:(id)sender{
if(self.textView.editable){[self.textView resignFirstResponder];
}
if(self.textView.text.length>0){if([self.textView.textColor isEqual:[UIColor redColor]]||[self.textView.textColor isEqual:[UIColor whiteColor]]){[self.textView becomeFirstResponder];}else{if(self.submitBlock){self.submitBlock(self.textView.text);}}
}else{self.textView.textColor&＃61;[UIColor redColor];self.textView.text&＃61;&＃64;"您输入的内容不能为空&＃xff0c;请您输入内容";
}
}#pragma mark -处理取消点击事件-(void)clickCancel:(id)sender{
if(self.closeBlock){self.closeBlock();
}
}&＃64;end


LHEditTextView.h(显示弹出框和遮盖的视图)

#import &＃64;interface LHEditTextView : UIView&＃64;property (nonatomic,weak)UIButton *grayBgView;
&＃64;property (nonatomic,copy)void (^requestDataBlock)(NSString *text);&＃43;(instancetype)showWithController:(UIViewController *)controller;
&＃43;(void)showWithController:(UIViewController *)controller andRequestDataBlock:(void(^)(NSString *))requestDataBlock;
&＃64;end


LHEditTextView.m

#import "LHEditTextView.h"
#import "AppDelegate.h"
#import "LHTopTextView.h"&＃64;interface LHEditTextView()<UIGestureRecognizerDelegate>&＃64;property (nonatomic,weak)LHTopTextView *topTextView;
&＃64;property (nonatomic,weak)UIViewController *controller;
&＃64;end&＃64;implementation LHEditTextView-(instancetype)initWithController:(UIViewController *)controller{
self&＃61;[super init];
if(self){//黑色半透明背景AppDelegate *app&＃61;(AppDelegate *)[UIApplication sharedApplication].delegate;UIButton *grayBgView&＃61;[UIButton buttonWithType:UIButtonTypeCustom];grayBgView.frame&＃61;[UIScreen mainScreen].bounds;grayBgView.backgroundColor&＃61;[UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];[app.window.rootViewController.view addSubview:grayBgView];grayBgView.hidden&＃61;YES;self.grayBgView&＃61;grayBgView;[grayBgView addTarget:self action:&＃64;selector(popAndPushPickerView) forControlEvents:UIControlEventTouchUpInside];LHTopTextView *topTextView&＃61;[[LHTopTextView alloc]initWithFrame:CGRectMake(15, controller.view.bounds.size.height/3, controller.view.bounds.size.width-30, controller.view.bounds.size.height/3)];self.topTextView&＃61;topTextView;topTextView.submitBlock&＃61;^(NSString *text){[self popAndPushPickerView];if(self.requestDataBlock){self.requestDataBlock(text);}};topTextView.closeBlock&＃61;^(){[self popAndPushPickerView];};[self.grayBgView addSubview:topTextView];}
return self;
}&＃43;(instancetype)showWithController:(UIViewController *)controller{
LHEditTextView *editTextView&＃61;[[self alloc]initWithController:controller];
editTextView.controller&＃61;controller;
[controller.view addSubview:editTextView];
[editTextView popAndPushPickerView];
return editTextView;
}&＃43;(void)showWithController:(UIViewController *)controller andRequestDataBlock:(void(^)(NSString *text))requestDataBlock{
LHEditTextView *edit&＃61;[LHEditTextView showWithController:controller];
edit.requestDataBlock&＃61;requestDataBlock;
}-(void)popAndPushPickerView{
if(self.grayBgView.hidden){[UIView animateWithDuration:0.5 animations:^{self.grayBgView.hidden&＃61;NO;self.topTextView.hidden&＃61;NO;}];[self.grayBgView setUserInteractionEnabled:YES];
}else{[UIView animateWithDuration:0.5 animations:^{self.topTextView.hidden&＃61;YES;} completion:^(BOOL finished) {[UIView animateWithDuration:0.5 animations:^{self.grayBgView.hidden&＃61;YES;}];}];}}&＃64;end


调用还是十分简单&＃xff1a;ViewController.m

#import "ViewController.h"
#import "LHEditTextView.h"
&＃64;interface ViewController ()&＃64;end&＃64;implementation ViewController- (void)viewDidLoad {
[super viewDidLoad];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[LHEditTextView showWithController:self andRequestDataBlock:^(NSString *text) {NSLog(&＃64;"这里面去实现数据的回调");
}];
}- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}&＃64;end


这是这两天写的小demo,其实有心的人会把这两个demo封装到一起的&＃xff0c;这样子今后用这也方便。。。。降龙十八掌&＃xff0c;打完收工&＃xff01;
有想要demo的&＃xff0c;可以加我QQ&＃xff1a;635326856
最近我发现好多人问我要代码&＃xff0c;但是我整天不开电脑&＃xff0c;给你们说&＃xff0c;第一种样式其实很简单&＃xff0c;就是将上面的代码给复制下来生成对应名字的文件&＃xff08;.h和.m文件&＃xff09;就可以了。