在iOS上UIPopoverController这个类是只能用在iPad中的，要想在iPhone中实现popover效果，必须得自定义view，当然网上也有这一方面的第三方类库可以提供给我们简便使用，在这里我主要记录一下自己的实现方法（没有封装为类，之后会继续更新的）。
首先，popOverView作为view的拓展，应用非常之广，我们常用的app 中几乎都有其的身影
QQ.png
其将一些操作置入其中利用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<nameArray.count; i++) {
UIButton *btn1 = [[UIButton alloc] initWithFrame:CGRectMake(0, Y+height*i, width, height)];
[btn1 setTitle:nameArray[i] forState:UIControlStateNormal];
[btn1 setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];
btn1.titleLabel.font = [UIFont systemFontOfSize:15.0];
[btn1 setImage:[UIImage imageNamed:imgArray[i]] forState:UIControlStateNormal];
btn1.imageEdgeInsets = UIEdgeInsetsMake(13, 15, 13, 100);
btn1.tag = i;
if (i == 1) {
[btn1 addTarget:self action:@selector(goToGuide:) forControlEvents:UIControlEventTouchUpInside];
}else{
[btn1 addTarget:self action:@selector(openMoreViewAction:) forControlEvents:UIControlEventTouchUpInside];
}
[moreView addSubview:btn1];
if (i<nameArray.count-1) {
UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, Y+height*(i+1), width, 1)];
line.backgroundColor = [UIColor groupTableViewBackgroundColor];
[moreView addSubview:line];
}
}
[self.view addSubview:moreView];
//出现的动画效果、利用alpha的渐变
[UIView animateWithDuration:0.3 animations:^{
moreView.alpha = 1.0;
backView.alpha = 1.0;
// btn.transform = CGAffineTransformMakeRotation(M_PI/4);
}];
}else{
[UIView animateWithDuration:0.3 animations:^{
more.alpha = 0.0;
back.alpha = 0.0;
}];
}
=
}
三、实现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，这样能节省画出形状的时间
最终效果图：
效果图.png
网友评论