Adding a background image - UIImage and UIImageView

Ok, time to clean up a bit of the display. I've been itching to get at this for a while. The *very first thing* I'm going to do is center some of the text.

Here's an example of how to center text:

headerLabel.textAlignment = UITextAlignmentCenter;

Although, that one is showing up on the left, for some reason. Let's try it with a different label. How about the "english" field?

We'll try this:

english.textAlignment = UITextAlignmentCenter;

in this method:

- (void)tableView:(UITableView *)tv didSelectRowAtIndexPath:(NSIndexPath *)indexPath

Yes, that worked. I also reduced the size of the button. But, the background color of the label and the surrounding area are both gray. Actually, I've been thinking about setting a background images, similar to the android app.

We can try something like this from SO:

Add it UIViewController's view, somewhat like this:

- (void) viewDidLoad
{
UIImage *background = [UIImage imageNamed: @"background.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage: background];

[self.view addSubview: imageView];

[imageView release];

[super viewDidLoad];
}

I can just kind of copy copy and past it, more or less.

No, it doesn't work. It's covering up the contents of the view.

Actually, how is the splash page doing it? Ok, that's just an image - the text is part of it. It's called default.png.

Here's some more advice:

UIViewControllers don't have background images. Only views themselves have visual attributes.

UIView does not have a background image property. To display a background image, you usually simply put a UIImageView displaying the image in the view hierarchy so that it appears visually behind all other views. This can be done programatically or in Interface Builder.

But, no examples for doing it in code. What about the IB?

Ok, first I have this code:

UIImage *background = [UIImage imageNamed: @"background.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage: background];

[self.view addSubview: imageView];

[imageView release];


and also in my NextLevel controller, I have this code:

UIImage *img = [ UIImage imageWithContentsOfFile: imagePath];

if (img != nil) { // Image was loaded successfully.
[imageView setImage:img];
[imageView setUserInteractionEnabled:NO];
[img release]; // Release the image now that we have a UIImageView that contains it.
}


So, it looks like it's not allocating or initializing the image view, so I assume that's being taken care if in the IB.

Now, how is imageView declared?

@interface NextLevelViewController : UIViewController {
UIImageView *imageView;
UILabel *art_title;
UILabel *url;

}


@property (nonatomic, retain) IBOutlet UIImageView *imageView;
@property (nonatomic, retain) IBOutlet UILabel *url;
@property (nonatomic, retain) IBOutlet UILabel *art_title;

Ok, I have it set up in the variables and the declarations. Now, I just need to put the code in onViewLoad:

// UIImage *img = [ UIImage imageWithContentsOfFile: imagePath];
UIImage *img = [UIImage imageNamed: @"background.png"];


if (img != nil) { // Image was loaded successfully.
[backgroundView setImage:img];
[backgroundView setUserInteractionEnabled:NO];
[img release]; // Release the image now that we have a UIImageView that contains it.
}

Ok, well, it works, but again the image is displayed on top of the controls. I there a z-order or something?

Ok, it's editor, arrangement, then send to back if using the nib.

Actually, the original method might be easier, since I don't have to set anything up in the nib. Ok, it's the "sendSubViewToBack" method that does the trick:

UIImage *background = [UIImage imageNamed: @"plum_blossoms.png"];
UIImageView *backgroundView = [[UIImageView alloc] initWithImage: background];

[self.view addSubview: backgroundView];

[self.view sendSubviewToBack:backgroundView];

[backgroundView release];

Here's what it looks like:




I'm not totally happy - the metallic blue of the nav bar doesn't blend that well with the background. I wonder what my options are? I don't want to get into a whole thing with overhauling the UI, but I don't want it to be boring either.