在iOS上UIPopoverController这个类是只能用在iPad中的,要想在iPhone中实现popover效果,必须得自定义view,当然网上也有这一方面的第三方类库可以提供给我们简便使用,在这里我主要记录一下自己的实现方法(没有封装为类,之后会继续更新的)。
首先,popOverView作为view的拓展,应用非常之广,我们常用的app 中几乎都有其的身影
其将一些操作置入其中利用rightBarButtonItem点击来显示
总体的思路其实很简单,大致分为三个部分
1、添加rightBarButtonItem,设置点击事件A;
2、点击事件A之后弹出两个view:more页面和back页面,more页面显示内容,back页面是其后的蒙版页面。在more页面上加入button(设置tag),利用不同的tag来响应事件
3、实现more页面上的button响应事件
一、添加rightBarButtonItem
- (void)makeRightNavigationItem{
UIButton *right = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 20, 18)];
[right setImage:[UIImage imageNamed:@"tj_help"] forState:UIControlStateNormal];
[right addTarget:self action:@selector(showOrHiddenMoreBtnView:) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:right];
}
二、more和back页面的设置
- (void)showOrHiddenMoreBtnView:(UIButton *)btn{
_moreBtn = btn;//_moreBtn 类变量,为之后隐藏两个view做好准备
btn.selected = !btn.selected;
UIView *back = [self.view viewWithTag:1000];
UIView *more = [self.view viewWithTag:1001];
if (btn.selected) {
if (back) {
[back removeFromSuperview];
}
if (more) {
[more removeFromSuperview];
}
UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0,0, self.view.frame.size.width, self.view.frame.size.height)];
backView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];
backView.tag = 1000;
backView.alpha = 0.0;
[self.view addSubview:backView];
//隐藏手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hiddenView)];
[backView addGestureRecognizer:tap];//back 上
//more 上的数据源
NSArray *nameArray = @[@"首页",@"办事指南",@"在线客服",@"客服热线"];
NSArray *imgArray = @[@"Taiji_onlinedeclare_弹出框-首页@2x",@"Taiji_onlinedeclare_办事指南@2x",@"Taiji_onlinedeclare_在线客服@2x",@"Taiji_onlinedeclare_客服热线@2x"];
CGFloat width = 140;
CGFloat height = 50;
CGFloat Y = 18.0;
UIView *moreView = [[UIView alloc] initWithFrame:CGRectMake(Screen_width-width-9,1, width, height*nameArray.count+Y)];
moreView.alpha = 0.0;
moreView.tag = 1001;
UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height*nameArray.count+Y)];
img.image = [self resizeImage:@"more_back"];
[moreView addSubview:img];
//加入按钮和分割线(高度为1的view实现)
for (int i =0; i
三、实现more页面上的button响应事件
//popoverView上的按钮事件
- (void)openMoreViewAction:(UIButton *)btn{
[self hiddenView];
if (btn.tag == 0) {
//回首页
[self.navigationController popToRootViewControllerAnimated:YES];
}else if(btn.tag == 2){
//在线客服
[Tool showToast:self.view msg:@"功能开发中。。。。"];
}
else{
//客服热线
//拨打电话 系统自动弹出提示
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"拨打热线" message:phoneCall preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
UIAlertAction* okAction = [UIAlertAction actionWithTitle:@"呼叫" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
NSMutableString *str=[[NSMutableString alloc] initWithFormat:@"tel://%@", phoneCall];
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:str]];
}];
[alertController addAction:cancelAction];
[alertController addAction:okAction];
[self presentViewController:alertController animated:YES completion:nil];
}
}
//隐藏更多视图
- (void)hiddenView{
if (!_moreBtn) {
return;
}
if (!_moreBtn.selected) {
return;
}
_moreBtn.selected = NO;
UIView *back = [self.view viewWithTag:1000];
UIView *more = [self.view viewWithTag:1001];
[UIView animateWithDuration:0.3 animations:^{
back.alpha = 0.0;
more.alpha = 0.0;
_moreBtn.transform = CGAffineTransformMakeRotation(0);
} completion:^(BOOL finished) {
}];
}
//缩放图片
-(UIImage *)resizeImage:(NSString *)imgName
{
UIImage *bgImage = [UIImage imageNamed:imgName];
//缩放图片
bgImage = [bgImage stretchableImageWithLeftCapWidth:bgImage.size.width / 2 topCapHeight:bgImage.size.height / 2];
return bgImage;
}
嘻嘻,其实那个more页面的背景是一张图片,我们在其上加入按钮和充当分割线的view,这样能节省画出形状的时间
最终效果图: