ramin-
This is a great tutorial, thanks much. I’m an iPhone newbie and I’m failing to get this to work- when I run it with a view that otherwise works with ‘presentModalViewController’, I get no exceptions, but the view never displays (though it does initialize, I’ve verified that in the debugger). My one difference is that my main view controller is a UITabBarController. I’ve experimented with various combinations but can’t come up with anything that actually shows the view.

Any general thoughts would be appreciated.

Thanks,
Ken

10/10. Great tutorial

im confused, how go you call this from the ibaction of a button?

@ken You’ll want to put the showModal/hideModal routines inside your UITabBarController-derived class then pass them the view that has the stuff you want to show (which itself could be lazy-loaded from a nib file).

The showModal code adds the semi-modal view on top of the main window so it should show up on top of everything else. It shouldn’t make any difference what’s underneath it.

Hope this helps.

@dep To invoke this you’ll need an IBAction method called, say, “showPanel” in your UIViewController-derived class. Wire the button to the showPanel routine. Inside showPanel you would load up your view and call the showModal method and pass it along. Wire up the close button to a “closePanel” IBAction method that calls the hidePanel method.

Great tutorial. Thanks! I was stuck on the modal view taking up the entire screen. This fixes the problem nicely.

How would I call this from the -(void) viewdidload method?

I was wondering if you had the project files for this cause i am a Newbie and really want to add this effect. Thanks in advance.

very nice, exactly what I was looking for

but I am messing around with that transparency stuff: if I set the view alpha of the view below 1, all elements on it will also be semi-transparent. what am I doing wrong??

btw:
if you want to flip it up and down and up again, you have to reset the center in -(void)hideModalEnded:

- (void) hideModalEnded:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
{
UIView* modalView = (UIView *)context;
[modalView removeFromSuperview];
CGSize offSize = [UIScreen mainScreen].bounds.size;
CGPoint middleCenter = CGPointMake(offSize.width / 2.0, offSize.height / 2.0);
modalView.center = middleCenter;
[modalView release];
}

@Jason: It should be pretty straightforward to use. Just create a class derived from UIViewController, add the above methods to it and then call those methods to show and hide the view as a modal.

@jotwee: To adjust only the transparency of the background, try setting the alpha of the background view to < 1.0 *before* adding any subviews to it.

On flipping up/down/up: not sure why you’d want to do that, because if you’re holding a reference to the modalView so it can be reused later, the ‘showModal’ routine sets the center before it starts off. And if you do it in the hideModalEnded after it’s been removed from the subview then it won’t be visible. Maybe I’m not getting your usage scenario.

@ramin
??
first time show: middleCenter = middle of the screen
second time show: middleCenter = offScreenCenter

after hiding, you have to reset the center (when the view is not visible)

Interessting tut, but i have problems understanding the way it works.

i am using a tabController in the mainView and derived from UIViewController a window wich should act as an InfoWindow.
Tapping a TableCell should raise the InfoWindow.

exactly the UIView parameter is confusing me….

would you please give me the source to learn from it?

regards!

Hi Ramin,

Thanks for posting the tutorial. I’m having a problem dismissing the modal.

I loaded the model from a Xib as you suggested.

Do you mind posting the entire project? Thanks

Great article first.

Regarding “adjust only the transparency of the background, try setting the alpha of the background view to < 1.0 *before* adding any subviews to it”

I tried to do this but it doesn’t work. Even tried setting the alpha and opaque properties after view added to my fullscreen view that has a semi-transparent background.

Anyone have any ideas how to make the background semi-transparent as suggested in the article.

Thanks again.

Also, regarding “if you want to flip it up and down and up again, you have to reset the center in -(void)hideModalEnded:”

I added the extra code at the end of each animation cycle – I’m guessing jotwee has the same use-case as me – my view is wrapped in a view controller.. I keep a reference to it (and it’s view) hanging around, so seeming need to do the extra reseting each time, at the of each flip ‘down’.

Great article first.

Regarding “adjust only the transparency of the background, try setting the alpha of the background view to < 1.0 *before* adding any subviews to it"

I tried to do this but it doesn't work. Even tried setting the alpha and opaque properties after view added to my fullscreen view that has a semi-transparent background.

Anyone have any ideas how to make the background semi-transparent as suggested in the article.

Thanks again.

I’ve been trying to isolate this problem for days. Your code works great presenting the modal partially overlaying the content, but the controller for that modally presented view causes a crash whenever an IBAction, even an empty one, is called. The console specifies the crash as “unrecognized selector sent to instance.” This same code works fine if the modal is called and dismissed the standard way.

