【移動應用開發技術】iOS中如何實現自定義彈出pickerView效果

/upload/information/20200623/126/122730.gif/upload/information/20200623/126/122732.gif第一步：主頁面的設置//宏定義

#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;

}

}

}//點擊文本框時觸發的事件

-

(BOOL)textFieldShouldBeginEditing:(UITextField

*)textField;第二步：實現自定義view@interface

YLSOPickerView

:

UIView

/**

array

*/

@property

(nonatomic,strong)

NSArray

*array;

/**

title

*/

@property

(nonatomic,strong)

NSString

*title;

//快速創建

+(instancetype)pickerView;

//彈出

-(void)show;

@end宏定義#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//快速創建

+

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

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

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

}//彈出

-

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

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

}];

}第三步：主頁實現點擊出現的方法，并且接收回傳的值。#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;

}[[NSNotificationCenter

defaultCenter]addObserver:self

selector:@selector(getValue:)

name:@"value"

object:nil];

-(void)getValue:(NSNotification

*)notification

{

self.text1.text

=

notification.object;

}self.ranBtn

=

[UIButton

buttonWit