I am making an universal app for the first time. I want to change my image size according to screen size for it to look bigger on iPad and smaller on iPhones. Also it should look fine in both orientations.
I want the UIImageView size to be kept proportionate to screen size. These are the constraints applied till now :
Here topConstraint is an outlet which has the following code :
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
if UIDevice.current.orientation.isLandscape {
topConstraint.constant = 40
}
else {
topConstraint.constant = 12
}
}
If i give only leading trailing top and bottom constraints then it shows red lines depicting missing constraints as follows :
Please help. I am using swift 3 and xcode 8. I know its something to do with aspect ratio but mine is still not coming perfect.
Your top label doesn't have enough constraints to know where it should be along the Y axis.
Let's have a look at your constraint along the Y axis starting from the bottom of your view. You set:
the bottom of your view to be at 16p from the bottom of your detailLabel,
your detailLabel top at 16p from the imageView bottom,
then you have the aspect ratio of your image which given the width (you set it through the leading constraint of the imageView and the X-center) is setting the height
imageView top at 16p from detailLabel bottom
dateLabel top at 4p from titleLabel bottom
you didn't set the constraint starting from the top of the titleLabel and going to the top of the view.
So in conclusion, you are missing one constraint. Set the top constraint of you title label and you should be fine. Also, I would delete the X center constraint of your imageView and replace it by a trailing constraint of 32pt (same as the leading one, it's easier to read, will display the same and there's less inferring to do)
As per my understanding suggestion is:
constraints to imageview : Leading ,Trailing , Top and Height.
Now give outlet to height constraint.
Then for bottom label,Constraints are: Top,Bottom,Leading,Trailing.
Now set your imageView's height constraint's constant according to your need.
To make image size according to screen size, you need to set aspect ration constraint with respect to your current view(current screen size).
From the give constraints, you are missing height and width of image view as its not possible to infer its dimension until image is set to it, so you need to give height & width to the image view, the red line will be removed automatically.
Why red line are there?
Since you are using scroll view, the scrollview's content size is depended on the its subview and the constraints given to its subview.
So please make sure that all the constraints to the subview are given correctly. Otherwise scrollview will not be scrolled.
Set aspect ratio 1:1 and see. It will stretch your imageview with proportion of 1:1 according to minimum scale of device size (either height or width).
Note: Device orientation also plays important role here.
Related
I'm having a problem with scrollable content. Basically, I want to place one ImageView and one Label on the screen with ImageView width equals screen width. height depends on intrinsic content aspect ratio (while width is always equal screen width).
The label is 20 spacing bellow ImageView. That means whole content height may less or equal or even longer than the root view. What I have tried is to put Label and ImageView inside a StackView (ImageView has Aspectfit setting), Then put StackView inside ScrollView. Set up constraints as below.
The problem is the distance between ImageView and top Superview and between ImageView and Label is too big (ideally should be 20). Is there any way to achieve the desired outcome?
PS: I have tried to set stackView distributtion but no help
tl;dr Remove the aspect ratio constraint and add a height constraint for the UIImageView.
It’s important to understand that UIImageView is basically a container that holds an image, and its dimensions don’t necessarily reflect the image’s dimensions (unless you manually make them equal). When you selected Aspect Fit as UIImageView’s Content Mode, the size of the container didn’t change to correspond the image’s size; this setting only changed the way the image is placed inside the container.
As I can see in your screenshot, the UIImageView’s height is greater than its width; furthermore, the aspect ratio is fixed by the constraint you’ve added. When you placed a landscape-oriented image inside this container, the latter left white bars on the top and the bottom of the image (just like the black bars you see when you watch a widescreen video on an old monitor). Change Content Mode to Aspect Fill or Scale to Fill to see the actual size of the UIImageView.
To fix this, remove the aspect ratio constraint and set up a fixed height for either the UIImageView or the UIStackView. If I were you, I’d probably set the UIStackView’s height equal to Safe Area so that no matter how tall the stack view is, it doesn’t go beyond the screen boundaries.
I'm trying to figure out an approach to the following:
I have a square image, I want to align it horizontally and vertically in the centre of the screen and constrain it in a way where its left and right edges are 60pt from screen edges.
I got thus far, but am now getting an error from XCode about top and bottom image constraints. How can I make it so image keeps its square ratio and auto resizes based on screen size?
Example, images width became 294pt in screenshot below, yet height remained unchanged, where as it should change to 294 pt as well.
You need to add 3 more constraints.
Vertically align your view to superview
Horizontally align your view to superview
Set aspect ratio of your view to 1:1 (Important)
On the whole you should have 5 constraints. The screenshot is given below.
this error occurs when auto layout did not find enough information about a component on the storyboard. as you did it here you only provide the trailing and leading constraint so now it asks for height and width.
if you want the same height on every device selects the height constraints that will fix the heigh 300.
Or simply you can do this set the alignment constraint to Center vertically and horizontally and then add top and leading constraints
hello everyone I've get stuck in Auto-layout issues
I have login storyboard that contains three Items Image-view , Stack-view , Button like the first image below
I've tried to add constraints using two ways:
The first way I've added "pinned" constraint to Image-view as shown in Photo1 below but when I've changed to landscape the Image was disappeared as the second photo below.
please notice I haven't got any warnings
The second Way I've tried by wrap the Image-view using view then i added
"Pinned" constraint to view
finally i added fixed width & height to Image-view and Horizontal & vertical in container but I've got this result as third and fourth photo
what should i do to make my Image-view Adaptive for all Screens ?
thanks
Photo1
Photo2
Photo3
Photo4
As when changing to landscape screen height changing a lot. the problem with your design with Autolayout is it's not adaptive with landscape and portrait mode because you are give fixed hight and width to your layout.
to make your image-view Adaptive for all screens give your image-view height to superview height in percentage so when in landscape mode height will change your image-view will still gets the height from superview height in exact same percentage.
have a look at this demo hope this will help.
Autolayout
First drop UIImageView into ViewController.
Give it a top constraint and Align it horizontally to it's SuperView.
As now it's only required height and width.
Then Ctrl drag from ImageView to itself and select aspect ratio. give
a aspect ration 1:1 (it's just telling storyboard if any of height or
width is available i want the other to be the same like if width is
given then height should be the same as width, vice versa for height) as you may want
perfect square shape for your profile ImageView.
Now Ctrl drag from ImageView to SuperView and select Equal height.
As now your ImageView got the height to SuperView Height.
give your ImageView proportional height (percentage, Aspect
Ration or Multipiler) to SuperView how much you wanted to give like
so.
At the end your UIImageView will get the height proportional to SuperView height, vice versa for width.
I am trying to dynamically resize my UITableView Cells in swift:
Above is my cell setup for the smallest possible screen size (iPhone 4). The green view (an image) will enlarge if the screen width increases and retain its aspect ratio. It's pinned to the top, leading edge trading edge and aspect ratio enabled. The label below is centered horizontally. The top pinned to the bottom of the image and the height and width fixed.
I have this code in viewDidLoad:
tableView.estimatedRowHeight = 262
tableView.rowHeight = UITableViewAutomaticDimension
If I run the app I get the warning:
Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead. The cell is also the wrong size only about 25pts in height. What am I doing wrong here?
First if all, check out this link. You may be missing an overload:
custom UItableView not displaying correctly on ios8
Second, look at your constraints again. Just for the vertical dimension, you've set the distance from the image to the top, from the image to the label, and from the label to the bottom.
The size of the label will be given by the text.
But the size of the image is uncertain. You have a leading constraint and an aspect ratio, but how does that specify a size?
Basically if you were to render this yourself, would you have enough information to do it?
Try add constraint: label's bottom to cell's bottom
Remove label's fix height.
Hope this can help.
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.