I have been looking everywhere on here and Google, but I still have this weird issue that I can't figure. I have an app pictures below, with 4 UIButtons that have a background image applied:
When I resize/run on the iPhone 5, the top button resizes in a very strange way:
How do I get all the UIButtons to resize the same way with the iPhone 5? Is it possible? Do I need to use a different method?
I really hope this is not a duplicate, but I am completely stumped. If I change the UIButtons around in other positions along the UIView, a different one will resize, or strange gap spacing will show up.... I don't understand. Thanks for any help!
EDIT: I am using iOS 6 on Xcode 4.5. I am testing on an iPhone 4S and an iPhone 5. I have AutoLayout checked. If I use Pin (just found it) I can get the UIButton to keep its height.
To clarify my question. I want the UIButtons to resize so they occupy the same percentage of the screen.... I want the proportions to be the same, instead of simply adding a bunch of empty space. I hope that make it more clear
One of the features you can use is called AutoLayout. Its provided with Xcode to make it easier adjusting things for the 4 inch screen. You can find a good example here: http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
But as far as I know AutoLayout works only with iOS 6 which makes it "not so useful yet". I have been using a class called UIDevice, source of which can be found here: https://github.com/erica/uidevice-extension and check if the platform type is iPhone 5. I have it set up in a method which setups GUI when the view loads. Example of my implementation:
UIImage *backgroundImage;
if ([[UIDevice currentDevice] platformType] == UIDevice5iPhone)
{
//I have a 4 inch screen present
myButton.frame = CGRectMake(x, y, w, h); //Set the frame as you would like it to look on the iPhone 5
backgroundImage = [[UIImage alloc] initWithCGImage:[UIImage imageNamed:#"main_background-568h#2x"].CGImage scale:2.0 orientation:UIImageOrientationUp];
}
else
{
//I have a 3.5 inch screen present
myButton.frame = CGRectMake(x, y, w, h); //Set the frame as you would like it to look on the iPhone 3, 3gs, 4, 4s...
backgroundImage = [[UIImage imageNamed:#"main_background"] retain];
}
self.view.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];
[backgroundImage release];
Hope it clears a bit.
you should firstly disable the use AutoLayout this option is under the "Show the file inspector"
Related
I'm super confused about how the iPhone 4 and below apps are optimised for the iPhone 5. I'm a designer. How is optimisation done? Basically I have an app with loads of knobs and buttons and other interactive components. The way I see it, there are 3 options but what is the best way (or least, standard practice)?
1) Keep the layout the same for iPhone 5 but just add extra length on the background.
2) Scale the images/layout of components from iPhone 4 to iPhone 5 so everything is proportional.
3) Have completely separate images and different layouts for both. i.e for iPhone 5, I can move components to utilise the space more. The problem with this (and I'm not a developer) is that the interaction position of the components have moved so in effect, the iPhone 4 and 5 are separate apps?
To identify if it is a iphone 5 iphone, use this code in the file nameYourApp-prefix.pch:
//Macro iPhone5
#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )
find the nameYourApp-prefix.pch file in the supporting files, the code must be written between:
# ifdef __ OBJC__
//Code Macro iPhone5
# endif
and then just use the "if" to check that device, like this:
if (IS_IPHONE_5) {
//Code for 4 inch screen
}else{
//Code for 3.5 inch screen
}
putting the macro in the nameYourApp-prefix.pch, all classes see it.
With a UIKit application, none of your options are ideal. You simply use Springs and Struts or Auto Layout to have your user interface elements snap to where they should be.
The solution is the same when switching between portrait and landscape orientation. You define which user interface elements can grow and which ones can't, which edges to snap to, etc.
Run it on the simulator to test the layout if you don't have an iPhone 5 device.
For example, for a UITableViewController, the UITableView should grow vertically on an iPhone 5 so that you see more rows.
I almost always have at least one control that would be nice to grow given the room. If you don't, then you'll probably just have more empty space at the bottom of the view.
How iPhone 5 Optimization Works
When you tell iOS that your app is optimized for the iPhone 5 (through use of a cleverly named image file), iOS uses your existing Springs and Struts or Auto Layout (whatever you're using) to rearrange the interface.
The first choice is the easiest and works pretty well. You'd only need to worry about having specific assets for full screen images, and make sure that NavigationBar and TabBar (in case your app have one), remains on top and bottom respectively.
Scaling other images/components such as buttons, you'll change the general aspect ratio (which you probably wouldn't want), since iPhone 4&5 display sizes only differ in height.
For developing app option two is better. Although you dont have to change all the images for iPhone 5 some images will me same like TabBarItem. But you have to create background image different for iPhone4 and 5.
Read out this apple document to create user interface.
And you can differentiate iPhone 4 from iPhone 5 using this code
UIBtton * btn = [[UIButton alloc] init];
CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height == 568)
{
btn.frame = CGRectMake(60,60, 205, 175);
//this is for iPhone5
}
else
{
btn.frame = CGRectMake(60,50, 199, 170);
//this is for iPhone4
}
Here my button place and length are different for iPhone 5 and iPhone 4
And set your control's hight and width according to iPhone Screen Size.
If you didn't, adjust your view layouts with proper auto resizing masks or look into Auto Layout if you only want to support iOS 6 going forward. You have to check height of [[UIScreen mainScreen] bounds].
Example:
CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height == 568) {
// code for 4-inch screen (iPhone 5)
} else {
// code for 3.5-inch screen (< iPhone 5)
}
Note that [UIImage imageNamed:#"yourImage.png"] will only load either "background.png" or "yourImage#2x.png", it will not load "yourImage-568h#2x.png" if it exists.
Check Auto-Rotation API as Well.
In my FirstViewController I have write this code for switch background if device is iPhone4 or iPhone5:
Filename:
bg-for5-568#2x.png
bg-for4#2x.png
bg-for4.png
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *backgroundImage = [[UIImage alloc] init];
if([[UIScreen mainScreen]bounds].size.height == 568)
{
backgroundImage = [UIImage imageNamed:#"bg-for5-568h"];
}
else
{
backgroundImage = [UIImage imageNamed:#"bg-for4"];
}
self.view.backgroundColor = [[[UIColor alloc] initWithPatternImage:backgroundImage] autorelease];
[backgroundImage release];
}
When i lanch the app on my simulator, the background for iphone5 show double size, out of the view.
/* RESOLVED THANK YOU */
I am not sure if this is the solution for this problem as I am missing some infos, but:
At first: Strip the .png from your imageNamed: method. Since iOS4, you shouldn't do this anymore. The next thing is: What are the Names of your image? Note that an iPhone5 has a retina display, and your image should be named bg-for5-568h#2x.png but referred in the sourcecode as bg-for5-568h.
Besides that: In almost every case where your image isn't a photograph, what you are doing is a bad idea. And even if it is a photograph, simply use the bigger image for the iPhone 4 and 4S as well. It's not that much bigger, so the memory footprint isn't a problem here! Have a look on UIImageView's contentMode property. You can use this to adjust the position of the larger image. You also might want to check UIImageViews clipSubviews property to clip the image if it isn't fullscreen.
Trust me, in my company we had a loot of hooks for stuff like ~ipad, ~iphone, ~2x and even stretchable images. And all these hooks worked fine till the date, apple announced something similar or simply a new device. So I decided to not do these kind of hooks anymore. They seem to be very helpful in the first place, but the trouble you get when there is something new on the market isn't worth it!
You should append #2x suffix to all of your retina images.
In your case your image should be stored as "bg-for5-568h#2x.png".
Hope it will resolve the issue.
I would not advise doing this, what if Apple change their screensize again and you have to go back and rewrite all your code?
A simple fix is to use:
self.view.backgroundColor = [UIColor colorWithPatternImage:/* your image*/];
This could give you some issues with stretching or tiling.
I prefer using
UIImage* imageName = [[UIImage imageNamed:/*image name*/]resizableImageWithCapInsets:UIEdgeInsetsMake(top,left,bottom,right)];
In iOS 6 you can improve this further by defining if you want the image to stretch or tile. This allows you to create a border which won't change and then the centre of your image by default being tiled and filling the space of your imageview
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
How do I support the taller iPhone 5 screen size?
I am new to iPhone and I have a small doubt. Now the iphone5 screen height is 568 and previous iphone's screen height was 480. How can we implement apps for iphone5.Should we check views or controllers all the time for iphone5 and below versions? If am wrong Please correct me.
Thanks in advance.
here are the points
*if you want to make use of full height of the iPhone5 create splash screen that's exactly 640x1136 pixels in size and name default-568h#2x.png
*if you have problem with rotation check
a)window.rootViewController = firstViewcontroller (dont add view to your window)
b)implement the new rorate delegate function
*Use viewDidLayoutSubviews rather than viewDidLoad to set up widget sizes relative to the window
*You can manually check the screen size and load the right image like this:
UIImage* myImage;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
if ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f) {
myImage = [UIImage imageNamed:#"myImage-568h#2x.png"];
} else {
}
myImage = [UIImage imageNamed:#"myImage.png"];
or use catogary from the following GIT gist
https://gist.github.com/3719620
Just use
CGRectGetHeight([UIScreen mainScreen].applicationFrame)
CGRectGetWidth([UIScreen mainScreen].applicationFrame)
to get screen's height & width.
in your project (in XCode 4.5) goto "Supporting File" group (which is automatically created).
you got to use those Default#2x.png/Default-568h#2x.png files. !!
That is the key change required for the OS to size the window to fill the iPhone 5 display. Redth# has posted a writeup on this and other size-related tweaks you might need to make.
!!
Ok So I have this code, which allows me to put a background image in:
I would love to know how to size this, so on the iPhone 4 I can get a 320x480 size but make it nice with an image of 570.855.
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background_stream-570x855.jpg"]];
I have tried this:
UIImageView *image = [[UIImageView alloc]
initWithImage:[UIImage imageNamed:#"background_stream-570x855.jpg"]];
[self.view sendSubviewToBack:streamBG];
image.frame = CGRectMake(0, 0, 320, 480);
Which works, however the problem is it's behind the view, so I can't see it. I could make the view clear, but it has objects on it that need to be displayed.
Any help would be most apretiated
There are multiple options to put Views at desired location.
[self.view sendSubviewToBack:streamBG]; //Sends subview to last position i.e. at the last
[self.view bringSubviewToFront:streamBG] //Brings subview to first position i.e. at the first.
[self.view insertSubview:streamBG atIndex:yourDesiredIndex];//Put at desired index.
This is not answer to your question, though it may help you to set your imageview to desired location.
Hope it helps.
To answer part of your question about sizing. You need to use 2 different images for your app if you want the full resolution of the retina display (iPhone4) You should provide a 320x480 image (i.e. myImage.png) for older iPhones and one at twice the resolution, 640x960, for the iPhone 4. Use the exact same name for the high res version but add an "#2x" to the end (i.e. myImage#2x.png). In your code all you ever have to call is the base name (i.e. myImage.png) the app will choose the correct image based on the hardware its running on. That will get you the best experience on your app.
On the other part about the background view visibility, you could make the background color clear ([UIColor clearColor]) on the view that is blocking it. That would leave the content visible in that view but the view its self would be clear. Alternatively you could just insert the background at a specific index as #Jennis has suggested instead of forcing it to the back.
I have a custom table cell in an iPhone 3.x app to show basketball player data, including a picture. Here's my code from the table controller:
UIImageView *theImage = (UIImageView *) [cell viewWithTag:0];
theImage.image = [manager getSmallImageForPlayer: data.number];
theImage.frame = CGRectMake(14, 0, 30, 44);
theImage.clipsToBounds = YES;
theImage.contentMode = UIViewContentModeScaleAspectFit;
theImage.autoresizingMask = UIViewAutoresizingFlexibleHeight && UIViewAutoresizingFlexibleWidth;
theImage.autoresizesSubviews = YES;
Here's what it looks like in the iPhone SDK 3.0 simulator:
3.0 simulator screenshot http://img96.imageshack.us/img96/9550/imageintablecell30.png
Here's what it looks like in the iPhone SDK 3.1.3 simulator:
3.1.3 simulator screenshot http://img185.imageshack.us/img185/9269/imageintablecell313.png
So I have two problems:
In both versions, the image view starts at position (0,0) in the table cell, even though I set the frame to start at (14,0).
In the 3.0 simulator (and 3.0 device), the image is not shrunk down correctly, even though I set the image view content mode to "UIViewContentModeScaleAspectFit". But the same code works fine in the 3.1.3 simulator / device.
Who can help me with either of these two problems?
You could try creating your own UIImageView and adding it as a subview to table cell
I found the answer on the Apple forums: Using "0" as the tag number for the image view screwed things up; just changing it to "5" made both problems (image not scaled, wrong position) go away.