Semi-modal dialog views for iPhone

August 28, 2010 § 4 Comments

[tweetmeme service=’bit.ly’]

Switching views using the modal dialog paradigm is fairly straightforward, but I had a modal dialog that didn’t require the whole height of the window. Having a full-height window for one control just looked stupid. I’d seen a few times modal views sliding up from the bottom (a bit like a UIActionSheet) and wanted to replicate something similar (see image left). After trawling the internet, I found this post which explained how to do what I wanted.

I used almost exactly the same technique, except the view I created in Interface Builder was only as tall as I needed (see image right).

In the view that I was going to cover, I also added a UIView with a black, transparent background that covered the entire screen and was on top of all the other components. I could then animate the transparency of this to create a “mask” that hid the components on the background view while the dialog was displayed.

The code from the post mentioned above was then used to hide and show the dialog:

- (void)showMyModalView {
	MyModalViewController *controller = [[MyModalViewController alloc] initWithNibName:@"MyModalView" bundle:nil];

	// move the modal view off the screen
	CGPoint viewCenter = controller.view.center;
	CGSize screenSize = [UIScreen mainScreen].bounds.size;
	controller.view.center = CGPointMake(screenSize.width / 2.0, screenSize.height * 1.5);;
	// add the modal view to the current window
	MyAppDelegate *delegate = (MyAppDelegate *)[UIApplication sharedApplication].delegate;
	[delegate.window addSubview:controller.view];

	// animate the showing of the modal view and show the mask
	[UIView beginAnimations:nil context:nil];
	[UIView setAnimationDuration:0.5];
	controller.view.center = CGPointMake(viewCenter.x, screenSize.height-viewCenter.y);
	mask.alpha = 0.8;
	[UIView commitAnimations];

	[controller release];
}

- (void)hideMyModalView {
	CGSize screenSize = [UIScreen mainScreen].bounds.size;

	// animate the hiding of the modal view, and fade the mask
	[UIView beginAnimations:nil context:nil];
	[UIView setAnimationDuration:0.5];
	controller.view.center = CGPointMake(screenSize.width / 2.0, screenSize.height * 1.5);
	mask.alpha = 0.8;
	[UIView commitAnimations];
}

Note: “mask” is just a solid-black UIView on top of the view which is usually transparent.

Advertisements

Tagged: , , , ,

§ 4 Responses to Semi-modal dialog views for iPhone

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Semi-modal dialog views for iPhone at Fringley's Blog.

meta

%d bloggers like this: