Notice the Nib on the left displays a layout with 2 UILabels, 1 UITextView and 2 buttons. The Y coordinate of the buttons changes at runtime. What is causing this and how do I fix it?
Update #1 - Problem goes away when I shift to a iPhone Retina 4-Inch display.
Update #2 SOLVED - Problem goes away when by unchecking 'Autolayout' in the xib properties.
It looks like you're using iOS 6 and a storyboard with the 4-inch "tall" iPhone screen form factor simulated. Assuming you are using Auto Layout, you probably have a constraint added to one or both of the buttons that pins them to the bottom of their superview. When you then run your app on the 3.5" screen iPhone simulator, the buttons appear to "move up" as their superview has gotten shorter than on your storyboard.
Find the button with the icon pictured below while editing your storyboard, and click it to toggle the simulated screen size between the 3.5-inch and 4-inch form factors. You should see your buttons re-layout based on their constraints.
To set your buttons' spacing relative to the top instead of bottom of their superview, select both buttons and from the menu bar choose the Editor menu > Pin > Top Space to Superview. (Or use the Pin button pictured below directly from the storyboard.)
There's a good introductory tutorial to Auto Layout here, if you haven't learned about it yet.
Related
On storyboard, I dragged a container view into a view. I am not using auto layouts. I want to size it so that this view gets expanded and shrink depending on whether it's a 3.5 inch or a 4 inch screen (it should tag to the bottom of the screen). However the autoresizing mask doesn't seem have an effect when I run it in the 3.5 inch or the 4 inch simulator -- it says the same size. What could I do to correct it?
First off, make sure you're really not using Autolayout: open your storyboard, click on the File Inspector (which is the first panel to the right with the file icon), and make sure 'Use Autolayout is unchecked'.
Next select your Container View, go to the Size Inspector (which is the one with the ruler icon) and from the "Arrange" menu first select "Fill container vertically" and then "Fill container horizontally".
For me, this achieved the effect you wanted. I print out my Container View's frame in viewDidLoad and it changes depending on whether I'm on a 3.5" or 4" iPhone.
I'm making an app for iphone. My layout can be the same for iphone 4, 4s, and 5 but for the iphone 4 and 4s the only thing that change is space between buttons. I finished my app and i arrange all storyboard to run well on iphone 5. Now i only have to tell that when the app running on iphone 4 and 4s i have to change the space between the buttons in some views to get all buttons inside screen. How i can do this? I can use auto layout i think but i dont use this. Its possible to help me? I do the things right, doing the design first for iphone 5 and now adapt for iphone 4 or im doing the things in the wrong way.
Regards
The IOS6 autolayout it's still a bit "wild" and it will also disable the IOS5 compatibility.
If you don't use autolayout, you can still set some rules in storyboard at size inspector, like tide you buttons to the top or the bottom of the view, so you can control where they go when the screen shrinks.
A better way is to add subviews to your view, and allow the subviews to shrink and expand (also # size inspector in storyboard). Then add your buttons to those subviews, tide them to the top, bottom, or let them untied/free if they are placed symmetrically inside the subview.
You can simulate quickly with the form factor button in storyboard (right-down corner) to see where the buttons go when you switch the sizes.
These methods require zero lines of code, but more work with the storyboard.
I got an issue and I don't know why I have it and how to fix it! Maybe it is only a simple problem. Here are two screens:
There is something missing! Where is the Button? And why is the Map at full screen? It seems a bit strange can anyone help?
This is undoubtedly a function the screen going from a 4" screen when previewing your screen in Interface Builder to a 3.5" inch simulator/device screen.
If using autolayout (open up the storyboard, click on the first tab, the "File Inspector" and see if "Use Autolayout" is checked or not). Check your constraints. The map view should not have a height constraint (or if IB won't let you get rid of it, just drop its priority down to the lowest possible value...though if it adds the height constraint back in, it means that your other constraints are not fully qualified, such as neglecting the button's bottom constraint) but should have either a bottom constraint to the bottom of the screen or, better, to the button. Also make sure that the button's top constraint goes to the map view and that it has a bottom constraint that goes to the super view. Interface Builder makes this process far more complicated than it needs to be in its effort to add what it determines as missing constraints, IMHO, but it can work. It took me 2-3 minutes of fussing with all of the vertical constraints to make sure that they were both unambiguous as well as satisfiable at both screen heights.
If not using autolayout, check your autosizing masks (located on the "Size inspector" tab). You want flexible height and fixed bottom.
In IB you can toggle the appearance of your view from 4.0" to 3.5" by pressing the button. Just adjust your autolayout constraints or non-autolayout autosizing masks and then toggle back and forth between 3.5" screen and 4.0" screen to confirm whether everything is configured properly.
I've created a tableview, in the xib editor of the xcode. I've positioned the table view in the middle of the screen, it starts somewhere in the middle (100 pt. form the top) and should end a little bit lower (it's total height is 200 pt.). But when I run it on the simulator it fills the height of the TableView until the bottom of the screen.
Sorry for the nooby question. I'm just starting with iOS after years of java.
Screensot
Go to the Size inspector tab. and remove the bottom resize from xib just like this screenshot
Just go to file inspector tab and disable (un-checked) the Use Autolayout
I have a label sitting on the the top of screen in a tab bar controller app. When I align it to the top of the screen in Interface Builder (IB for short) and then run it, the label is about 20 pixels higher in the simulator - cutting off half the label or so. I have only seen this behaviour in tabbed apps. I have played with all the align, view mode settings without success and there is no custom drawing code.
Any ideas on why label is misaligned in simulator?
I have attached screen shots of IB (left - OK) and simulator (right - bad):
Thanks,
Serge
I guess , you are facing problem because of the following reason.
Since Tab area occupies some height from bottom,You have design your view such that top of the label should align with the top of the screen(like label should start by leaving some space (20px something) at the top).
Thanks to PJR above for giving the hints. The trick is to setup the 'simulated metrics' of both tab bar controller and each of its first view controllers.
1) The tab bar controller --> simulated metric.bottom bar should be set to none
2) All view controller --> All simulated metric props set to 'inferred'.
I have provided screen shots for a fresh tabbed project created in Xcode 4.3.1 which show what needs to be done.