I've been working on iOS apps for many years before a longer pause. On my new project I decided to try the new features of the Interface Builder and Storyboards (Swift 3, Xcode 8.2.1). So I've got a working app with precisely defined constraints for all supported devices, following the "regular" and "compact" width/height paradigm. Everything seemed to work and I loved the approach.
I was finalising the first views (and their controllers) for the iPad simulator before I decided to run the app also on an iPhone simulator to check for the layout. It turns out that all works as expected but for ONE view.
This view has the following behaviour:
If in the Storyboard canvas (and even the Assistance Editor, which
looks the same for me, by the way) I selected "view as iPad 9,7" and
run the iPad simulator (of the same screen size), the layout works the way it should.
If in the Storyboard canvas I selected "view as iPhone 5" and
run the iPhone 5 simulator, the layout works the way it should.
If however I select "view as iPhone 5" and run the app on the iPad simulator OR any other false combination, the following happens:
Once the view appears (custom segue, or default push. All the views are inside a navigation controller) it shows the content scaled down/up to the size of the preview size I selected on the Storyboard. Then it animates (scaling from the top left corner) to fill the screen. For instance: If I select "view as iPhone 5" and run on an iPad, the view appears in the left top corner of the iPad simulator having the size of an iPhone 5. Then it scales up to fill the screen having the exact layout I want.
One should add that inside this one view, the layout for all devices looks the same, merely scaled down/up. So it really just comes down to wrong view size.
This all happens ONLY to one of my views, which I all have designed and laid out (constraints) the same way. This happens EVERY TIME, and it happens on the simulator and on real devices.
I was trying various suggestions from the web for the last week and I failed to find any topic (on Stack Overflow) that was able to help me.
I'm lost. I'm glad for any suggestions!
Thank you.
After removing everything from my view step by step and building every single step I found that I had a self.view.layoutIfNeeded() inside my viewDidLoad() which was inside an animation block animating a single subview, but for some reason lead to aforementioned issues. Removing it solved the issue.
Related
I am using storyboard and xcode 4.6 for designing Iphone app. I have very complex viewscontrollers and some of the subviews(like scrollview's and autocomplete tablviews) have generated dynamically. When app build for iphone 4 everything works fine. But, when using Iphone(retina-4 inch) simulator, I noticed that there is space at the top and bottom of the screen and also some of the subviews (like scrollviews and autocomplete tableviews ..) misplaced and covering other subviews in that viewcontroller. I tried to search and found some are suggesting to design/load two xib files based on screen size. I have enabled both autoresize masks and autolayout, but still the problem persists.
How to design a single storyboard file that is feasible for both Iphone-4 and Iphone-5.
Reference:How to develop or migrate apps for iPhone 5 screen resolution?
Update attached screenshot:
Storyboard file
Thanks in advance...
use the button in the picture below to toggle between retina 4 in and 3.5 inch. use the autosizing tool under the size inspector on the top right to get views to position themselves correctly.
I just finished up my storyboard based iPhone app (I'm developing on an iPhone 5). Just before submitting it to the Appstore, I thought of making sure everything looks fine on an iPhone 4. So I launch my app in the simulator with iPhone 4.
And what I see baffles me. Basically every single view object, particularly textview, are stacked on top of each other. Basically everything scrollable's messed up. In some textviews even, the initial scroll position has been set to say 100px, which means that the textview's showing the middle of the content in a textview and there'sno way to scroll to top.
Every time I make an ajustments to the storyboard view to fit the iPhone 4, the view on iPhone 5 instead looks weird. Most of the time, the stacked objects on iPhone 4 simulator can't even be unstacked.
Am I the only one experiencing this? I cant find any post about it. Could it be that there's something messed up with my simulator? Any setting I've missed? The only solution I can think of now is to have a seperate SB for iP4 and iP5, but I really would rather not go through the pain of doing that. Any comment or idea is greatly appreciated.
How it looks
You need to make sure that your autosizing struts and springs are set appropriately.
The views need to either dock to the top, or bottom and the views that you want to stretch should have the flexible vertical set.
I am creating a simple calculator app, following the tutorials from Stanford - first assignment.
The actual content is not that relevant, the only issue is that I have a UIRoundRectButton in the storyboard, which displays a fixed text (like "sqrt").
When I run it in the simulator (iPhone 5, iOS 6) - the text in SOME of the buttons gets cut off.
Screenshots:
Any help?
It looks to me like you're designing on a 4 inch xib but running on the 3.5 inch simulator, Autolayout will be pinning your lower buttons to the bottom of the screen and they will be getting squashed. Try one of:
Running on the 4 inch simulator (device--> hardware menu)
Switch to 3.5inch view in the storyboard (the grey icon on the bottom with the triangles above and below it
turning off Autolayout (on the file inspector of the storyboard)
Defining your constraints properly so they are all relative to the top of the view.
Those tutorials were written before Autolayout and the 4 inch display. You probably just want to focus on the tutorial content at this stage, so the last option is probably too much, but I have a blog post here discussing editing constraints in IB.
Please uncheck "Use Autolayout" option under "Show the file inspector" for XIB.
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
I'm getting my app ready for the iPhone 5 using the simulator and I've found a weird issue where a couple of my buttons, in one of my views, don't work in the iPhone (Retina 4-inch) simulator, but work fine in the iPhone (Retina 3.5-inch) simulator. The buttons simply don't do anything when they're tapped. Has anyone else experienced this issue?
I having a difficult time figuring out where to start with this one. Any suggestions on where to start?
Thanks so much in advance for all your wisdom!
You need to edit your MainWindow.xib and enable "Full Screen at Launch". For a more detailed explanation, see Apple's docs:
Important: When creating your window in Interface Builder, it is
recommended that you enable the Full Screen at Launch option in the
attributes inspector. If this option is not enabled and your window is
smaller than the screen of the target device, touch events will not be
received by some of your views. This is because windows (like all
views) do not receive touch events outside of their bounds rectangle.
Because views are not clipped to the window’s bounds by default, the
views still appear visible but events do not reach them. Enabling the
Full Screen at Launch option ensures that the window is sized
appropriately for the current screen.
Complete document from Apple
For me, the solution was to set the size ("Simulated Metrics") to "Retina 4 Full Screen" for the MainWindow.xib. I did not need to alter the size of the other screens (they are still set to None). After changing the MainWindow.xib the bottom area becomes clickable again...
The problem was caused by another control overlapping my buttons due to the way the springs and struts were setup. Adjusting the z-order of the buttons fixed the issue. Thanks, all!
There are two solution to this problem :
If you are using MainWindow follow these steps :
a. Select MainWindow.xib.
b. Select Full Screen at Launch from Windows option available in Attributes Inspector.
If your application doesn't contain MainWindow then just add:
self.view.frame = [UIScreen mainScreen].bounds
in ViewDidLoad.
I solved my prob.
view .origin for 3.5 inch and 4 inch screen are different so, when writing common code for both we need to take care at giving CGRectmake(x,y,w,h);
Set temp. diff background color of diff view so you can check if any view is overlapping or not, to fetch event in 4.0 inch.