I have a UIImageView in a UIViewController's view. What I want is to set it's height 1/3rd that of the view no matter what the screen size is. I of course know how to do this from code. But how to accomplish this using Storyboard/Interface builder only ?
Add a height constraint whose multiplier value is 1/3 so the image view's height will be one third of its superview's height.
--
Here is how it looks with different device sizes:
Related
I have a UIImageView that needs to be centered and have a width that's equal to the screen width and some height that grows proportionally with the width. So for instance, for the iPhoneXR I have:
And on the iPad 9.7 it would be:
So basically the image just scales proportionally with each screen size. I have already figured out how to center it using constraints, but I'm lost on how to get it to scale proportionally. I've played around with the auto resizing options and constraints to no avail. I struggle so badly with these storyboards, wish I could just code it! Is this even possible in a LaunchScreen storyboard?
You can't execute any code inside launch screen. However, you can make it with constraints.
Set center equal to superview, then set width equal to superview. Now, you can add aspectRatio which is like 1:1, so you imageView height would always be equal to its width or any other ratio you want.
Example:
By adding proper constraint you will get your expected result. Add aspectRatio constraint to imageView.
All constraints as per
You can not give constraints to a view w.r.t viewController in LaunchScreen.storyboard because our view hierarchy has not loaded till that point of time.
You can give an imageView constraints w.r.t itself. CTRL drag on the imageView and select height, width or aspect ratio.
Though the recommended way will be to use another viewController that will work as LaunchScreen with some delay in segue.
I am using the Freeformsimulated size to change the View Controller height so I can arrange all subviews in a scrollview.
I set the height to 1200
Add a scroll view; set the constraints to the superview
Then add a UIView called bodyView to the ScrollView to be the container of the body content and set all margins to the scroll view.
Add another UIView to be the header with a fixed height of 400 but set the rest of the margins to the BodyView to stay at the top and to be the same width.
Add a UIImagevView to the headerView and set all constraints to the header
This is how it looks so far:
However once the UIViewController is run on smaller device sizes the scroll view retains the original width of 414 and the content does not fit in the frame; even though there is no width constraint set for neither of the sub views.
Does anybody know where I am going wrong and what might be happening ?
I have been researching and even checked out other projects and cannot seem to replicate/resolve the issue.
The bodyView must get it's width from out-side scrollview , so Control-drag from the bodyView to the viewController's view and select Equal-Widths -- the height is calculated according to hooked elements from top to bottom
I am trying to arrange controls in the storyboard using constrains via Interface Builder ("Any Width, Any Height" case). I add there UIView, however, when I press update frames for this element (Selected Views case) according to the given constrains UIView disappears from my view. I guess it size becomes zero. Later on, it is not show up in the screen after the run. The issue is also reported in the issue navigator: Horizontal Position of UIView is ambiguous (marked with the green shape). Anyway, if I set the constrain for width or height (size parameters) together with the constrain of ratio, then the issue disappears, I can update frames, it shows up in the screen during the run.
I am adding the picture with the green marks to make the issue more clear:
The question is whether the parameters of the size are obligatory when I am setting the constrains.
Even if they are obligatory how I can make the size to fit different sizes of the screens or iPhone+iPad because if I set/fix the size it could too big for some screens.
The size is not mandatory. The warning tells you that you must set an X position for this view (constraint between the superView left or right border and the left / right border of the view itself). If you want the view to resize itself to fit each screen size you must set both left and right constraint without the size constraint.
You shouldn't used fixed size (width or height) for view that change size when screen dimension change.
If you want view that fix aspect ratio you can set size that relative to Superview's width or height using:
1) leading and trailing and make sure that
view.leading = superview.leading + fixed_margin
view.trailing = superview.trailing - fixed_margin
and not other way around.
2) equal width or equal height with multiplier, constant relative to superview as you want
So you don't need evil size class.
I have a UIView with 3 UIViews as its subviews. I have set layout constraints for these subview as fixed aspect ratio. i.e if the screen size changes their width will change but aspect ratio will always be the same.
Now i have also made width of the UIView (the red one as shown in screen shot) changing as the screen size changes.
But i am struggling to make constraint for height of this view. what i want is its height should be set according to the total height of the subviews inside it.
since the height of the subviews will change if the width of the screen changes, because i have made their aspect ratios fixed.
As of right now i have made height of the Red superview fixed.
but i want it to be variable according the total height of all the subviews inside it.
Here is the screen shot of my viewcontroller and its preview.
As you can see there is some space remaining because of the fixed height of red super view.
Details of the constraints i have added so far are as bellow.
Main Red SuperView
**1st (Top), 2nd (Middle), 3rd (Bottom) Subviews respectively **
You can add a bottom constraint from the 3rd view to its superview, then you have to remove the fixed height constraint of the superview.
Add an outlet for the height constraint of the red view if you haven't done it already.
If you are doing this in viewDidLoad, call layouIfNeeded in controller's view.
call for every subview, setNeedUpdateConstraints and layoutIfNeeded.
Then calculate your desired red view's height (I would do 3*subview.frame.size.height + topPadding + bottomPadding) and set the red view's height xconstraint constant to this.
call setNeedUpdateConstraints and layoutIfNeeded on red view.
To support same behaviour in all resolution. you need to set layout as follow.
Red View
UIView Top
UIView Middle
UIView Bottom
hope this help you.
I've been struggling to learn autolayout (finally). I want to have a vertically scrolling UIScrollView that holds all the content for the view. I want to pin a UIImage view to the top of the scrollview and keep the image a square (scaleToFill). Basically I want to do this (only I want to do it with autolayout):
I can't get the image to keep its aspect ratio while staying within the screen bounds. Whenever I add an aspect ratio constraint the imageView grows to like 600 points (the width of the png I think), but I want it to just be as wide as the screen.
I think I am setting the constraints up for the UIImageView correctly because if I get rid of the scrollView and just drop the imageViw directly on the view then it seems to do what I want it to. The trick is putting it inside the scrollView.
This is how I currently have it set up:
The 4 vertical/horizontal space constraints on the scroll view are all set to constant 0.
Since the size of the UIScrollView depends on its content, you cannot have the size of your UIImageView subview dependent on it.
You have to remove the aspect ratio constraint of the UIImageView and use a fixed width one. You can also have your UIImageView width dependent on another view in the UIScrollView which has either a fixed width or otherwise unambiguous width.
Don't forget to use Placeholder as the intrinsic size value in Interface Builder.
Hope this helps.