I am try to develop an application involving text views. If I use the 4 inch size, it goes out of the screen on 3.5 inch devices. If I change the size to 3.5 inch, fix it and change it back to 4 inch, there is this big, ugly gap above the text view.
I think the solution to this problem is multiple view controllers. One for the 3.5 inch and one for the 4 inch. But how would I do this? I am using Xcode 5, developing for iOS 7 and testing on an iPhone 4.
Thanks,
Romejanic
You dont have to use two view controllers. All you need are some Auto Layout Constraints or autosizing mask to resize your view for different screen sizes. Below are some helpful links.
Tutorial about auto layouts:
Part 1: http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
Part 2: http://www.raywenderlich.com/20897/beginning-auto-layout-part-2-of-2
Working with Constraints in Interface Builder
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraints/WorkingwithConstraints.html#//apple_ref/doc/uid/TP40010853-CH8-SW1
Apple Auto Layout Guide https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html
A similar question about how to set auto layout constraints for 4 and 3.5 inches screens
Resize view with Auto Layout between 3.5 and 4 inch form factor
If you are using .xib to create your UI then in the size inspector there is an Autosizing feature. You can hold the lower and upper bound for the text view and stretch the text view,i.e, click on the vertical arrow in the middle of the box. This will auto resize your text view according to your device height.
Related
I have issues with auto layout, when was presenter new iPhone my layout which was created for 5, 5.5, and at the 6.4 inch was locks not so nice.
Example iPhone XS Max:
iPhone 8:
So, how i can fix this, and this will locks nice?
Check your view constraint(bottom) It should be connect with Safe Area not superview
Form your question what I understand is that you want to distribute space according to screens.
I think you should divide cell layouts on to 3 parts and add controls of that part in to a views
then give all views equal height.
By doing this you will have full screen decided in three parts.
And at the end you can add constraints to controls which we added in view according to you requirements.
Note: Cell main content view height should be equals to screen height.
Hope this helps.
I have a 4 inch screen displayed in Assistant Editor Preview while I'm adding constraints to the view controller in Storyboard. Once I get everything situated in the correct position with the constraints and the layout looks good on the 4 inch screen, I then add another screen size to the preview window. For some reason, just by adding another screen size to the Preview window causes the layout preview on my perfectly good 4 inch screen to slightly be changed. Is this odd behavior or am I doing something wrong?
I had a similar issue, but instead with the 4.7 inch screen size. I found that using 2 things helped me keep the layout and constraints consistent across all screen sizes.
First, keep your storyboard default layout to universal (square) so the constraints aren't applied to one screen size only.
Second, when setting your constraints, use the "Reset to suggested constraints" button located on the third constraints tab.
I have yet to experience layout issues using this method. Hope this helps!
What i need is to develop View and want it sub views (button, images, label) to get resize according to the size of screen.
Programatically and with the help "Struts and Springs", i am able to fulfil my requirement by unchecking the autolayout functionality and applying struts and springs with some codes for logo to get resize:
if (iPhone4Or5oriPad==5)
{
self.imageLogo.frame = CGRectMake(TSImage_X_Co_ordinator, TSImage_Y_Co_ordinator, TSImage_WIDTH, TSImage_HEIGHT);
}
I want this to be simple i.e by applying constraints let all subview get resize to get same look and feel for 3.5 and 4 inch screens.
When i use Autolayout this is what it appears for 4 inch screen which is upto my requirement:
But The issue is with its appearance in 3.5 inch screens.
Then i applied constraints to all the subviews.
After applying constraints on 4 inch screen which is ok:
After applying constraints on 3.5 inch screen (Image logo get press more than needed):
Please note via coding and "Struts and Springs", i am able to develop same UI for 3.5 and 4 inch screens. I am eager to know: is their better way that i select all my subviews and apply some constraints and i get the same look and feel for 3.5 and 4 inch screens or is their any better way to do this?. Thank You
select the Image View and then under Attribute Inspector change Mode to Aspect Fill.
I have some pretty basic UI in my app.
Originally, on 4 inch display it looks like this:
But when I switch to 3.5 inch in story board,
the image view seems to change height,
and other controls remain on the same positions (which is what I wanted).
On 3.5 inch:
I don't want the image view to change size when on 3.5 or 4 inch mode,
how to achieve this?
Since this is somewhat easy UI, I was thinking to avoid using auto layout.
If objects remain on the same place, and keep sizes, when switching between
3.5 and 4 inch screen, I should be OK, because I can fit this UI both
on smaller and wider screens.
Hm, you can resize elements with this: photo
If you want the image size to remain untouched, and you are using autolayout, simply pin width and height in storyboard by selecting the image view and then adding the constraints like this (your numbers will be different):
Ok, so I want the positioning of the items in a view to re centre when going from 4 inch screen to 3.5 inch screen. How do I do this.
I've attached pictures for what it looks like on a 4 inch screen and what it looks like on a 3.5 inch screen.
Image 1: http://i.stack.imgur.com/P2KtI.png
Image 2: http://i.stack.imgur.com/V1TLb.png
So image 1 is the 3.5 inch version and 2 is the 4 inch version. As you can see on the 4 inch screen, all the items in the view are in the centre relative to the height. I want it to be in the centre for the 3.5 inch screen as well. How do I do this with autolayout?
If you're programmatically implementing the objects you could easily change the placement for the screen size based around the self.view.frame.size.height. You could take that information and correctly place your objects in the center by doing some basic math.
If you're using storyboards you can use autolayout to set constraints in IB to have all of the items stay where you want them relative to the screen size. When you select an item on your scene you can easily add autolayout constraints by going to Editor -> Resolve Autolayout Issues -> Add Missing Constraints.
Remember that if you are using storyboard's you can change which screen size you're viewing. In the bottom right of IB there are a selection of buttons and the one on the far left toggles between 4" and 3.5" screen sizes.