前言
好久沒寫博客了……最近拿到了一版原型圖零院，各種彈框，簡(jiǎn)直快把老爺給彈死了……因?yàn)閷?shí)現(xiàn)功能是其次的村刨，最主要還得把這些東西給封裝一下告抄，方便同事的調(diào)用。于是乎嵌牺，我就開始了爬坑的過程打洼。經(jīng)過兩天的耕耘龄糊，出了兩款風(fēng)格迥異的彈框，這里給大家分享一下募疮。炫惩。。同時(shí)也祭奠一下阿浓，我老去的容顏……
效果圖
底部PickerView彈框（這個(gè)東西還是蠻常見的）
view.gif
中間TextView彈框（這個(gè)東西真不常見他嚷，Alert支持的是單行輸入，也就是textField）
vie.gif
底部PickerView彈框（LHEditPickerView）
首先生成了一個(gè)LHEditPickView這個(gè)就是大家看到的那個(gè)彈出框的實(shí)體view
代碼如下：
LHEditPickView.h
#import <UIKit/UIKit.h>
@interface LHEditPickView : UIView
/**
* 背景圖（半透明全屏）
*/
@property (nonatomic,weak)UIView *blackBgView;
/**
* 下部彈出框的ToolBar
*/
@property (nonatomic,weak)UIToolbar *toolBarView;
/**
* 彈出框主題背景
*/
@property (nonatomic,weak)UIView *mainBgView;
/**
* 部門選擇PickView
*/
@property (nonatomic,weak)UIPickerView *pickerView;
/**
* 取消按鈕
*/
@property (nonatomic,weak)UIButton *cancelBtn;
/**
* 確定按鈕
*/
@property (nonatomic,weak)UIButton *sureBtn;
@property (nonatomic,strong)NSArray *data;
@property (nonatomic,copy) void (^refreshUserInterface)(NSString *);
@property (nonatomic,copy) void (^dropEditPickerView)();
@end'
LHEditPickView.m
#import "LHEditPickView.h"
@interface LHEditPickView()<UIPickerViewDelegate,UIPickerViewDataSource>{
//按鈕的寬度
CGFloat _btnWidth;
NSString *_result;
}
@end
@implementation LHEditPickView
-(instancetype)initWithFrame:(CGRect)frame{
self=[super initWithFrame:frame];
if(self){
//主背景圖
UIView *mainBgView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
self.mainBgView=mainBgView;
mainBgView.backgroundColor=[UIColor whiteColor];
[self addSubview:mainBgView];
//ToolBar
UIToolbar *toolView=[[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height/6)];
[toolView setBackgroundImage:[UIImage imageNamed:@"daohangtiao"] forToolbarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
self.toolBarView=toolView;
toolView.backgroundColor=[UIColor blueColor];
[mainBgView addSubview:toolView];
//取消芭毙，確定按鈕
_btnWidth=100.0;
UIButton *cancelbtn=[UIButton buttonWithType:UIButtonTypeCustom];
cancelbtn.frame=CGRectMake(0, 0, _btnWidth, CGRectGetHeight(toolView.frame));
[cancelbtn setTitle:@"取消" forState:UIControlStateNormal];
[cancelbtn addTarget:self action:@selector(onclickCancel:) forControlEvents:UIControlEventTouchUpInside];
self.cancelBtn=cancelbtn;
[toolView addSubview:cancelbtn];
_btnWidth=100.0;
UIButton *sureBtn=[UIButton buttonWithType:UIButtonTypeCustom];
sureBtn.frame=CGRectMake(frame.size.width-_btnWidth, 0, _btnWidth, CGRectGetHeight(toolView.frame));
[sureBtn setTitle:@"確定" forState:UIControlStateNormal];
self.sureBtn=sureBtn;
[self.sureBtn addTarget:self action:@selector(onclickSure:) forControlEvents:UIControlEventTouchUpInside];
[toolView addSubview:sureBtn];
//UIPickerView
UIPickerView *picker=[[UIPickerView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(toolView.frame), frame.size.width, (frame.size.height/6)*5)];
self.pickerView=picker;
picker.showsSelectionIndicator=YES;
picker.delegate=self;
picker.dataSource=self;
[mainBgView addSubview:picker];
}
return self;
}
//設(shè)置data并且設(shè)設(shè)置_result的初始值
-(void)setData:(NSArray *)data{
if(_data!=data){
_data=data;
_result=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;
}
//設(shè)置每一行的內(nèi)容
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
return self.data[row];
}
//設(shè)置選中結(jié)果
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
_result=self.data[row];
}
@end
由于本人習(xí)慣于代碼布局筋蓖，所以很low……呵呵噠
現(xiàn)在主體顯示的部分已經(jīng)有了，現(xiàn)在就該操心怎么將它顯示出來了退敦，于是我又創(chuàng)建了一個(gè)類——LHBottomPickerView（顯示LHEditPickView)廢話不多說粘咖，上代碼：
LHBottomPickerView.h
#import <UIKit/UIKit.h>
#import "LHEditPickView.h"
@interface LHBottomPickerView : UIView
@property (nonatomic,weak)UIView *grayBgView;
@property (nonatomic,weak)LHEditPickView *editView;
@property (nonatomic,weak)UIViewController *controller;
@property (nonatomic,copy)void (^bottomResultPresent)(NSString *);
@property (nonatomic,strong)UITapGestureRecognizer *recognizer;
+(instancetype)showWithController:(UIViewController *)controller andData:(NSArray *)data;
-(instancetype)initWithController:(UIViewController *)controller;
+(void)showEditPickerViewWithController:(UIViewController *)controller andData:(NSArray *)data andBlock:(void (^)(NSString *temp))bottomResultPresent;
@end
LHBottomPickerView.m
#import "LHBottomPickerView.h"
#import "AppDelegate.h"
@interface LHBottomPickerView()<UIGestureRecognizerDelegate>
@end
@implementation LHBottomPickerView
-(instancetype)initWithController:(UIViewController *)controller{
self=[super init];
if(self){
//黑色半透明背景
AppDelegate *app=(AppDelegate *)[UIApplication sharedApplication].delegate;
UIView *grayBgView=[[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
grayBgView.backgroundColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
[app.window.rootViewController.view addSubview:grayBgView];
grayBgView.hidden=YES;
self.grayBgView=grayBgView;
//為grayBgView添加點(diǎn)擊手勢(shì)
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] init];
tapGestureRecognizer.numberOfTapsRequired = 1; // 設(shè)置單擊幾次才觸發(fā)方法
[self.grayBgView setUserInteractionEnabled:YES];
tapGestureRecognizer.delegate=self;
[tapGestureRecognizer addTarget:self action:@selector(popAndPushPickerView)]; // 添加點(diǎn)擊手勢(shì)的方法
tapGestureRecognizer.cancelsTouchesInView = NO;
[self.grayBgView addGestureRecognizer:tapGestureRecognizer];
self.recognizer=tapGestureRecognizer;
//LHEditPickerView
LHEditPickView *editView=[[LHEditPickView alloc]initWithFrame:CGRectMake(0, controller.view.bounds.size.height, controller.view.bounds.size.width, controller.view.bounds.size.height/5*2)];
self.editView=editView;
self.editView.refreshUserInterface=^(NSString * result){
if(self.bottomResultPresent){
self.bottomResultPresent(result);
}
};
self.editView.dropEditPickerView=^(){
[self popAndPushPickerView];
};
[self.grayBgView addSubview:editView];
}
return self;
}
+(instancetype)showWithController:(UIViewController *)controller andData:(NSArray *)data{
LHBottomPickerView *bottom=[[self alloc]initWithController:controller];
bottom.controller=controller;
bottom.editView.data=data;
[controller.view addSubview:bottom];
[bottom popAndPushPickerView];
return bottom;
}
-(void)popAndPushPickerView{
if(self.grayBgView.hidden){
[UIView animateWithDuration:0.5 animations:^{
self.grayBgView.hidden=NO;
self.editView.frame=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=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=YES;
}];
}];
}
}
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
if ( [touch.view isKindOfClass:[UIButton class]])
{
return NO;
}
//由于LHEdiPickView中的toolView也受到了手勢(shì)的影響，所以在這里將這這個(gè)ToolView屏蔽掉
if([touch.view isKindOfClass:[UIToolbar class]]){
return NO;
}
return YES;
}
+(void)showEditPickerViewWithController:(UIViewController *)controller andData:(NSArray *)data andBlock:(void (^)(NSString *temp))bottomResultPresent{
LHBottomPickerView *bottom=[LHBottomPickerView showWithController:controller andData:data];
bottom.bottomResultPresent=bottomResultPresent;
}
@end
下面就是最神奇的地方侈百，調(diào)用竟然會(huì)如此簡(jiǎn)單瓮下，還是上代碼：
ViewController.h
#import "ViewController.h"
#import "LHBottomPickerView.h"
@interface ViewController ()
@property (nonatomic,weak)UIView *grayBgView;
@property (nonatomic,weak)LHEditPickView *editView;
@property (nonatomic,weak)UILabel *label;
@property (nonatomic,weak)UIButton *button;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button=[UIButton buttonWithType:UIButtonTypeCustom];
button.frame=CGRectMake(0, 0, 100, 100);
button.backgroundColor=[UIColor redColor];
[self.view addSubview:button];
self.button=button;
[button addTarget:self action:@selector(clickBtn) forControlEvents:UIControlEventTouchUpInside];
}
-(void)clickBtn{
//**看到?jīng)]，就是這么簡(jiǎn)單**
[LHBottomPickerView showEditPickerViewWithController:self andData:@[@"早晨",@"中午",@"下午"] andBlock:^(NSString *temp) {
[self.button setTitle:temp forState:UIControlStateNormal];
}];
}
@end
總結(jié)一下知識(shí)點(diǎn)：
- block使用：block屬性设哗、block參數(shù)唱捣、block傳遞两蟀、block回調(diào)
- 手勢(shì)沖突
彈出TextView彈框（LHPopTextView）
這個(gè)彈框网梢，當(dāng)時(shí)寫的時(shí)候就想去用AlertController或者AlertView,但是發(fā)現(xiàn)alertView和AlertController自帶的是一個(gè)TextField,并且還是單行的，顯然滿足不了我的需求赂毯，真心不想自己寫這一部分東西战虏，但是最后，還是重寫吧党涕，因?yàn)闆]有烦感，所以得造。
- 這個(gè)與上一個(gè)效果略有不同膛堤，就是那個(gè)灰色的遮蓋手趣，第一個(gè)是用了UIView然后添加了手勢(shì)，但是添加手勢(shì)以后肥荔，會(huì)出現(xiàn)手勢(shì)沖突绿渣，所以這個(gè)我把背景遮蓋給換成了一個(gè)UIButton，這樣子省了不少的功夫燕耿。代碼如下：
LHTopTextView.h(彈出框的視圖)
#import <UIKit/UIKit.h>
@interface LHTopTextView : UIView
@property (nonatomic,weak)UITextView *textView;
@property (nonatomic,weak)UIButton *submitBtn;
@property (nonatomic,weak)UIButton *cancelBtn;
@property (nonatomic,weak)UILabel *titleLabel;
@property (nonatomic,copy) void(^submitBlock)(NSString * text);
@property (nonatomic,copy) void(^closeBlock)();
@end
LHTopTextView.m
#import "LHTopTextView.h"
@interface LHTopTextView()<UITextViewDelegate>{
CGFloat _space;
NSString *_text;
CGFloat _margin;
}
@end
@implementation LHTopTextView
-(instancetype)initWithFrame:(CGRect)frame{
self=[super initWithFrame:frame];
if(self){
//設(shè)置兩個(gè)控件之間的間距
_space=10.0;
//設(shè)置與邊框的間距
_margin=15.0;
//設(shè)置圓角
self.layer.cornerRadius=5;
[self.layer setMasksToBounds:YES];
//設(shè)置背景色
self.backgroundColor=[UIColor whiteColor];
//駁回申訴
UILabel *titleLabel=[[UILabel alloc]initWithFrame:CGRectMake((frame.size.width-2*_margin)/3+_margin, _margin,(frame.size.width-2*_margin)/3, (frame.size.height-_margin*2-_space)/7)];
self.titleLabel=titleLabel;
[self addSubview:titleLabel];
[titleLabel setFont:[UIFont systemFontOfSize:20]];
titleLabel.textAlignment=NSTextAlignmentCenter;
[titleLabel setText:@"駁回申訴"];
//輸入框
UITextView *textView=[[UITextView alloc]initWithFrame:CGRectMake(_margin, CGRectGetMaxY(titleLabel.frame)+_space, frame.size.width-2*_margin, CGRectGetHeight(titleLabel.frame)*4)];
textView.backgroundColor=[UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.739140070921986];
self.textView=textView;
textView.font=[UIFont systemFontOfSize:15];
NSString *str=@"請(qǐng)您輸入您對(duì)處理結(jié)果的評(píng)價(jià)中符，最多128個(gè)字";
textView.textColor=[UIColor whiteColor];
textView.text=str;
textView.returnKeyType=UIReturnKeyDone;
textView.delegate=self;
[self addSubview:textView];
//seperateLine
UIView *lineView=[[UIView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(textView.frame)+_margin, frame.size.width, 1)];
lineView.backgroundColor=[UIColor grayColor];
[self addSubview:lineView];
//取消按鈕
UIButton *cancelBtn=[UIButton buttonWithType:UIButtonTypeCustom];
cancelBtn.frame=CGRectMake(0, CGRectGetMaxY(lineView.frame), frame.size.width/2, CGRectGetHeight(titleLabel.frame)*2);
[cancelBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[cancelBtn setTitle:@"關(guān)閉" forState:UIControlStateNormal];
self.cancelBtn=cancelBtn;
[cancelBtn addTarget:self action:@selector(clickCancel:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:cancelBtn];
//按鈕分隔線
UIView *seperateLine=[[UIView alloc]initWithFrame:CGRectMake(CGRectGetMaxX(cancelBtn.frame), CGRectGetMinY(cancelBtn.frame), 1, CGRectGetHeight(cancelBtn.frame))];
seperateLine.backgroundColor=[UIColor grayColor];
[self addSubview:seperateLine];
//確定按鈕
UIButton *sureBtn=[UIButton buttonWithType:UIButtonTypeCustom];
sureBtn.frame=CGRectMake(CGRectGetMaxX(seperateLine.frame), CGRectGetMinY(cancelBtn.frame), CGRectGetWidth(cancelBtn.frame), CGRectGetHeight(cancelBtn.frame));
self.submitBtn=sureBtn;
[sureBtn setTitle:@"提交" forState:UIControlStateNormal];
[sureBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[sureBtn addTarget:self action:@selector(clickSubmit:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:sureBtn];
}
return self;
}
-(void)textViewDidBeginEditing:(UITextView *)textView{
textView.textColor=[UIColor blackColor];
textView.text=nil;
}
/**
* 通過代理方法去設(shè)置不能超過128個(gè)字，但是可編輯
*/
#pragma mark -UITextViewDelegate
-(void)textViewDidChange:(UITextView *)textView{
if(textView.text.length>=128){
textView.text=[textView.text substringToIndex:127];
}
}
#pragma mark -return鍵彈回鍵盤
-(BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text
{
if ([text isEqualToString:@"\n"]) {
[textView resignFirstResponder];
return NO;
}
return YES;
}
#pragma mark -處理確定點(diǎn)擊事件
-(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=[UIColor redColor];
self.textView.text=@"您輸入的內(nèi)容不能為空誉帅，請(qǐng)您輸入內(nèi)容";
}
}
#pragma mark -處理取消點(diǎn)擊事件
-(void)clickCancel:(id)sender{
if(self.closeBlock){
self.closeBlock();
}
}
@end
LHEditTextView.h(顯示彈出框和遮蓋的視圖)
#import <UIKit/UIKit.h>
@interface LHEditTextView : UIView
@property (nonatomic,weak)UIButton *grayBgView;
@property (nonatomic,copy)void (^requestDataBlock)(NSString *text);
+(instancetype)showWithController:(UIViewController *)controller;
+(void)showWithController:(UIViewController *)controller andRequestDataBlock:(void(^)(NSString *))requestDataBlock;
@end
LHEditTextView.m
#import "LHEditTextView.h"
#import "AppDelegate.h"
#import "LHTopTextView.h"
@interface LHEditTextView()<UIGestureRecognizerDelegate>
@property (nonatomic,weak)LHTopTextView *topTextView;
@property (nonatomic,weak)UIViewController *controller;
@end
@implementation LHEditTextView
-(instancetype)initWithController:(UIViewController *)controller{
self=[super init];
if(self){
//黑色半透明背景
AppDelegate *app=(AppDelegate *)[UIApplication sharedApplication].delegate;
UIButton *grayBgView=[UIButton buttonWithType:UIButtonTypeCustom];
grayBgView.frame=[UIScreen mainScreen].bounds;
grayBgView.backgroundColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];
[app.window.rootViewController.view addSubview:grayBgView];
grayBgView.hidden=YES;
self.grayBgView=grayBgView;
[grayBgView addTarget:self action:@selector(popAndPushPickerView) forControlEvents:UIControlEventTouchUpInside];
LHTopTextView *topTextView=[[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=topTextView;
topTextView.submitBlock=^(NSString *text){
[self popAndPushPickerView];
if(self.requestDataBlock){
self.requestDataBlock(text);
}
};
topTextView.closeBlock=^(){
[self popAndPushPickerView];
};
[self.grayBgView addSubview:topTextView];
}
return self;
}
+(instancetype)showWithController:(UIViewController *)controller{
LHEditTextView *editTextView=[[self alloc]initWithController:controller];
editTextView.controller=controller;
[controller.view addSubview:editTextView];
[editTextView popAndPushPickerView];
return editTextView;
}
+(void)showWithController:(UIViewController *)controller andRequestDataBlock:(void(^)(NSString *text))requestDataBlock{
LHEditTextView *edit=[LHEditTextView showWithController:controller];
edit.requestDataBlock=requestDataBlock;
}
-(void)popAndPushPickerView{
if(self.grayBgView.hidden){
[UIView animateWithDuration:0.5 animations:^{
self.grayBgView.hidden=NO;
self.topTextView.hidden=NO;
}];
[self.grayBgView setUserInteractionEnabled:YES];
}else{
[UIView animateWithDuration:0.5 animations:^{
self.topTextView.hidden=YES;
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5 animations:^{
self.grayBgView.hidden=YES;
}];
}];
}
}
@end
調(diào)用還是十分簡(jiǎn)單：ViewController.m
#import "ViewController.h"
#import "LHEditTextView.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[LHEditTextView showWithController:self andRequestDataBlock:^(NSString *text) {
NSLog(@"這里面去實(shí)現(xiàn)數(shù)據(jù)的回調(diào)");
}];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
這是這兩天寫的小demo,其實(shí)有心的人會(huì)把這兩個(gè)demo封裝到一起的淀散，這樣子今后用這也方便右莱。。档插。慢蜓。降龍十八掌，打完收工郭膛！
有想要demo的胀瞪，可以加我QQ：635326856
最近我發(fā)現(xiàn)好多人問我要代碼，但是我整天不開電腦饲鄙，給你們說凄诞，第一種樣式其實(shí)很簡(jiǎn)單，就是將上面的代碼給復(fù)制下來生成對(duì)應(yīng)名字的文件（.h和.m文件）就可以了忍级。
歡迎關(guān)注我的個(gè)人微信公眾號(hào)帆谍，免費(fèi)送計(jì)算機(jī)各種最新視頻資源！你想象不到的精彩轴咱！
0.jpg
