iPhone Modal View Smaller that the screen

Question

Hi

I'm trying to do something that shouldn't be that complicated, but I can't figure it out. I have a UIViewController displaying a UITableView. I want to present a context menu when the user press on a row. I want this to be a semi-transparent view with labels and buttons. I could use an AlertView, but I want full control on the format of the labels and buttons and will like to use Interface Builder.

So I created my small view 250x290, set the alpha to .75 and create a view controller with the outlets to handle the different user events.

Now I want to present it. If I use presentModalViewController two (undesired) things happen 1) the view covers all of the screen (but the status bar). 2) It is semi-transparent, but what I see "behind" it its not the parent view but the applications root view.

Ive tried adding it as a subview, but nothing happens, so Im not doing something right:

RestaurantContextVC* modalViewController = [[[RestaurantContextVC alloc] initWithNibName:@"RestaurantContextView" bundle:nil] autorelease];
[self.view addSubview:modalViewController.view];

Is it possible to do what I want? Thanks in advance.

Gonso

Answer 1

I would strongly consider using a navigation controller to slide in your subview instead of overlaying it. This is the expected model and any small benefit you may think you'll get by doing it your own way will be greatly offset by the principle of (least) surprise.

If you really really have to do it this way, I believe the trick is to add the first table view as a subview of a transparent "holding" view that the view controller maintains. Then add your new sub view as another subview of that.

Answer 2

Again, if you really want to do this, instead of adding a transparent "holding" view, since this pop-up is essentially modal, I would make it a subview directly of the window.

You might want to put in a transparent black shield behind it to prevent touches on the background and focus input on the popup.

But seriously, consider either popping a controller on the stack or using that alert view. Unless you've hired a $$ designer, it's probably not going to look appropriate on the iPhone.

Answer 3

Hi, I'm coding similar thing. My approach include:

1, Not using dismissModalViewControllerAnimated and presentModalViewController:animated.

2, Design a customized full sized view in IB. In its viewDidLoad message body, set the background color to clearColor, so that space on the view not covered by controllers are transparent.

3, I put a UIImageView under the controllers of the floating view. The UIImageView contains a photoshoped image, which has rounded corners and the background is set to transparent. This image view serves as the container.

4, I uses CoreAnimation to present/dismiss the floating view in the modal view style: (the FloatingViewController.m)

- (void)viewDidLoad
{
  [super viewDidLoad];
  [self.view setBackgroundColor:[UIColor clearColor]];

  [UIView beginAnimations:nil context:nil];
  [self.view setFrame:CGRectMake(0, 480, 320, 480)];

  [UIView setAnimationDuration:0.75f];
  [self.view setFrame:CGRectMake(0, 0, 320, 480)];
  [UIView commitAnimations];
}

Answer 4

wangii

Thats pretty much the solution I found. I load the view with loadNibNamed and then just add it on top with addSubView, like this:

//Show a view on top of current view with a wait indicator. This prevents all user interactions.
-(void) showWaitView{
    NSArray* nibViews =  [[NSBundle mainBundle] loadNibNamed:@"WaitView" owner:self options:nil];
#ifdef __IPHONE_2_1
    waitView = [ nibViews objectAtIndex: 0];
#else
    waitView = [ nibViews objectAtIndex: 1];
#endif    
    CGFloat x = self.view.center.x - (waitView.frame.size.width / 2);
    CGFloat y = self.view.center.y - (waitView.frame.size.height / 2);
    [waitView setFrame:CGRectMake(x,y,waitView.bounds.size.width,waitView.bounds.size.height)];
    [self.view addSubview:waitView]; 
}

Could you elaborate on points 3 and 4?

What I did to give the view the round rect aspect is put it inside a round rect button.

This code will actually allow you to have a small floating view, but if the view is smaller that its parent, the user could interact with the visible part of the parent.

In the end I create my view with the same size, but kept the code just in case.

Gonso