Background image too large in window/view

Question

I am playing around with a very small single view application in order to understand how views work. I am extremely new to iOS development. I am using an image i put together as a background for my only view. When running the app my background is enormous. It's as if it is zoomed in or scaled. I am following a Big Nerd Ranch tutorial for views and as such I'm using a subclass of UIView called HypnosisView. This is temporary. It may also we worth noting that the image I am trying to use for a background is precisely 640 x 1136 pixels.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.

    CGRect viewFrame = CGRectMake(0, 0, 640, 1136);

    HypnosisView *view = [[HypnosisView alloc] initWithFrame:viewFrame];
    [view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"BG.png"]]];
    [[self window] addSubview:view];

    self.window.backgroundColor = [UIColor blackColor];
    [self.window makeKeyAndVisible];
    return YES;
}

Updated code trying to implement a UIImageView using a 0, 0, 320, 568 frame. I also created a 320 sized background and then a full sized background and named them with the proper titles.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.

    CGRect viewFrame = CGRectMake(0, 0, 320, 568);


    UIImage *background = [UIImage imageNamed:@"[e-mail]"];
    UIImageView *backgroundView = [[[UIImageView alloc] initWithImage:background] initWithFrame:viewFrame];

    [[self window] addSubview:backgroundView];
    [[self window] sendSubviewToBack:backgroundView];

    self.window.backgroundColor = [UIColor clearColor];
    [self.window makeKeyAndVisible];
    return YES;
}

Answer 1

From my experience, if you want to set a background image via UIView's backgroundColor, you will need to size down the image to 320 x 568 before you use it. This is because view.backgroundColor or [UIColor colorWithPatternImage:] has no scaling property. Also, it would be good to scale down a background image to reduce the app size.

If you want to use an image of 640 x 1136, you will need to use UIImageView and specified its content mode. For example,

imageView.contentMode = UIViewContentModeScaleAspectFit;

Add the above line to your updated code and it should solve your problem.

Answer 2

If your view frame is larger than your screen, your image will be clipped if it too is bigger. You can either use a UIScrollView, shrink the original image down to size or scale your image with code like this:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.

CGRect viewFrame = CGRectMake(0, 0, 320, 568);


UIImage *background = [UIImage imageNamed:@"BG.png"];

UIImage *scaledImage = [UIImage imageWithCGImage:[background CGImage]
                                           scale:(background.scale * 2.0)
                                     orientation:(background.imageOrientation)];

UIImageView *backgroundView = [[[UIImageView alloc] initWithImage:scaledImage] initWithFrame:viewFrame];

[[self window] addSubview:backgroundView];
[[self window] sendSubviewToBack:backgroundView];

self.window.backgroundColor = [UIColor clearColor];
[self.window makeKeyAndVisible];
return YES;
}

(my scale factor is based on an image size of 640x1136)

Answer 3

I guess that you run your app and the image is lager the the window Screen, so you think that the image is actually lager than 640*1136? If i am right about that, i can tell you why. That's because in programing, iphone screen's height is 568 and width is 320, and in your code, you created a 640*1136 view which is twice as big as the window's frame. So at last it presented only part of your image.

Answer 4

When you call [UIImage imageNamed:@"BG.png"] iOS assumes you have two images, one called BG.png which would be roughly 320x586 and a second image called [e-mail] which would be 640x1136. You should create both images.

Alternatively you can use a UIImageView and set a scale mode. Then add that UIImageView to your window.