Best Method to Show a Popup Transparent Window on iPhone?

Question

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:

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.

I thought this would be a possible solution iPhone Modal View Smaller that the screen but 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.

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.

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.

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.

Thanks in advance for your suggestions!

Answer 1

do you want to achieve this?

Here are two different viewControllers one above other one. vc2 is a childViewController of vc1 with a transparent background. In your case you can put a UILabel top of the stack with backgroundColor black and alpha = 0.5.

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

- (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.m put this on viewDidLoad to make this viewControllertransparent.

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

Making transparent view a viewController will make your code clean as all code of vc2 will be in a separate class.

EDIT

So do one thing, First add a UIView to your xib which will be a rounded border and frame will be that you want as per your screenshot.

For rounded border, you can use this category. backgroundColor of this UIView will be 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/UIImage whose frame is equal to UIView above and alpha is 0.5 with black background color. You can do this directly from xib. No need to set frame through code.

Then start putting your other controls inside UIView

Answer 2

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

Answer 3

Follow below step for transparent view :

step 1:

step 2:

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

may be it will help.

Answer 4

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

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.

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.searchTblContainerView is main view that contain your whole UIControls such like label, textField, Button, etc... and set it as per your requirement.

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

Following code for display 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.

 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.