Layout differencies in Interface Builder and real device screen - iphone

I' m developing an application for both Retina 3.5 and Retina 4 screens (iPhone family). And I encountered with the next problem. I create a view in .xib file and set size to Retina 3.5 full screen.At the very bottom of the screen I placed a view with UILabel. You can see the view on the screen:
As you can see the view is at the very bottom. But when I run the application either on device or the simulator view with label on some reason doesn't fit the screen:
So the question - what can be the problem? How can I fix this? Why IB view sizes is not correct?

You've set your NIB to not have a status bar, but your app does have one. This means your NIB is sized at 480 pts high (on a 3.5" screen), when it should in fact be 460 (due to the status bar). This pushes your view down by the corresponding height (20 pts, which you can see at your cut-off label at the bottom).
There are a number of fixes for this. You could just tell your NIB it has a status bar, but a better option would be to set your view to resize dynamically according to its bounds. Exactly how you do this will depend on whether you're using auto-layout or not, but you'll want to check 'autoresize subviews' and make sure your view elements stay locked where you want them to.

Related

iOS Layout frame issue

I have a view which perfectly fits all other screens except iPhone 4s and below.At first I implemented scrollview for the view in iPhone 4s and below, but now scroll view has to be removed and the only go is to check weather the device is below iPhone 5 and adjust the frame so that content fits in screen. I have checked and tried updating frame of the view for models below iPhone 5.This doesn't work and the frame doesn't get updated as I am using auto layout. In short if the model is below iPhone 5 i want to update my y of the origin of the frame so that view is completely seen. Any methods ?
It is a little bit difficult to understand your question.
If you set the bottom layout constraint of the scroll view to be in line with the bottom layout guide of the main view, the scroll view should resize to fit the screen regardless of the model of phone.
It sounds like your issue is not with the scroll view frame but with the size of its content. I am not entirely sure though what exactly the issue is... i.e. what you are seeing versus what you would like to see.

Difference in layout of simulator and XIB

I have an issue in position of UI on window through XIB
I have added some images in XIB below navigation bar but when i run the app then in simulator its showing first two image under navigation bar i.e upper images and overlapped by navigation controller.
Use autolayout is disabled for view.
Position of first two images view is show X=0 y = 0 and x = 160 and y =0.
I think this is case in IOS 7 only
Please see the screenshots at
http://tinypic.com/view.php?pic=so9z5t&s=5
One more problem in below mentioned screenshot
http://tinypic.com/view.php?pic=a11tug&s=5
Image view is staring from y=0 but when running then on simulator its showing too much below. and black area is view
image view is sliding lower down.. very very mush odd behaviour of Xcode 5
In iOS 7 by defaults all Controller translucent property value is YES, so you set translucent property NO for this issue.
self.navController.navigationBar.translucent = NO;

Can't have a UIViewPicker well laid for iphone 4 & 5

I have one storyboard file for iPhone devices, and in one of the views there is a subview that contains a UIPickerView, and, when it runs on the iPhone 4 the UIPickerView is stuck at the bottom of the view as it should be, but when it comes to the iPhone 5, the UIPickerView appears a little above of the bottom of the screen.
If I fix the problem for the iPhone 5, the UIVPickerView won't appear completely when I run it on the iPhone 4. (half of it appears below the screen)
So is there a way to have the UIViewPicker well laid for both iphone 4 and 5 resolutions?
NOTE: I solved the issue by creating a completely new subview with the UIPickerView. Now it is well laid whatever the device is.
When creating the picker, you need to use the size of the screen to determine the location. It seems like you are just putting in the coordinates for the y manually, which only works when using one screen size.
If your view that you are in is the same size as the screen, as it most likely is but may not be, you can do:
int y = self.view.frame.size.height;
and use that as the y-coordinate of your pickerView.
Otherwise, you can find the size of the screen by using:
[[UIScreen mainScreen] applicationFrame].size.width //if in portrait
//or
[[UIScreen mainScreen] applicationFrame].size.height //if in landscape
Then you have to subtract the height of the navigationController from that if you have one.
If you're using autolayout, you should be able to change the constraints the picker uses to get it to stick to the bottom. Select the picker, click the "H"-shaped autolayout menu icon in the bottom right corner of the storyboard, and choose "Bottom Space to Superview". Then delete any constraints attaching the picker to the top of the screen. If that doesn't work, make sure that all of the picker's superviews have constraints to attach them to the bottom, too; you'll have to decide whether you want them to resize or slide down on an iPhone 5.
I fixed the issue. Not sure what was going wrong but I deleted the subview, then created a new one and added the UIPickerView. Surprisingly, now it is well laid whatever the device is.

