iPad to iPhone image size/layout confusion - iphone

I've written an application for the iPad that I'd now like to get working on the iPhone (a universal application).
At the moment it runs in the iPhone simulator, but the UIKit elements are positioned using pixel positions - so a lot of them are offscreen. Additionally my UIImages are too big, and need to be scaled to fit the iPhone. How do I go about doing this?
Thanks in advance.
Some more information:
If I position a UIImageView using UIBuilder, the image displayed takes up the same ratio of the screen if displayed on the iPad or iPhone. Which is what I want, however I need to do it programatically.
If I create a UIImageView programmatically it will take up a much larger ratio of the screen on the iPhone compared to the iPad.
Edit:
My nib is actually empty apart from a OpenGL view. The OpenGL view is scaling fine.
I do create a few UIKit controls programmatically and this is where the problem is happening.

Probably the easiest way: make two separate xibs (1 for iPad, 1 for iPhone).
Start a new universal project and migrate the curent one into it, it'll take some time, but it'll save you a lot of headaches.

Related

xcode Use the same images and xibs for iphone and ipad

I am at the start of a new game. My last game was for the iPhone, and it had to double up for iPad.
Now with the iPhone 5 screen being larger than 4, and iPad and iPad mini, I want to program the game to display the correct size images. Is it possible to design large graphic for iPad and use the same images for iPhone (just display the image smaller when using iPhone 4 etc) or is it best to use two lots of images, iPad version and iPhone version? The problem here would be the size of the app. The App would double the download and install size as the graphics would be quite large, and this isnt something I want to do.
Is it possible to use the same xib for ipad and iphone, and then I could just get the code to detect the screen size and display the game correctly based on that?
Also, I have started the project as Cocos2d with Box2d with the latest download of Cocos2d. It starts off with just the code, should I work from the storyboard instead?
thanks
1) You cannot use single xib file for both iPhone and iPad (programmatically you can but that would screw your app).
2) While doing development using Cocos2D, my experience suggests do not use any xib or storyboard file. Else you will end up in a mess.
3) As far as the question for image size for different iOS devices is concerned, I would suggest you to go with separate images (only typical ones) for different iOS devices. If you have some buttons and simple curve based UI go for CoreGraphics so that you do not need those images. Only use images that are typical ones and use CoreGraphics for rest of the images

Converting an iPhone app to universal; bounds vs frames

I'm trying to convert an iPhone application to work universally (on both iPhones and iPads). I've managed to get the frame to re-size correctly, but it seems like the bounds (the part the user can actually interact with) isn't re-sizing appropriately with it. So, for instance, a UIWebView will be drawn in the correct dimensions, but I can only interact with it within a smaller confine the size of an iPhone screen.
Any thoughts what's going on?
How are you re-sizing this view? Is it in an xib with autoresizing mask set to properly expand? If so something else is going wrong. I just tried making a sample project with a webview, where the xib is sized for iPhone. I then marked the application as universal, and it runs just fine in the iPad simulator with all areas touchable.

The minimum number of launch images for a Universal App

