ios 在 iPhone 上显示弹出透明窗口的最佳方法？

Best Method to Show a Popup Transparent Window on iPhone?

提问by Cindeselia

I'm building an iOS 6 iPhone app in Xcode 4.6 and am wondering about the best way to achieve the following type of popup window:

我正在 Xcode 4.6 中构建一个 iOS 6 iPhone 应用程序，并且想知道实现以下类型的弹出窗口的最佳方法：

Specifically, the iPhone screenshot on the right, where, if a user taps on a face or UIView in the main window, a partially transparent popover appears with more detailed information -- such as a portrait photo and textual data -- but the original view (a photo collection here) remains visible, and the timers/counters continue ticking down in that view.

具体来说，右侧的 iPhone 屏幕截图，如果用户点击主窗口中的人脸或 UIView，则会出现一个部分透明的弹出窗口，其中包含更详细的信息——例如肖像照片和文本数据——但原始视图（此处的照片集）仍然可见，并且计时器/计数器在该视图中继续滴答作响。

I thought this would be a possible solution iPhone Modal View Smaller that the screenbut it doesn't work for me. Not shown above is a cancel button that I am also planning to put in the popover, so that the user can return to the view underneath. When the timer expires, the detailed view also disappears.

我认为这将是一个可能的解决方案iPhone Modal View 比屏幕更小，但它对我不起作用。上面没有显示的是一个取消按钮，我也打算把它放在弹出窗口中，以便用户可以返回到下面的视图。当计时器到期时，详细视图也会消失。

Should I use presentModalViewController and the presenter/presented scheme, or use a parent-child-view relationship with a storyboard segue, or should I use loadNibNamed, or some kind of hack to overcome the iPhone's limitation of displaying a non-full-screen modal view? It'll cover most of the screen but I want to make sure the view underneath is visible and still active, since it provides information to the user that isn't in the popover (timer, etc.). The user won't need to interact with the screen below, but I'd like it to be partially visible.

我应该使用presentModalViewController 和presenter/presented 方案，还是使用带有storyboard segue 的父子视图关系，或者我应该使用loadNibNamed，或者某种hack 来克服iPhone 显示非全屏模式的限制看法？它会覆盖大部分屏幕，但我想确保下面的视图可见并且仍然处于活动状态，因为它向用户提供不在弹出窗口中的信息（计时器等）。用户不需要与下面的屏幕交互，但我希望它是部分可见的。

I designed the popup view as a separate viewcontroller in my main storyboard, not as a xib file. The connections and outlets are formed from interface builder to my code, called ProfileViewController.

我在主故事板中将弹出视图设计为单独的视图控制器，而不是作为 xib 文件。连接和出口是从接口构建器到我的代码形成的，称为 ProfileViewController。

WARNING: My terminology may be incorrect and inaccurate. The popup or popover can be a UIView, UIViewController, UIWindow, or whatever works best programatically to solve the problem. I'm not tied to it being a certain widget type, as long as the functionality mirrors what I'm seeking.

警告：我的术语可能不正确和不准确。popup 或 popover 可以是 UIView、UIViewController、UIWindow 或任何以编程方式解决问题的最佳方法。只要功能反映了我正在寻找的内容，我就不会将其绑定为某种小部件类型。

Thanks in advance for your suggestions!

预先感谢您的建议！

回答by Vaibhav Saran

do you want to achieve this?

你想达到这个目标吗？

Here are two different viewControllersone above other one. vc2is a childViewControllerof vc1with a transparentbackground. In your case you can put a UILabeltop of the stack with backgroundColorblackand alpha = 0.5.

这里有两个不同的viewControllers一个。vc2是childViewController的vc1用transparent背景。在您的情况下，您可以UILabel使用backgroundColorblack和放置堆栈顶部alpha = 0.5。

All events of vc2will fire on vc2.m. Use this code on image click:

的所有事件都vc2将在 上触发vc2.m。在图像点击上使用此代码：

- (IBAction)imageClick 
{
    vc2 *viewController = [[vc2 alloc]init];
    [self addChildViewController:viewController];
    viewController.view.frame = self.view.frame;
    [self.view addSubview:viewController.view];
    viewController.view.alpha = 0;
    [viewController didMoveToParentViewController:self];

    [UIView animateWithDuration:0.25 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^
     {
         viewController.view.alpha = 1;
     }
                     completion:nil];
}

And in vc2.mput this on viewDidLoadto make this viewControllertransparent.

并vc2.m穿上它viewDidLoad以使其viewController透明。

self.view.backgroundColor = [UIColor clearColor];
self.view.opaque = YES;

Making transparent view a viewControllerwill make your code clean as all code of vc2will be in a separate class.

制作透明视图 aviewController将使您的代码干净，因为所有代码vc2都在一个单独的类中。

