适当调整iPhone5和iPad应用程序背景的图像视图的大小

Question

I'm using an Image View to display the background of my app, which is a single view app. It's basically a calculator for iPhone5 but the problem that I have as you may know that the app should be able to run in an iPad to be able to be approved for the iTunes Store, and what is happening is that the button part of my image get cut off and some important buttons are not displayed in the screen (when its running on an iPad)

I have been looking around but I can't find the proper way to achieve this and not the my image displayed with pixels or simple ugly..

1. If I set the image over Xcode not programmably, its when the image get cut off (I'm doing this over my Main.storyboard and then on my attributes inspector, and setting an image that I have created in this dimensions 640 × 1136 for my iphone5 app.

2. I tried this approach too, but I had some kind of success but not what I'm looking for which is to properly show a clear background (no pixels) or (ugly) and keeping the same alignment of my buttons in the ipad display (it could be retina, mini...)

Note : to accomplish this part, I have to remove the image from my Image View and leave it blank which creates a funny ugly image..

    UIGraphicsBeginImageContext(self.view.frame.size);
        [[UIImage imageNamed:@"myCal-bg-iphone5 .png"] drawInRect:self.view.bounds];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        //[self imageWithImage:thumbImage scaledToSize:CGSizeMake(30,30)]

        self.view.backgroundColor = [UIColor colorWithPatternImage:image];

3. I also tried way, changing the image of my Image View but I had not much success either.. it expands the image like crazy and in the ipad display it shows almost none buttons at all..

Note : I also tried with the same image that I'm providing for the iphone5 display

    CGRect screenBounds = [[UIScreen mainScreen] bounds];
        if (screenBounds.size.height == 568){
           [self.myBackground setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"myCal-bg-iphone5.png"]]];
        }else{
            [self.myBackground setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"myCal-bg-ipadMini.png"]]];
        }

Answer 1

There's a stretching property on IB.

You can set an area of image which will be stretched. For example, if you set X=0.9, width=0.1, the right 10% of image will be stretched with your imageView size.

Programmably? Use UIImage's instance method. resizableImageWith...

Answer 2

I made it work this way, if you guys have any suggestions please let me know..

I have a MACRO for detecting the screen size..

#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )

Then, this is in my viewDidLoad

UIImage *image;

if ( IS_IPHONE_5 )
    image = [UIImage imageNamed:@"myCal-bg-iphone5.png"];
else
    image = [UIImage imageNamed:@"myCal-bg-iphone4.png"];


 self.myBackground = [[UIImageView alloc] initWithFrame:self.view.bounds];
 self.myBackground.image = image;
 self.myBackground.autoresizingMask = UIViewAutoresizingFlexibleHeight;
 self.myBackground.contentMode = UIViewContentModeScaleAspectFill;
 [self.view insertSubview:self.myBackground atIndex:0];

At the end, what I'm doing is resizing the image that Im using for my iphone5 app as background to able to fit iphone4 which it also, fits in ipad but with the 1X or 2X display for iphone apps..

Note: I would love to be able to resize the whole thing.. example or in a few words, after doing this resize the buttons of my app get all in a misalignment for iphone4 or ipad becasue the screen size is different, so I'm wondering if there is a way I can control all of them and re-adjust to the new screen size/device?

Answer 3

If you use Xcode5 and above, just create new image in Images.xcassets

-Right Click Images.xcassets -> new Image Set (rename)

-Right click on work panel of your image set -> choose Rentina 4 in and iPad. Unselect universal image and iPhone (if not target iPhone 4)

-Drag each image associate with type

Then just set image name in code