I have a universal app which supports both orientations and all resolutions, so there are a bunch of possible splash images (iphone & ipad, portrait & landscape (left/right), retina & std display). But there is no sense to show anything except the background image as a splash image for my app. And the background is just a simple repeated pattern, so ideally I just specify a little 10x10 pixels image and tile the screen with it.
But as I understand it's not possible, and I need to provide a bunch of pre-rendered full-screen images. So I wonder what is the minimum number of images that is required for a Universal app? Will just one Default.png be enough?
In your case i would place 4 Default png's.
And yes. You need to pre-fill your 10x10 tiles in a (or multiple) big default.png files.
two for iPad (iPad / iPad Retina) and two for iPhone (iPhone / iPhone retina).
You need to set the base name in your app plist.
Look for Launch image (iPad) then enter there DefaultiPad (or something like this). Then you should place a DefaultiPad.png and a DefaultiPad#2x.png within your project resources.
Do the same for iPhone.
Look after Launch image (iPhone) in your app plist and do the same with a different base name.
Update 1:
You can also add Default.pngs for each device orientation.
Easiest way is to go with [Basename]-Landscapen.png and [Basename]-Portrait.png.
So in the case above you can place your files with the filename DefaultiPad-Landscape.png and DefaultiPad-Portrait.png
But this will also increase your binary filesize which – maybe for your 10x10 tile case - will not be worth doing so.
Because you are asking for the minimum:
Every app must provide at least one launch image. This image is typically in a file named Default.png that displays your app’s initial screen in a portrait orientation. However, you can also provide other launch images to be used under different launch conditions.
Source: App Launch (Default) Images
However, I also would suggest to use at least 4 (iPad + iPhone each in normal and #2x).
The minimum number you can provide is zero. If your app is quick to launch, you don't need to supply one. If your app is slow to launch, make it faster by putting heavyweight stuff on a background thread and get the UI (or a plain view with your tiled pattern) on screen as fast as possible.
You can't do it by just providing a small image and having it tile, you have to provide an actual, pre-made image for everything you want to support. In your case:
4 images for iPad (Landscape, Portrait, Landscape 2x, Portrait 2x)
2 images for iPhone (Portrait, Portrait 2x)
Left and right are the same image, unless you do something different with those orientations. Upside-down is the same too.
If you think that's a lot, wait until you see how many icons you need.
More info is at App Launch (Default) Images

why does an iOS universal app need to have two different xib files?

I'm a newbie of iOS development and I'm confused regarding universal app.
We can use the same code, same xib file for iPhone 4(retina) and previous iPhones, but why we should write two different xibs for iPhone and iPad? What's the difference?
For iPhone and retina iPhone, we use "point" instead of pixel for the coordinate. Why we can't use the similar method for iPhone and iPad?
For some simple apps, it is possible to design your iPhone UI and reuse the same xib file for the iPad. Just select your Target in XCode and copy the Main Interface text from iPhone / iPod Deployment Info to iPad Deployment Info. If you're using a Main Storyboard, copy that too. However, the iPad does not simply scale everything up from the 320*480 / 640*960 iPhone screen to the 768*1024 / 1536*2048 iPad screen. #elgarva correctly says that this would look terrible. Instead, the iPad version makes use of your autosizing masks to resize or reposition each view.
If all of your views can be considered to be left-middle-right or top-middle-bottom, this may work. If you have anything more complicated, you'll need to design a separate iPad interface.
Duplicating your iPhone UI is not just discouraged for aesthetic reasons - iPhones often end up containing a deep and confusing navigation tree for tasks that the iPad can fit on a single screen.
The main reason, is that if you just scale the elements on the UI to fit the larger screen, it wouldn't look nice... and you don't need to do anything for it to work, it automatically does it for you if your app is iPhone only and installed on an iPad (if the user chooses to).
Having a different XIB lets you rearrange your app, and think it so that you can take advantage of the larger screen. You can probably show more information on one iPad view than on 3 different screens on the iPhone... so, your iPhone app could show basic info and expand it when the user taps on it, while your iPad version could show all the information on load, plus extra graphics that look nice but aren't needed, and wouldn't make sense on the iPhone screen.
PS: If you're starting a new app, I strongly suggest you using the storyboard if your app won't have a lot of views... it's really easy to get started and it lets you see your app flow at a glance.
The ratina display just doubles the resolution of original iPhone. If you don't provide separate graphics for retina display, then system just doubles the resolution of resources.
The points are related to physical size of screen, which is similar in old and new iPhones.
For iPads, the screen size changes. This means that its dimension in points will be different from that of iPhone.
duplicating the xib file and renaming that as filename~ipad.xib is working great for me in ios6.1

converting iPad app to iPhone app

I'm currently working on an iPad-specific application.
Since I don't use interface builder, every view element is using CGRectMake with specific numbers for its position and size.
so I was wondering,
if I use the same exact code on iPhone, do these numbers scale accordingly?
or should I re-insert the numbers for all the view elements?
If the latter case, is there any easy way to change it all?
CGRect coordinates are absolute, so your subviews will not automatically scale down to the iPhone. If you run your code on an iPhone, you will see only the upper-left corner of your iPad layout.
You can pretty easily write a helper method to take the original CGRect values and scale them down for the iPhone layout. However, if you're also drawing text you'll need to scale down the font sizes as well (which probably won't work, so you'll still need to deal with the text in a possible not-automated way).
I'm doing essentially the same thing right now, writing a single app that runs on both iPad and iPhone and scales itself in code to the available dimensions. I'm generally setting up the view layouts as a float proportion of the available screen size, and then converting those proportions to CGRect before rendering.
Kudos on not using Interface Builder by the way - IB may be the most ridiculous atrocity I've ever seen in the programming world (even worse than classic ASP, which is saying something).
You'll have to change your numbers for your iPhone app. The points that CGRectMake uses are pixels and don't scale, with the exception of HD devices like the iPhone 4.
Honestly, the iPad is such a different device that your UI probably needs to be heavily modified to take advantage of the extra screen space.