I have a problem with my constraints.
I want to do something like this:
And I want the UIImage size (and labels) increases or decreases depending on the iPhone device used.
I tried using 'Aspect Radio', 'Equal Widths'... but I can not do that the size of the images are adjusted.
How can I set the constrains to do this?
Thank you!
You could put the labels and buttons inside a view the same size as your UIImageView. Set both views to Equal Width, then set the leading space constraint on the UIImageView, the trailing space constraint on the other view, and the space in between the two views. Finally, I would set an aspect ratio on each one so the height will stay proportional as the width is adjusted to different phone sizes.
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 have a custom square view that can grow and shrink as needed. My custom view just overrides drawRect to render the content.
The containing view is a rectangle, but not a square. The aspect ratio changes depending on device orientation and type. I need to fit my custom view so that it takes maximum space in the container, but retains the 1:1 aspect ratio.
I would like to set the constraints in IB rather than code if possible. I have the following constraints:
Vertical centering in the container
Horizontal centering in the container
Aspect ratio (1:1)
Content mode set to scale to fill
I tried various things to make the custom view fit the container, which give me IB layout errors, for example:
Width <= container width
Height <= container height
I can't set any of the sizes equal, because I don't know if the container is vertical or horizontal...
This seems like a basic task, but I can't figure this out. What is the best way to fit square in a rectangle?
Keep the constraints you already have, and add new constraints:
width and height equal to the superview, but with lower priorities than the aspect ratio constraint
width and height <= the superview size
first three constraint are right., remove others and set the
leading or trailing and
top or bottom
constraint to superview
Now select the newely added constraint and make them >= (greater than or equal) to 0.
now you'll need to give the width or height constraint to your view which it can have it from its subview's same as we do it for scroll view or give a width equal to 320 to you view and make it also greater than or equal to.
As there is super View in that Super there is another View having Height 100 and width 270. i have given constraints like this for inner view (Image) Given Top =5, Leading and Trailing 25 25 and Aspect ratio 320:100(Width of Super View and Height of Inner View), When i add this constraints then size of inner view changes accordingly Means Works Fine. But when I add TextField and Label inside View then Size of label and Textfield Not changes Accordingly Please Specify me what aspect ratio I give To Label and TextField. Please Thank You
Aspect Ratio is used for like as the width increases the height of that particular object also increases with that ratio vice versa case if height increases but giving an object just aspect ratio doesnt mean that the objects dimension will increase/decrease automatically, you have to give other related constraints also to make your object's dimension change as the view's dimension chnage liek for example giving proportional height or width to that object with respect to the view then as the view increases or decreases the dimension of that object will also change.
Give equal height to the container
Set the multiplier
The same you do with textField and with bottom label you give Leading Training equal Height and vertical space with the top label and In textfield also the same.
Click the second UITextField drag it to first set leading ,trailing
,equal height ,equal width.
Then set horizontal space to second label.
This constraints make it proper .
If you want aspect ration drag with in the UITextField set height
constraints and width constraints (or)Aspect ratio Constraints.
So I am trying to make my launch screen for an app. The launch screen is made up of 2 text boxes and 2 UIImageViews.
This is my sketch up of what it will look like
My problem is I can not get auto layout to work with percentages of the screen, instead it has these numbers that I dont quite know what to do with. So while I know that the two image views are a 4th of the screen width from the edges I dont know how to put it their. Also I dont know how to make the image size occupy the same ratio of space on all devices.
Could you please get me started on setting this up?
autolayout does not Have Percentage support but it supports Aspect Ratio.
you need to add one view and add your two imageViews and textFields add equal width and height constraint for ImageViews and same for TextField
you can also add constraints to ImageView to expand in rest of space for that just add margin constraints and equal width and Height of ImageViews.
add aspect Ratio to ImageView's Width and SuperViews width as your requirement.
you can add aspect Ratio with individually to width and Height.
here as you mentioned in que. you can add aspect ration 4:1 for 4th of the screen size.
do same for TextField.
if you still need help than tell me I can explain in depth with screenshot.
I'm using autolayout and my UILabel doesn't seem to get bigger when the app is opened on the iphone 6 and 6+. I have the following constraints on the label:
-Vertical spacing to top layout guide
-Vertical spacing to image below label
-Center horizontally in container
I also tried setting an aspect ratio constraint to itself and then a equal widths constraint with the parent view (with multiplier ratio) so that when the width of the parent view expands so would the label but no luck.
Are there settings that I should be implementing to allow this to happen? I thought labels have intrinsic sizing so they would get larger on their own as the parent view grows.
No, they have intrinsic sizing so they would get larger as their content grows (i.e. how much text they contain). That is what intrinsic sizing means. It means that the size is intrinsic.
Also, resizing a label physically (e.g. making it taller and wider) changes the size of the label. This will be evident if your label has a distinct colored background, for instance. It has no direct effect whatever, though, on the size of its text's font.