How to make a view have a semi-transparent border and show the view below

Question

Probably a bit of a newbie question, but .... I am writing an iPhone app which uses UITabBarController. In Interface Builder I've setup the tab bar in MainWindow.xib. I have 4 tabs, and each one is set to load the xib for the appropriate UIViewController subclass. I have created the views in the xib files for each UIViewController subclass in Interface Builder. All is working well in that I can tap each tab and it shows the view for the correct UIViewController

But what I really want is for the view for one of the UIViewController subclasses to have a semi-transparent border of approx 30px on all 4 edges, so that it shows the edges of the view behind, kind of greyed out. IE. the first tab is the main application, and that takes up the whole screen (minus the status and tab bar areas).Tab 2 is to save, and I want it to look like a small modal window over the top of the main app. (If I were doing this as a html web app, the terminology and technology I'd be using would be a jQuery overlay)

Does this make sense?

I've tried playing with presentModalViewController but this makes it worse in that it takes up the entire screen including the status and tab bar areas.

Any help or pointers very much appreciated Cheers

Nathan

Answer 1

Your UIViewController cannot be transparent to the view below it because the iphone may unload the view below it that is not currently being shown (to save memory).

The best solution I have used is to take a picture of the current view before you push your new view controller and then use that as the background image (fake the transparency). Here's how I implemented this:

NewViewController *newView = [[NewViewController alloc] init];
shareVC.imageBackground = [Utilities getScreenshot:self.view];
[self presentModalViewController:newView animated:YES];
[newView release];  

then on your newViewController do this (on viewDidLoad, viewWillAppear, etc):

[imageView setImage:imageBackground];

and here's the screenshot function

+(UIImage *)getScreenshot:(UIView *)_view {
    //take a screenshow of the parent view so we can add it as a background to the modal view
    if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)])
        UIGraphicsBeginImageContextWithOptions(_view.window.bounds.size, NO, [UIScreen mainScreen].scale);
    else
        UIGraphicsBeginImageContext(_view.window.bounds.size);
    [_view.window.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

You then need to setup your new view with a UIImageView as the background and pick the right Alpha value for that imageView to make it appear like it's transparent.