AutoLayout problems in iPhone5

I have a Xcode 4.5.2 Project
I have a story board with with four UIViews.
Autolayout is Set to ON in the StoryBoard
Deployment is iOS 6
I want the letterbox to appear on top and bottom when running on iPhone 5 and not have my views resized when running on a iPhone5
When I run my app in iPhone5 - I do not see the letterBox - the UIViews are automatically stretched (incorrectly)
When I run the App on iPhone 4 - Everything is as expected.
Why does the letterbox not show as I would expect?
If for some reason you want your app to behave on iPhone 5 the way older apps do -- automatically letterboxed by the OS to 3.5-inch screen dimensions, just don't include a Default-568h#2x.png in your app. However, Apple expects new apps submitted to the App Store to support 4-inch screens, so you might not get very far with this strategy if you're expecting to distribute your app that way.
If you want to "support" iPhone 5 (and iPod touch 5th generation) screens, but keep most of your UI at older screen sizes... well, your users may not like it (and the App Store reviewers might not either), but it's possible using Auto Layout. The catch is that the root view in your window's (or rather, your view controller's) view hierarchy is always automatically resized to fit the screen -- but there's no saying that has to be the main container for your actual UI content.
In IB, with the editor in 3.5 inch screen mode, drop a new UIView into your view controller's root view. It should automatically size to fill the screen (460 points high).
Add a Pin > Height constraint so the view stays 460 points high no matter how its superview gets resized.
Add an Align > Vertical Center in Container constraint so the view stays centered when the height of its superview changes.
Put all of your UI inside this view.
Now you'll get white bars (change the color of the root view if you like) above and below your UI when on iPhone 5.
Note this only works as long as your UI doesn't rotate to landscape. I don't think you can do this kind of artificial letterboxing for both orientations using only one set of constraints, so if you want to support rotation you'll need to respond to an orientation change by switching out constraints programmatically -- pin height and center vertically in portrait, pin width and center horizontally in landscape.

Why do my UIImageviews get resized/dimmed when using UINavigation/UITabbar controller

I have an app with a primary view that has a UITabBarController with 5 tabs. Each tab is a UINavigationController.
In interface builder, I'm customizing the background of each page by dragging a UIImageView and setting it fullscreen. The image I'm setting to the view is 640x960. I am setting it to be Aspect Fill.
However, what I've noticed is that it is not where I would expect it to be. When navigating between by tabs, the image seems to be shifted down from where it should be.
Also, when pushing a new view to the navigation controller, the background of this new view isn't offset in the same way as the tabbar one, and it is also slightly dimmed.
How can I set my UIImageViews on each page to be aspect correct and fill the screen 1:1? Also, how does one disable the dimming when pushing a view to the navigation controller?
Thanks for any tips, and apologies if this is covered in another thread, I couldn't find an answer searching the site.
Assuming that you are using the IB to setup your views, you should select navbar/tabbar options to reflect what will be on the actual page. That should place your image correctly. I would also recommend that you make both a low res and hi res version of your background images -- 320x480 and 640x960. Of course, your size may need to be adjusted (reduced) for the navbar and/or tabbar which will leave less than 960 px of vertical height -- probably more like 920px if you are in portrait mode. Then you add #2x to the base name of the hi res version, this would account for older iPhone screens.
Once you have the image placed correctly, resizing should be unnecessary. You can have the image automatically resize width and height using the little arrows on the layout page -- that's a bit hard to describe. It can also be done in code -- if you still need that I can provide a sample.
Maybe you need to set all AutoresizingMask in order to resize the UIImageView properly on each view. And to main aspect ratio u should use either AspectFill or AspectFit on the contentMode.