This is my first iPhone app (iPhone 5), and it's basically ready to submit to Apple except...
I'm stumped on how to get my app to display on the iPad like it would in compatibility mode if it had a 3.5 inch screen. But it has a 4-inch screen, of course. It's an iPhone 5 app. And Apple has not yet provided a compatibility mode (that I am aware of) that will display the 4-inch screen properly in compatibility mode on the iPad. Instead, compatibility mode distorts and cuts off the 4-inch layout and smushes it into a 3.5-inch compatibility mode box.
I have read all of the stackoverflow Q&A's that I could find, plus many other web pages, tried numerous approaches, but all solutions end up with my iPhone storyboard layout distorted on the iPad and/or nailed to the top left portion of the iPad screen, or both.
I've been banging my head on this for days.
I sure hope someone can help.
You know how 3.5-inch iphone apps look on the ipad in compatibility mode? That is EXACTLY how I want my iPhone 5, 4-inch screen to look on the iPad, but with the 4-inch dimensions. I do not want the app to occupy nearly all of the iPad screen. Just a box that looks like the iphone 5 app, hanging right there centered in the iPad screen. I don't have a problem with figuring out how to connect things to my view controllers, fwiw.
I don't know how to put this any more specifically. If my question is unclear, perhaps someone could help me to restate it? This is NOT a duplicate of other stackoverflow topics I have been able to find. But I'm willing to be corrected.
Hellllp! :-) Thanks in advance for any light you may be able to shed. I'm hoping to avoid starting from scratch to create a usable iPad presentation for my iPhone 5 app.
iPad doesn't work like that. I believe the reason is that the 2x button would not scale properly for the 4 inch screen.
Either way, you need to make sure your app works well for the 3.5 inch screen anyway, this may be a good time to rethink some of the design of your app to make sure it works well in a 3.5 inch screen.
Related
I would like to have an iPhone app only for Retina 3.5. For one of my views I set Size to "Retina 3.5 Fill Screen". I added a toolbar to this view.
However, when I run the app on iPhone 5 the view is displayed Full Screen (like on Retina 4) and the toolbar is somewhere in the middle of the view.
Here are my settings from the XCode:
And here is a screenshot from my iPhone 5:
Any thought how can I make sure that the view is displayed as Retina 3.5 on iPhone 5 ?
Is there any particular reason why you don't want it to work for the 4 inch display? For iPhone five users (at least for me anyways) having an app that isn't built for the larger display is the most annoying thing ever. Those users pay to have more screen real estate and not making an app for them isn't taking advantage of that extra screen real estate. Also, apple made auto layout to be more versatile. This means in the future there are going to be even more screen sizes coming up, so sooner or later you will have to learn how to make the apps behave correctly using auto layout.
I am new to UI design, however a client wants an app ready for both iPhone 4s & 5.
I understand the iPhone 5 will create two bars if the image is not long enough. Many people said coding it at #2x will solve the problem. But I'm not sure exactly what that means.
Do I need to design two versions? What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Thanks.
First, in a couple of months you'll have to support the iPhone 5's screen size. Apple have announced that it'll be a requirement soon.
Adding a Default.png of the right size is enough to enable an app to support the new screen size but is likely not enough. You'll also need to make sure that all your views resize to fill the screen. There's the old "springs and struts" method and the newer "constraints." There are tutorials you can search for -- Stackoverflow is not a good place for that kind of thing. You'll also need to update any images.
In short, try it in the Simulator and see what happens.
Using #2x is referring to whether or not the image asset is being displayed on a 'retina' screen. For example, if you had a 50x50 pixel image, the 'retina' (#2x) version would be 100x100. This is because 1pt (point) is equal to 2px (pixel) on a retina screen.
There are a variety of ways you can determine is it is an iPhone5 or iPhone4.
In the viewDidLoad, you could check the self.view.frame.size.height to determine which background image to load based on the height of the screen. This would require you to have two different versions of the assets (not including #2x versions), i.e. bg_iphone5.png & bg_iphone4.png.
There are other ways to accomplish this, and people have explained it better than I have here - search StackOverflow and you will surely find what you're looking for.
What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Don't do this. Design for both.
Enabling Autolayout in .xib or .storyboard and adding a splash screen of 640px by 1136px enables iPhone 5 resolution support for the taller screen.
However, doing so, my app started to display some funny things where I assume autolayout is not a great idea.
I am wondering if there is a way to enable iPhone 5 device support, i.e. fix app's resolution without using Autolayout? Maybe I can set in the code?
If yes, then I will have no need to create 2 storyboards or nibs to support iOS5- and iOS6.
If you weren't using Autolayout before, you won't need to use it for iPhone 5 support.
When you're putting your interface together, you just need to check your bindings, and toggle between the taller phone size, and the regular phone size, as described here:
Xcode Storyboard displaying the new iPhone 5 screen size?
If your screens look fine in both screen sizes then you're done.
If you are doing a lot of coding to show your UI, then you'll have more work to do.
I found a great answer a couple weeks ago (link below). You will copy and paste your older iPhone Storyboard, rename it to reflect the iPhone 5, and press the button that expands the screen size, found on the bottom of the layout grid. Some minor coding adjustments might be needed, but this sample code is used in the AppDelegate to detect which device is running, and hence, which Storyboard to use. You'll just have to duplicate your interfaces, but these GUI changes can be made without code and without AutoLayout (also good to note that AutoLayout removes iOS 5--and lower--compatibility)
xcode 4.5 how to pick storyboards at launch
Sorry, perhaps because I'm not English, I don't know, but I cannot find any resource to a couple of questions; maybe I'm using not the correct words..
I would like to know something more about the different resolutions of the iPhone 4 and 5.
First of all: how can I tell my iPhone Simulator to simulate the "letterbox" graphics if I develop an app optimized for iPhone 4 resolution??
I would like to see how it appears but I have not the iPhone 5 yet
Second: what happens on the iPhone 4 if I design an app for the iPhone 5 resolution?
I mean, what does an iPhone 4 user see??
Can you please recommend me something article or similar to learn something more about these problematics?
Thanks
EDIT
I was making right!
The only things that makes the app running in letterbox mode with IOS 6 + iPhone 5 is the presence of the Default-568h#2x.png file for the splash screen.
I restar both the iPhone5 and Xcode, clean the project and compile it again. It works.
First: There are different simulators for each iPhone type. To change between them, open the simulator. Go to the Hardware menu bar item, then change which you want under device.
Second: You should be designing interfaces that scale however you can determine if you have a larger screen and change how it looks on the iPhone 5. If you are using standard components Xcode will try and upscale everything to look proper. However you should test to make sure it looks how you want on each device.
I'm looking at the iPhone 5 specs, and see that the screen resolution is 640x1132 or so, which would break some of my manual+storyboard interface layouts. I'm wandering how to make an app so it would either show on iPhone 5 in 640x960 screen (with black bars), or exclude my app from sale to iPhone 5 at all, as I do not want to worry about the interface breaking. Is this possible for existing apps?
Thank you for your input!
Unless you include a Default-568h#2x.png image in your application, it will not run at full iPhone 5 resolution.
In the Apple keynote on the 12th Sept 2012, they said all current applications in the app store would run on the iPhone 5 with without a problem using the black letterbox at the top and bottom.
The way to remove the letterbox is by providing a Default-568h#2x.png image, like duskwuff mentioned. If its not there, the device will run the application will run at 640x960.