iPhone4 UI design vs iPhone5 - iphone

I have a next problem. I was searching in Google and here but still not found correct and proper solution. I have application which has to run on iPhone 4 and on iPhone 5. As we know iPhone 5 has a different screen size then 4th one. Let's see simple case, I have a view controller with background image. Image is size sensitive and if I will stretch it it will look ugly. So I have two different images one image for old 4th resolution and and another image for new 5th one. The question is what is the best and let's say "native" way to implement correct image showing on the both devices.
I see simplest way to do it is making runtime checking which device currently used and set proper image name to UIImageView. But I find it ugly. Does somebody know the correct way to do it?

You can use:
#define IS_IPHONE5 (([[UIScreen mainScreen] bounds].size.height-568)?NO:YES)
Then,
if (IS_IPHONE5) {
//iPhone5
} else {
/older devices
}
Source: How to get the actual [UIScreen mainScreen] frame size?

Related

Create images for iphone and ipad, 4 images?

When i create an image for an ImageView to iPhone, iPhone retina, iPad, iPad retina, should i create 4 images ?
For example for a coin image that i use ->
coin.png
coin#2x.png
coinIpad.png
coinIpad#2x.png
Can i create just the most-size image (imageIpad#2x.png) and inside Xcode select Aspect Fit ?
[UIImage imageNamed:#"imageIpad#2x.png"];
Which is the common way to do this?
To answer you question as you asked it: Yes you can just use the highest resolution image only and have it fitted to the size that each device currently needs. You can to that by just initializing the UIImage with the named resouce, as you suggest, and assign that to an UIImageView with an appropriate frame in each device type.
Would I advice doing so? No!
Why?
The naming conventions (~ipad and #2x) make it easy for you as programmer to provide perfectly fitted artworks for each resolution.
You or your designer respectively are in full control over how the artworks will be displayed
It saves memory and cpu and therefore even a bit of battery power.
When it comes to very detailed or small graphics that don't rezise well, then you can consider creating slightly different ones for the lower resolutions that suit better for their current resolution
So if you just want to downsize a high-res image then download something powerful but cheap like gimp and reszise it once yourself (instead of having thouthands of mobile phones do it again and again), save them with poper names and include them in the boundle.
Creating only one image and relying on the device to resize it is:
Inefficient - you're going to be using a lot of resources at runtime that should be busy doing other things
Not the intended way - you should create 2 images (retina and non-retina). If you wish to use another set of images for iPad, you should either check which device you're running on at runtime by using:
[[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad
or by splitting your project into 2 separate targets and adding the 2 sets of images separately to their correct target.
All you need to do is to put coin when you want to call it.
For example:
[UIImage imageNamed:#"coin"];
But when put the images in the resources folder, name it as coin#2x.png for retina image and coin~ipad.png for ipad images.
Xcode will call the appropriate image accordingly.
If you just want to have resizable assets that you can create once and use in different situations - have a look at this UIImage+PDF category that helps you use a PDF, which as a vector format can be scaled to whatever size without loss of quality.
Cacheing has been recently added, which should be a help as well.

How to make the design of the application compatible with iPhone4/iPhone5/iPad? Is there any shortcut way?

As i am working on an application which i need to develop in iPhone4/iPhone5/iPad. Can somebody tell me complete flow or Tutorial link to make the application compatible with all above platforms. There is a way of auto resizing and auto layout and i don't know how to use this?
According to me, I have two ways to implement this concept, Either by taking three different xib files for iPhone4/iPhone4s/iPhone5 or by setting the frame of the layouts pro grammatically after detecting the device.
Can you please tell me any other easy way for implementing this concept?
If you want to make your design compatible/migrated to iPhone5, please read these documents and questions:-
Lower Version apps compatible to iPhone 5
Guide Lines
Helping Question
It'll help you to achieve the goal.
Thanks.
If you don't want to use three different xib files for each, then you have to try this method
CGRect screenBounds = [[UIScreen mainScreen] bounds];
after this set your code according to device
if (screenBounds.size.height == 568)
{
// code for 4-inch screen
}
else if (screenBounds.size.height == 1024)
{
//code for ipad
}
else
{
// code for 3.5-inch screen
}
Is there any shortcut way?
That depends a bit on how you want your app to look and work. If you want the UI to be about the same regardless of screen size, then you might be able to get away with merely adjusting the sizes and positions of the different elements. Far more often, though, you'll want to use the available screen space to best advantage, so you'll have more and different content on a larger screen than you do on a smaller screen. In these cases, there really isn't any shortcut: you need to think carefully about how the app will work on each device.
Even if you do want essentially the same UI on all devices, there's still a lot to be said for using separate .xib files for each. Once you know which UI elements you want on the screen, putting together a .xib is pretty quick and easy. Having separate .xibs lets you fine tune the UI for each size. In reality, you'll often need only two .xibs for each screen -- an iPad-sized .xib and an iPhone-sized one. The autolayout system is more than powerful enough to let you adjust between iPhone 4 and iPhone 5 sized screens.

iOS convert coordinates from iPhone to iPad compatibility

When I first started programming for iOS (with Cocos2d) I used a bunch of hardcoded coordinates based on 320x480 screen size for the iPhone. I just realized that I need to include at least a basic version of iPad and the iPad mini.
I have read these:
cocos2d (but i'm not sure if this is the best way?)
cocos2d:Convert iPhone App to Universal App
converting coordinates:
Convert coordinates from iPhone screen size to iPad screen size
converting iphone to ipad:
http://iphonedevelopment.blogspot.com/2010/04/converting-iphone-apps-to-universal.html
Apple's documentation on creating universal app:
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/AdvancedAppTricks/AdvancedAppTricks.html#//apple_ref/doc/uid/TP40007072-CH7-SW24
is there an easy way to convert the graphical display from iPhone to iPad without editing every part of my code where I used a hard coded value? (50 spots, all in 1 file)
what's the best practice for future coding with iOS/Cocos2D coordinates? should I do
#define SPACE_SHIP_X_IPAD 384
#define SPACE_SHIP_X_IPHONE 160
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
`[ship.setPosition ccp:(SPACE_SHIP_X_IPHONE,0)];`
} else {
`[ship.setPosition ccp:(SPACE_SHIP_X_IPAD,0)];`
}
(by the way, will someone who knows how to format this code with the "#" sign, plz teach me how to format the above code?)
is it recommended that I create 2 different apps - one for iphone and one for iPad? or this universal approach of only 1 app, and then selecting the distribution type when I submit to Appstore?
are Mac versions of apps the same distribution channel as the app store for iPhone and iPad? what are the advantages or disadvantages to distributing on Mac as well? (i'm guessing it's not good because graphics would have to accomodate something liek the massive iMac?)
just to make sure - my app file (which doesn't use anything iphone specific like calling) will work on the iPod and iPad Mini without ANY extra work, right?
Any help would be greatly appreciated. I will upvote all good attempts
It looks like your approach is overly complicated. Making a universal application typically involves never hard-coding position values, but rather calculating these position values based on the bounds of the device.
For example:
//Button in center for universal
CGPoint buttonOffset = CGPointMake( ([[UIScreen mainScreen] bounds].size.width - button.frame.size.width) / 2, ([[UIScreen mainScreen] bounds].size.height - button.frame.size.height) / 2);
button.frame = CGRectMake(buttonOffset.x, buttonOffset.y, button.frame.size.width, button.frame.size.height);
Use similar concepts to create buttons (or ships) with positions that are relative to the screen bounds. This will save you a lot of time and grief.
One thing to note is that the "bounds" of the screen will not factor in the device orientation. If you want to support multiple orientations you will find it useful to create a utility method to handle that logic for you.
Something like:
+ (CGSize) deviceSize {
CGSize size;
if(UIDeviceOrientationIsLandscape([[UIDevice currentDevice] orientation])){
size = CGSizeMake([[UIScreen mainScreen] bounds].size.height, [[UIScreen mainScreen] bounds].size.width);
} else {
size = CGSizeMake([[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height);
}
return size;
}
I know you want an easy solution so you don't have to change all your values but I would recommend biting the bullet and changing the values. It will help you a lot in the long-run. Not only for this application but the practice will help in any application you create in the future.
Is it recommended that you create two different apps for universal? No, it is not recommended. You can select "universal" when creating the xcode project and also change it in an existing project. You will not need to create two builds or binaries either. Apple will recognize it as universal and make it available in the store for all devices. However, you will need to create multiple versions of a splash screen to accommodate different screen sizes and pixel densities.
are Mac versions of apps the same distribution channel as the app store for iPhone and iPad? Sort of... you can deploy to the app store and you gain more freedom since you can package and distribute the OSX binary yourself -- but you will have to create a separate app since you will most likely be using CocoaTouch libraries which are not supported on the mac. You will want to preserve functionality that does not use CocoaTouch such as your Rendering and Game Logic. If you are deploying to OSX, the large screen sizes will be the least of your concern. Advantages: Wider Audience. Disadvantages: Requires a lot of planning when architecting your app/game so you can reuse as much code as possible and cater to all screens.
just to make sure - my app file (which doesn't use anything iphone specific like calling) will work on the iPod and iPad Mini without ANY extra work, right? Well... some extra work With some additional image assets for home screen icons and a splash screen you will be good to go.
I do this with data files shared through iCloud so that data appears in the right place on both devices... X *= 768 / 320 and Y *= 1024 / 480. To go back to iPhone from iPad resolution, just divide instead of multiply. It's simple and precise. Then if you need to, record which set of coordinates your data is configured for.

can not display on external display properly

I try to display an app in external display, actually, it is a giant Iphone monitor (height is 1.5 m and wild is .5m ) and running into an issue. It is that my app is displayed in landscape mode with height is 320px and wild is 460px. However, in the giant iphone, my app is half of screen. How can I make it fit 1.5m x 0.5 m. Are there any ways to trick an system so that I can display a full screen in gian Iphone monitor even though the height and width of actual iphone is 320 and 460 respectively.
Please help if you have any ideas. All answer are welcomed here. Thanks
Be sure you scale your output appropriately for the external display. Something like this should get you on your way:
// if an external screen is attached it will be in the array of screens
if ( [[UIScreen screens] count] > 1 )
{
UIScreen *screen2 = [[UIScreen screens] objectAtIndex:1];
CGRect screenBounds = screen2.bounds;
NSLog(#"Should scale external output to fit in %dx%d",
(int)screenBounds.size.width,
(int)screenBounds.size.height);
}
There's lots of good information in Apple's View Programming Guide for iOS and the reference for UIScreen.
I guess it's worth mentioning that you are very unlikely to get any UI interaction (touch events, etc) from an external display. Most displays aren't touch displays and I'm don't believe touch events are even supported on an external display. So, any configuration of the information displayed on the external display will need to be controlled from the iOS device.

Image tiles on iPhone 4

I am very new to iPhone development, and I am working on modifying an app which was written a year ago. Recently with the release of the new iphone 4 we have noticed that the screen which was previously displaying an image just fine, has not started to tile that image. And instead of one large image I am now seeing 4 smaller ones. I have tried increasing the size of this image but that does not help. Anyone know what this can be? Resolution? How do I fix this?
Thanks,
Natasha
You need to create another double-resolution version of the file with #2x in the filename. For example, if your original graphic is
tile.png
You need to create your double-resolution one as:
tile#2x.png
This will be used on the iPhone 4 and should fix your problem.
Update
If you have no control over the images you will have to detect whether you are running on a high-resolution device and set the contentScaleFactor property on the image appropriately. Something like this:
UIScreen *screen = [UIScreen mainScreen];
if ([screen respondsToSelector:#selector(scale)] &&
[imageView respondsToSelector:#selector(setContentScaleFactor:)]) {
/* Set image view's scale factor to that of the native screen */
[imageView setContentScaleFactor:[screen scale]];
}
This uses an imageView, but it sounds like in your case a view is using a [UIColor colorWithPatternImage:...] on its background, so you may have to set the scale on something else. This might affect the position of subviews as well.
Why are you not able to create a new #2x version of the image and include it in your bundle?