EDIT

编辑

So do one thing, First add a UIViewto your xibwhich will be a rounded border and frame will be that you want as per your screenshot.

所以，做一两件事，首先添加UIView到您xib这将是一个圆角的边框和框架将是你想按你的截图。

For rounded border, you can use this category. backgroundColorof this UIViewwill be clearColor:

对于圆形边框，您可以使用此category. backgroundColor其中UIView将是clearColor：

- (void)setRoundedBorder:(float) radius borderWidth:(float)borderWidth color:(UIColor*)color
{
    CALayer * l = [self layer];
    [l setMasksToBounds:YES];
    [l setCornerRadius:radius];
    // You can even add a border
    [l setBorderWidth:borderWidth];
    [l setBorderColor:[color CGColor]];
}

Now put a UILabel/UIView/UIImagewhose frame is equal to UIViewabove and alpha is 0.5 with black background color. You can do this directly from xib. No need to set frame through code.

现在放置一个UILabel/UIView/UIImage其框架等于UIView上面并且 alpha 为 0.5 的黑色背景色。您可以直接从xib. 无需通过代码设置框架。

Then start putting your other controls inside UIView

然后开始把你的其他控件放在里面 UIView

回答by Kalpesh

Try this

尝试这个

// create a new view
  UIView *viewPopup=[[UIView alloc]init];
  [viewPopup setBackgroundColor:[UIColor blackColor]];
  viewPopup.alpha=0.6f;

 // add into window
 AppDelegate *appdelgateobj=(AppDelegate *)[[UIApplication sharedApplication]delegate];
 [appdelgateobj.window addSubview:viewPopup];
 [appdelgateobj.window bringSubviewToFront:viewPopup];

回答by Dhaval Bhadania

Follow below step for transparent view :

按照以下步骤进行透明视图：

step 1:

第1步：

step 2:

第2步：

• Whenever you want it Transpertview.hidden=NO:
• whenever you don't want then Transpertview.hidden=YES:

• 无论何时你想要它 Transpertview.hidden=NO：
• 每当您不想要时 Transpertview.hidden=YES：

may be it will help.

可能会有所帮助。

回答by iPatel

Add #import <QuartzCore/QuartzCore.h>framework in your .mfile and use following code

#import <QuartzCore/QuartzCore.h>在.m文件中添加框架并使用以下代码

UIWindow* window = [UIApplication sharedApplication].keyWindow;
    self.dimView = [[UIView alloc] initWithFrame:window.bounds];
    self.dimView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:.6];
    self.dimView.userInteractionEnabled = YES;
    [window addSubview:self.dimView];

This above is transparent dimView which size is similar to window.

上面是透明的dimView，其大小类似于窗口。

self.searchTblContainerView = [[UIView alloc] init];
    self.searchTblContainerView.frame = CGRectMake(15, (window.frame.size.height - 300) / 2, 290, 300);
    self.searchTblContainerView.layer.cornerRadius = 15.f;
    self.searchTblContainerView.layer.borderColor = [UIColor blackColor].CGColor; /// set color as per your requirement
    self.searchTblContainerView.layer.borderWidth = 2.f;
    self.searchTblContainerView.alpha = 0.80; /// set as per your requirement 
    self.searchTblContainerView.clipsToBounds = YES;
    [self.dimView addSubview:self.searchTblContainerView];

above self.searchTblContainerViewis main view that contain your whole UIControlssuch like label, textField, Button, etc... and set it as per your requirement.

上面self.searchTblContainerView是包含您的整体的主视图，UIControls如标签、文本字段、按钮等...并根据您的要求进行设置。

Set by default hidden property of self.dimView.hidden = YES;and display and hideby following animation like alertView (apple).

默认情况下设置隐藏属性，self.dimView.hidden = YES;并通过以下动画显示和隐藏，例如 alertView (apple)。

Following code for display dimView.

以下代码用于显示dimView。

self.searchTblContainerView.transform = CGAffineTransformMakeScale(0.01, 0.01);
        [UIView animateWithDuration:0.30 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            self.searchTblContainerView.transform = CGAffineTransformIdentity;
            self.dimView.hidden = NO;
        } completion:^(BOOL finished){}];

        UIWindow* window = [UIApplication sharedApplication].keyWindow;
        [window bringSubviewToFront:self.dimView];

Following code for hide dimView.

以下代码隐藏dimView。

 self.searchTblContainerView.transform = CGAffineTransformIdentity;
    [UIView animateWithDuration:0.30 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        self.searchTblContainerView.transform = CGAffineTransformMakeScale(0.01, 0.01);
    } completion:^(BOOL finished){
        self.dimView.hidden = YES;
    }];

Above code is simple logic, might be useful in your case.

上面的代码是简单的逻辑，可能对您的情况有用。