I had a project A which is started before new screen size is introduced. After upgrade my Xcode to 6.0, in storyboard and IB, I still use 4.0 screen when developing User Interface. And when I tested the project on 4.7 screen and 5.5 screen, the view could scale automatically and looks the same as 4.0. For example, In IB, i have an UIImageView which size is 60x60 (In 320x568 View), and when I run it in iPhone 6 simulator, the image view size become 70x70.
Recently I created another project B which has quite different initial settings. (For example, there is no *-Prefix.pch file). I still developed User Interface in 4.0 screen, but when I tested on iPhone 6 simulator, the view didn't scale.
Therefore, I started run some tests. Both tests are developed in 4.0 Screen Size. First I created a view with label in the centre in Project A's Storyboard and run in iPhone 6 simulator. Second test I created the exact same view in Project B's Storyboard and run in iPhone 6 simulator. The result is quite different.
Result for test 1 (Project A):
Result for test 2 (Project B):
As we can see, when the code running in Project A, the view could scale properly to larger screen, but in Project B, it can't scale.
Can someone answer why they are different? Which result is normal? Because if the first test result is normal, then I don't need to worry about developing view in different size (Well still need to consider 3.5 inch)
UPDATE:
Seems like I need to make something clear in case using Auto Layout for both project and to control variables, I deselected Use size classes since project A didn't have that before.
UPDATE:
I removed every view controllers and do that again in both projects. And the results remain the same as before. I looked over source code of storyboard, only differences are view controller ids.
Thanks to Brad, the problem is that one project has launch image but another doesn't. To make UI auto scalable, Choose "Use Asset Catalog". If there are no launch images, it will show black but doesn't matter. Therefore, for 4 inch, 4.7 inch and 5.3 inch screen, we can just develop in one screen size and it will scale to others automatically without constraints.
Related
I've been away from Xcode for a while, so I may have missed changes in the latest couple of releases. The layout of views looks identical in the Storyboard, and on the simulators (iPhone6 and iPhone7), but different on my iPhone 6. I have no warnings or errors in the Storyboard, and I am using Xcode 8. The device acts as if it had a shorter screen than the simulator -- things that are spread appropriately on the storyboard or simulator, are squeezed together vertically on my phone. What is the reason for this difference?
Have you assigned launch images with the correct dimensions for the different form factors? An easy way to verify this is to add a print statement in a view controller to see what the bounds are for the screen. Verify that these values match what you expect for the device.
The following from Apple documents this:
Because device screen sizes vary, launch screen sizes vary too. To
accommodate this, you can provide a launch screen as an Xcode
storyboard or as a set of static images for the devices your app
supports. Using an Xcode storyboard is the recommended approach, as
storyboards are flexible and adaptable.
While not an official Apple site, this link also references this as a potential issue:
The launch XIB or storyboard is required to support iPhone 6 sized
apps.
Another possibility is that you have the screen zoomed in on the device. To change this, go to Settings > Display & Brightness and select Display Zoom at the bottom. Ensure that you have Standard selected. If you are zoomed in, then the device will scale down (A 6 behaves like an SE, a Plus behaves like a 6/7).
I have several custom UITextfields in my app. I started this app on Xcode 5 and ran on iphone 5 simulator. After Xcode updated to Xcode 6, I ran the app on iPhone 6 simulator. Now all the textfield positions moved up because of large screen size. I just wanted to know is there anything I could do so that the positions of textfields automatically get adjusted depending upon the iPhone models.
You need to rebuild your interface to handle the different screen sizes. In particular, you need to work with the AutoLayout feature to help determine how you want everything to scale/move/position based on multiple screen sizes. This can be done via the Storyboard (easier but sometimes frustrating) or in code (harder at first but more control later). I usually use Storyboards and it's worked great on several projects.
Do you want it centered and respecting your original layout and margins? a certain distance from the top or sides? everything scaled up appropriately? All these things can be done with AutoLayouts.
Check out the great tutorial here for more information:
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
I've created my project in Xcode 6 and I'm using default LaunchScreen.xib file. In iOS 8 everything is working fine, however when I'm testing on iOS 7.0.3 project seems not working with iPhone 5 - I've got black bars on top and bottom. As I've said, on iPhone 5 iOS 8 everything is working fine.
When I take a look into the xib file:
Size - freeform (changing to inferred doesn't help)
Orientation - inferred
Status bar - none
Top bar - inferred
Bottom bar - inferred
Any idea how to fix it?
--edit--
I've created a new project via pattern (Single View Application -> Devices (universal)), changed only project info -> iOS deployment target to 5.0. When I run on iPhone 5s iOS 7.0.3 simulator the screen doesn't get filled with application. This seems to be bug made by Apple.
On iOS7 or earlier, you have to use launch images. From https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LaunchImages.html
In iOS 8 and later, you can create a XIB or storyboard file instead of
a static launch image. When you create a launch file in Interface
Builder, you use size classes to define different layouts for
different display environments and you use Auto Layout to make minor
adjustments. Using size classes and Auto Layout means that you can
create a single launch file that looks good on all devices and display
environments. (For an overview of display environments and size
classes, see Build In Adaptivity; to learn how to use size classes in
Interface Builder, see Size Classes Design Help.)
If you also need to support earlier versions of iOS, you can continue
to supply static launch images in addition to a launch file.
Currently, I'm using Xcode 6 Beta 6 for this thread. I have this single view application for iOS 8.0 and iPhone devices only. That single view have the value Inferred under the Attribute Inspector > Simulated Metrics.
At first I didn't try to apply the Add Missing Constraints since I'm trying to layout the view to support a single layout both for 3.5" and 4" display. After running the current view - WYSIWYG on the simulator. That's fine and correct. When I tried to apply Add Missing Constraints, the changes applied to the base storyboard as well as to the device previews. But when I tried to run the application on the simulator, it wasn't the same.
What went wrong here?
I created a new project in XCode 5. And I run it on iPhone 5 (which has 4" screen) and a view doesn't cover all screen, but rather squeezed in 3.5" box (there are two black bars around my view)
I went to Main_iPhone.storyboard and checked that:
Use Autolayout is turned on on View Contoller
Use Autolayout is turned on on View
I tried Simulated Metrics, Size: Retina 4-inch Full Screen, Freeform and Inferred.
I tried to use button at the button to switch to Retina 4-inch form factor and 3.5-inch form factor.
Nothing makes a difference and it still shown as 3.5" (black bars around my view).
How can I make sure that iPhone storyboard occupies whole screen on iPhone 4-inch phone?
Update 1
None of solutions in this question: Xcode Storyboard displaying the new iPhone 5 screen size? solved my problem. BTW. That question was for pre XCode 5.
To enable your apps to work with iPhone 5, I suggest you to do two things.
First you need to add a retina version of the launcher image. It should be named Default-568h#2x.png.
And second use Auto Layout and make sure you have your autoresizing mask set up correctly for all your views.
I had the same problem, could not resolve it by any of the above methods. So what I did is copied the Content.json files from old project (where 4-inch was working) into the Images.xcassets Applcon.appiconset and LaunchImage.launchimage directories respectively. Then selected in the project setting in General under App Icon selected Source as AppIcon and in Launch Images in Source selected LaunchImage. It worked. Maybe useful to someone.