I've been trying to find a solution to this problem for a long time but I haven't been able to solve it. How do I make an image appear smaller so it would fit the screen on a smaller device? When I have in on a larger device it fits fine but when switched to a smaller screen the images start to overlap.
Example of images overlapping
I would really appreciate the help. Thank You!
Use auto layout and set your Uiimageview aspect ratio to 1:1
There are a lot of ways. Some are mentioned below:
Using Auto layout
connect every image to side of main view and set their widths and height ratio 1:1 , also set their width proportional to main view widht.
using stackviews and autolayout
1st set images width proportional to main view width
then set their aspect ratio 1 : 1
then add the columns to 2 vertical stack views and add both columns to horizontal stackview.
set the left right and bottom constraint of final stackview
You can use auto resizing as well, but that is not totally reliable.
autoresizing is default behavior of view. In your case you have to set flexible width and height of each image
Related
Im having a frustrating problem as I've worked with constraints in the past and have simply used the "Add missing constraints" to do the job, however I am having a LOT of difficulty achieving something very simple -
I have a larger button and a label positioned on my xib file. I need both these centered horizontally and scale with the device, and more or less maintain the distance between each other. Basically just need them to look reasonably good and for the button (which has an image within it) to scale but maintain aspect ratio.
Add missing constraints has not worked in the least as this results in neither the button nor label scaling (both stay small) and the space between them being too big on larger screens. I've tried every other constraint configuration but the button just ends up being squished or going off the screen. Here is what I'm trying to achieve:
The troublemaker is the button. Is there a way to do this programmatically? I am desperate here. How can I configure the constraints?
How do you set a distance between 2 objects?
Center the button horizontally and vertically with the view. Center the label to the view and give vertical spacing from button to the label. Also give width constraint to label if necessary. This will give you the desired effect.
For UIButton:
1.Centre Horizontally & centre vertically
2.Give Aspect ration (or) use leading,trailing,top,button for scale it to different device.
For UILabel
1.Centre it horizontally.
2.Set vertical to the UIButton.
2.Set Aspect ratio.
Hope this helps you.
I have a horizontal UIStackView with 2 views within it. I'd like to have the left view take up ~70% of the screen, and the right view take up the remaining 30%. I know that I can set the UIStackView alignment to Fill and the distribution to Fill and that will allow me to have more control over my subview sizes. What I can't figure out is how to set the layout constraints/widths/etc. on the subviews so that the the 70/30 ratio is correct, particularly when the device is rotated?
Can anyone explain how to set the constraints on my subviews so that the 70/30 ratio is maintained across device rotations?
You should be able to do this by creating an equal width constraint for the two views. Then, set the multiplier to that constraint to 0.7.
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 am trying to constrain a label that is sitting on top a UIImageView. The ImageView keeps its aspect ratio for the different screen sizes so its length and width change according to the device.
I am running into an issue if I constrain the top of the label to the top of the image view at (for example) a constant of 58. For the lower resolution image that places the label where I want it visually. However on the higher resolution images that position is not where I want it visually. I have also tried adjusting the top constraint so that the constant is 0 and use the multiplier to adjust the position of the label. This however does not fix the problem and the label ends up at different locations on the image.
I really would not like to have to edit these constraints programmatically as I will have way more labels on different view controllers that would be a pain to program. Really hoping I can achieve this in IB.
I'm confused... why aren't you pinning a constant distance from the top of the label to the bottom of the image view?
I'm new to autolayout and i'm kind of stuck on how to center these 4 images in all different devices like it looks on the images. i've tried to apply the auto configured constraints but then it will have that distance and that does not fit on all devices. So my question is what constraints do i need to apply on all different images in order to make all image centered with same distance?
Here is how my cell in storyBoard looks like:
image of the constraint options on image 1:
image in simulator:
/// MY TRY ////
Here you can see the constraints that i've added and the result?
result:
Your approach is almost correct, it simply lacks size constraints for the images.
If you want to dynamically resize the images and keep the space between them constant, put constraints on the images for the width to be >=20(or any other value, depends on your needs) and a constraint for keeping the aspect ratio. Then ctrl-drag from UIImageView1 to UIImageView2 and set a constraint for equal widths. Repeat that from UIImageView1 to UIImageView3 and from UIImageView1 to UIImageView4.
If you want the images to always keep their fixed size and dynamically sized spaces between them you need another approach:
The trick here is to place 3 empty UIViews between the UIImageViews so that it looks like this:
Set constraints to the top for all views
Set constraints to the left and right for UIImageView1 and 4
Set constraints for all UIImageViews to the same width
Set constraints for all UIViews between the UIImageViews to the same width
Set constraints for all the distances between the views to 0
Set the width constraints for the UIViews to >= 0
This way makes the empty UIViews between the UIImageViews to resize dynamically and all the same width.
I hope you get the idea.
For the first image add a leading space to superview and for the last image add a trailing space to superview and add vertical spacing between first and second, second and third, third and fourth and also set horizontally center within the container to each of the images
The objects on your storyboard require at least 4 constraints per object.
When there's orange lines around the UIImageView object like appears in your question, this means a constraint is missing, or conflicting and can often mean the image does not display at runtime like you'd expect.
In the first instance I recommend you select all objects and 'clear constraints', then start again.
Although not exactly the same, here is a link to an answer which explains the auto-layout constraints in a bit more detail. Once you understand it, auto-layout can be very powerful.
>>Link to similar auto-layout issue - iOS CustomTableViewCell: elements not aligning correctly<<
I hope this helps
If you want the images to always keep their fixed size and dynamically sized spaces between them then very easiest way first you drag the four UIView in your StoryBoard
set constrain top left right and height for all the UIViews and give the equally width to all the UIViews(drag from one UIView to another and sets its equally width repeat this work for all the UIViews).
Image about layouts
Secondly you have to drag your images set in these UIViews and sets their constrain height width and centre horizontal in container and centre vertically in container.
In last set the background colour of all UIViews default(white) you get the result it will work....i assure.
Screenshot of Xcode