Change view width with autolayout and size class enabled - ios

I have done sample screen for iPhone5s with autolayout and size class enabled in swift.I have a view at top of the screen which has 320(width).How do i automatically increase width of view for iPhone6 and iPhone6Plus screen.any help will be appreciated.thanks in advance.

If you want the dimensions of your view to follow the same width as the one of the iPhone it's running on, in Interface Builder, position the view, size it so that it basically looks as you want it to look, and then add the constraints, ctrl drag from your view to it's superview and add "Leading space to container margin" and "Trailing space to container margin" constraints.

You don't set the width. You make constraints to the left and right edges of the superview so it will always be the width of the screen (assuming that the superview is the controller's self.view).

Related

Top space on device rotation

I have the following constraints on my UIView in portrait mode:
And landscape:
This is screenshot of the ViewController when I open it first time:
Top space is OK.
Then I'm rotating the device to landscape:
Do you see that white space on the top?
And when I'm rotating it back to landscape, the space still stays:
Why and how to fix it?
Try to uncheck Adjust scrollview insets Of viewcontroller attribute
Source Of Image: Here
You might have set TopConstraint of your view With margin.
Uncheck box for Add to Margin.
Considering black view about the imageview which contains Back button is a UIView (says, viewNav)
Constraints for viewNav:
if you'r changing the height of viewNav of rotation then use size classes as see below and click on landscape option. Now select your navView and click on height constraint and give c-c constraint like this
Constraints for UiImageView:
If you'r image covers the complete screen the give bottom constraint as 0.
This fixes every thing.
If you are using native navigationBar then you there will be no viewNav and now constraint for image will be
On giving top constraint, don't forget to select use standard value for top constraint then enter 64. Bottom and height is according to your need whatever you prefer.

iOS - Scrollview and equal widths does not work

I'm facing a problem with Autolayout. I want to setup a simple scrollview controller, with the following pattern View -> ScrollView -> View -> "All my content" explained everywhere when searching on the web.
Here is my Storyboard :
In theory everything is correct, but the Equal Widths constraint seems to behave very strange. I made a videos for you to be able to see :
https://www.youtube.com/watch?v=lAezdxg5L4E&feature=youtu.be
PS : The view controller is not linked to a *ViewController.swift, so there is no self-made code behind this controller.
How to solve that ? Thank you.
You have laid out your constraints for the wCompact hRegular size class, which applies to all iPhones in Portrait. When you switch to landscape, none of the constraints are installed which explains your issues. Convert your constraints to wAny hAny and all will be good.
After recreating your problem, I did this to convert to wAny hAny:
I went to each constraint and turned off the tick mark next to wC hR installed. You'll also need to do this for the ScrollView and Container as well.
Then I set the size class back to wAny hAny.
Then I went back to each constraint and ScrollView and Container and turned on the tick next to installed and deleted the wC hR one by clicking on the "x".
If you do this, your green Container view will appear in both Portrait and Landscape and it will scroll vertically.
Two hints:
If the reason you set wCompact hRegular was that you find it distracting to work with a square viewController, then click on the viewController in the Storyboard and set the Simulated Metrics Size to iPhone 4.7-inch in the Attributes Inspector.
You should really set Equal Widths between the Container and the ScrollView instead of setting Equal Widths between the Container and the top level view. In your case it doesn't matter because the ScrollView and its SuperView have the same width. But if your ScrollView wasn't the entire width of the screen, then you'd want to constrain the Container width to the ScrollView width to prevent horizontal scrolling.
If you are talking about the contentView(container in your app) of the scrollView if doesn't work like that.
eg. if you set contentView inside scrollview to equal width and height of the scroll view if wont work.
If subviews of containerView is complicated, normally I design contantView outside of scroll view. (see screen shot) and set it programmatically.
Or I just set auto-layouts equal width to both scrollView and container of scrollview too. (see screenshot)
I see you use size class, possibly you don't have contraint for iphone landcape