I’ve tried to recreate the modal interface from scratch with just your code and basic methods to call it. Even this stripped down example crashes the same way. Click “+” to present the modal, then click “Done” and the app hangs, then crashes. You can download the project here: http://dl.dropbox.com/u/416448/Test.zip

I’m sure I’m missing something simple here. Any help at all would be greatly appreciated.

Someone helped me at Stack Overflow: http://stackoverflow.com/questions/2969662/iphone-unrecognized-selector-sent-to-instance-error

Basically, I released the view variable too soon.

I knew it was simple!

Nice code sample! However, there seems to be an error in hideModalEnded:finished:context:

modalView SHOULD NOT BE RELEASED! It is released automatically by calling removeFromSuperView. Se the docs.

Releasing it *might* crash your app, or it might not, so it’s difficult to track down.

Thanks for the example I was looking for info on how to do something like this. I was able to adapt this technique to my use case with minimal problems as you explained it with enough detail. Good Job !!!

Thanks for the tutorial; this solved a problem I was working to figure out! Though one point of note. In the hideModalEnded function, calling [modalView removeFromSuperview] followed by
[modalView release] may very well give you a EXEC_BAD_ACCESS error as removeFromSuperview will set modalView equal to nil effectively setting the retainCount to zero and destroying the object. Again thank you for taking the time to post this tutorial, it saved me a chunk of time.

Can this work for a horizontal view? I tried it and it is always portrait view even when I set the animation transition style like this:
[UIView setAnimationTransition:UIModalTransitionStyleFlipHorizontal forView:modalView cache:YES];

Could you post a link to the download of this? Thanks

Hi,
Very useful but I have a little problem when my view contains an TabBarController…. When I push the modal popup, the bottom of the TabBarController is still displayed…..
Any help ?
Thanks

Thanks, this is a really good example. Have you modified this to be able to rotate the device and have the views rotate?

Thanks for this great post. It really very helpful.

I’m struggling to figure out how to wire a button on the modal view to dismiss it. It seems like you’d need to use delegation in order to call hideModal from the modal view’s controller.

To prevent use of a singleton, and having a reference to your application delegate around in your function.

You might want to just use:
UIWindow* mainWindow = [[UIApplication sharedApplication] keyWindow];

Crap, this does not rotate!

I used this idea and turned it into a few classes to present Semi-Modal dialogs in an easy way.

The code is up on github, see this post here: http://bit.ly/9HqgKV

There’s a problem when the view is added on a rotated device with autorotation allowed. The fix is… unpleasant. It involves applying a transform to the view and then if you want it to slide in from a specific direction, you need to mess with the offScreenCenter based on which way the the device is oriented.

Thanks for the link Nathan. Good work!

@nick It shouldn’t be too hard to set up the class as an observer for interface rotation notification via something like:

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(orientationChanged:)
name:UIDeviceOrientationDidChangeNotification object:nil];


Then set the transform angle of the view to rotate accordingly.

@stan: To get it to show above everything else the semi-modal dialog needs to be added as a child of the top-level window and moved in front of all other children of the window (including tabbars and navigation controllers).

@AD: I was trying to describe a general technique instead of a specific type of modal window. You may want to take a look at Nick’s post at http://bit.ly/9HqgKV for some code examples.

@nathan It’s only for horizontal view but it should be easy to catch the orientation change event and set the transform on the modal view to have it rotate. See my other comment for one way to watch for orientation change. This way it will work even if the modal view is not part of a UIViewController chain. You’ll want to remember to remove it as an observer when dismissing the modal.

this works great, but I am not familiar with transform to get this to work in landscape mode. could anybody point me in the right direction? thanks.

Great job dude!
just for who is reading this post, for me it worked better this way:

- (void) showModal:(UIView*) modalView {
CGSize offSize = self.view.frame.size;
CGPoint offScreenCenter = CGPointMake(offSize.width / 2.0, offSize.height * 1.5);
CGPoint realCenter = CGPointMake(offSize.width / 2.0, offSize.height / 2.0);
modalView.center = offScreenCenter;
[self.view addSubview:modalView];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.7];
modalView.center = realCenter;
[UIView commitAnimations];
}

and in the modalView:

- (void)viewDidLoad {
[super viewDidLoad];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:nil];
}

-(void) orientationChanged:(NSNotification *)notification {
UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
if (orientation == UIDeviceOrientationLandscapeLeft ||
orientation == UIDeviceOrientationLandscapeRight)
self.view.frame = CGRectMake(0, 110, 1024, 599); // the size that you want
else
self.view.frame = CGRectMake(0, 280, 768, 599);// the size that you want
}

- (void)viewDidUnload {
[[NSNotificationCenter defaultCenter] removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil];
[super viewDidUnload];
}