How to force a MapView to cover all space on ViewController?

I need to show a map view to cover all spaces on the screen. I have added constrains as follow:
First I added this:
But it didn't work. Then I tried suggested constrains or tick Width and Height in above picture but still I have 2cm empty space on iPhone 6 as you can see in following image:
Uncheck constrain to margins and then add the constrains again (0,0,0,0).
Note your size class is Compact Width and Compact height
That is for 3.5,4,4.7-inch in landscape
You should choose any any
Then add constraints like this
Your size class is wCompact hCompact.
Change it to wAny hAny to get the desired output.
Opt to uncheck Constrain to margins option and add 0,0,0,0 Spacing to nearest neighbour
Do not fix its height or width els it would remain constant irrespective of iphone screen size .
U can also refer this link for more appropriate auto Layout concept.http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
Hope it helps.. Happy Coding..:)
You should do Leading, Trailing, Top, and Bottom to superview. Do this by control dragging from the MapView to the view. Just make sure that you have MapView taking up the entire view controller in the storyboard when you apply these constraints. Or, do it programmatically.

iOS Scroll View, Container View - auto layout issue

I'm using storyboards & auto layout. I have a Container View in a UIScrollView. The Container View allows me to layout a long (320, 1000) view in the storyboard. I set the content size of the UIScrollView to (320,1000).
I pinned the following constraints on the ContainerView to the ScrollView:
Width Equals: 320
Height Equals: 1,000
Top Space to: Superview
Align Center X to: Superview
Xcode insists on adding an additional Constraint. It adds a Bottom Space to: Superview Equals: -432. It will not let me delete this constraint! I'm not sure if this affects the issue below.
Everything works fine on the 4" screen of my iPhone 5 and Simulator.
My problem comes when I test it on the 3.5" screen in the Simulator & my iPhone4S. The scrolling content size becomes restricted to (320, 568), losing the bottom section of my ContainerView.
Can someone help me understand why this doesn't work on the 3.5" screens?
Received the answer from Apple Tech support. It still gives me an error in Xcode, but it functions on 3.5" screens now. Here's the answer:
I'm not sure why interface builder decided to relate the bottom of the container view to the bottom of the scroll view's content view minus 432. You can not remove this constraint because it is necessary for the layout to be fully defined [1]. However, if you promote that constraint to a user constraint, you can edit the constant value to zero. This will correct the issue where the bottom part of your content was being cutoff.
In Interface Builder:
1) Select the Container View
2) Switch to the Size inspector
3) Click the gear icon next to the "Bottom Space to: Superview; Equals: -432.0" constraint.
4) Choose Select and Edit from the menu.
5) Enter a value of zero in the constant field.
[1]: See the In Depth Explanation section of Technical Note 2154 for more information. https://developer.apple.com/library/ios/#technotes/tn2154/_index.html#//apple_ref/doc/uid/DTS40013309
When you embed a view into a UIScrollView in InterfaceBuilder, then there's a constraint automatically set. If your view is "longer" than the screen in portrait, it wont scroll at all.
But if you rotate the screen, you'll notice the ability to scroll a little.
To get UIScrollView going in AutoLayout look into your constraints.
Find "Vertical Space - Scroll View - View" and set it from "constant" to "auto" - fixed everything for me.

Desgin ViewController with Storyboard

I design the ViewController include 1 UIView and 1 button in it but when i deploy in the Emulatore, it 's not the same as what i see in storyboard file.
This is a consequence of the auto layout constraints you have. The default screen size in the storyboard is for iPhone 5, but the default simulator is an iPhone 4 size, so by having fixed distance to both the top and bottom of the screen, the view has to be squished to satisfy the constraints.
To fix this, you should give the view a fixed height (from the menu, Editor --> Pin --> height), and then delete bottom constraint.
You can also use distance to superview to top, also set the virw height constant. You dont need the bottom constraint

Resources