So on my main.storyboard, I have an image along with a few buttons. All of them are centered. What I wanted to do was scale everything so that it will look exactly the same from a perspective/ratio point of view, on different devices. That is, if an iPhone 8 Plus is 10 percent bigger than an iPhone 8, I want the buttons and image to be 10 percent bigger on the Plus.
I followed this link which told me to constrain the width of the object to a certain percentage of the screen's width (like 25%). Then, he said to constrain the aspect ratio, so that the height will follow along when the width changes based on the screen size.
I did this, for both my buttons and image view. When I look at the dimensions for an object and switch between viewing it through iPhone 8 Plus and iPhone SE, the width changes, but the height does not. So clearly the width is adapting to the screen size properly, but the height isn't. (Note, this is happening for all of the buttons and the image). Should I just constrain the heights and get rid of the aspect ratio constraint? Or is there a way I can fix the aspect ratio so that it does change the height?
Let me know if you have any questions or comments, Looking forward to a response!
EDIT: Per request, here are 2 pictures of the constraints. One is the aspect ratio constraint, the other is the width constraint.
Take a look at this example:
Both buttons have a width constraint of 25% of the view (0.25 * width).
When designing for iPhone SE, they are both 80 x 30
Button B also has an Aspect Ratio constraint of 8:3
When viewed on an iPhone 8+
You see that Button A stretches to a width of 103.33, but its height stays at 30.
Button B stretches to a width of 103.33, but because it has a width-to-height ratio constraint, its height also stretches. In this case, from 30 to 38.67.
For this work you need
1- width constraint to any percentage of screen
2- aspect ratio constraint
by ctrl dragging from the element to itself and select aspect ratio from popup then configure the multiplier , e.x 0.5 mean height will be half width
3- origin constraint x,y
Related
I am creating a launch screen that has a centered image. I want the image to be 0.7 of the width in portrait orientation and 0.7 of the height in landscape orientation, so the image is the same size in both orientations, but relative to device size. It would be smaller on iPhones and larger on iPads, while supporting both orientations on iPad.
I can do one of those constraints but not both. For example, if I make it 0.7 of the width in portrait then it looks good in portrait but then oversized in landscape, and vice versa.
How do I create such autolayout purely in interface builder? (I'm assuming launch screens must only use IB.)
The trick is to add two sets of proportional width and height constraints...
First:
centerX
centerY
1:1 aspect ratio
Then:
width <= 0.7 #1000
width = 0.7 #750
height <= 0.7 #1000
height = 0.7 #750
So our constraints are saying:
try to make width and height each at 70% -- Priority: 750 (High, but not Required)
but keep the image view at 1:1 ratio -- Priority: 1000 (Required)
and neither width nor height can be greater than 70% -- Priority: 1000 (Required)
Here's how it looks in the Document Outline pane:
and here's what we get for iPad 9.7":
and iPhone 11:
You need to make constraints in respective of the view. For that, you need to follow the steps mentioned below :
Select your imageView.
Hold the control key and move your cursor to the main view.
Now click Equal widths constraint and give it the desired multiplier.
Repeat the above steps for the Equal Height constraint.
You are ready to go.
To make this work requires adding the equal widths constraints (per #Saumya Gautam's answer - welcome to SO!) but requires a little more tweaking to give the results.
Create equal width constraints to desired percentage (image to super view).
Update constraints: set one of them to "less than or equal" relation and set the other at a priority less than the first, e.g. 900.
Create aspect ratio (1:1) constraint on image.
Constraints:
Result, in portrait:
In landscape:
I am working to have my buttons height and position adapt to screen size changes like the pictures shown above. The buttons themselves will remain clear and only serve as a simple way to handle taps that trigger the segues to different screens. My goal is to make it so that as the image stretches across different screen sizes, I would like the buttons to keep equal height and width and position with the windows. I know that if the windows had properties I could simply make the buttons have an equal size and width to them and be done, but as I mentioned the image is static and it has to stay that way for the time being. I've tried creating constraints for the buttons and that has only proven to be a headache and I don't know if stack views will help me here either, I know this is fairly complex, but I'm ok with that I just need some direction.
UPDATE: In an effort to follow the instructions LGP listed properly I started from step 1. As I mentioned in the comments, I believe it's simply the ratio and the constraints conflicts since when I remove one or two it works fine, but then how do I set the constraints so it fills the entire screen and maintains the ratio of the picture? Also shown are the constraint conflicts for the image view an it isn't showing the aspect ratio of the parent container view either
If you want to do it in interface builder it is not too hard. You should use spacer views and proportional sizes to position the buttons. That way, whatever size your background will have, all the elements will follow.
1. Create a container that has the same proportions as you image. Add a regular UIView and set an Aspect Ratio constraint with a multiplier of 852:568. This is the dimension of your background photo, 852 x 568 pixels, but the actual values don't matter, as long as the aspect ratio is the same. (Don't forget to also tie up the container view to however you want it in your view controller. See the UPDATE below on how to do this.)
2. Place the background image in the container. Add an image view as a child to the container. Set the constraints to touch all four edges of the container. Set the Image property to you image, and set Content Mode to Aspect Fit.
3. Add the first spacer view. Add a regular UIView to the container view (see leftmost, white view below) and set the constraints as follows:
height = 1 (not important, I used 10 in the image)
Top space to Superview = 90 (not important)
Leading space to Superview = 0
Width equal to Superview with multiplier dw:cw <- This makes it proportional! dw is the distance from the left edge to the first window/button, and cw is the width of the container. If your container is 375 wide, and your distance to the first button is 105, the multiplier will be 105:375.
4. Add the second space view. This is the vertical spacer, going from top to first button. Set it up similar as the first spacer, except make the height proportional to the containers height, and the width fixed.
5. Add the first button. Constrain its left and top edges to the spacers, then make its width and height proportional to the container.
6. Add the remaining spacers and buttons. They are all the same. Just remember where to make them proportional. All buttons are constraint to the single vertical spacer.
Finally, you should make the spacer views hidden. You can easily try it within your Storyboard by selecting different devices.
I chose to add everything on iPhone 8, but it is not really important. Here is what it looks like when I change to iPad Pro 12.9" and iPhone SE. Note how the buttons are positioned correctly. The spacer move around a little because they have partly fixed distances, but it works fine anyway.
UPDATE: Here is how to constrain the container view in the view controller's view to make the container fill the whole view and still keep its aspect ratio.
First, set the image view's (the one you added in step 2 above) Content Compression Resistance Priority to 200 for both Horizontal and Vertical. This will allow the image to compress rather then expand if it has a choice.
Second, Add the following constraints to you container:
Align Center X to Superview
Align Center Y to Superview
Equal Width to Superview >= 0
Equal Height to Superview >= 0
852:568 Ratio to View <- This you should already have!
Now the container will always center on screen, it will always fill at least the entire screen, but will also allow it to fill beyond in both X and Y.
UPDATE 2: If you want to ignore the photo's aspect ratio, and always fill the screen with the photo, you just add constraints for the container view to each side to its superview. Your container view's constraints should look like this.
In step 2 you will need to set the image's Content Mode to Scale to fill. The rest should be the same.
Use percentage based positions and size. Identify the positions of windows in percentage basis, and create the origin in x and y dimension by multiplying the percentage to the width and height of the screen. I am assuming that you are using ScaleToFill as content mode of the ImageView.
Similarly for calculating size, identify the width and height of the ImageView on percentage basis, and multiply the values in percent with the total width and height of the screen.
For example, to calculate the position of Window one-
Suppose, window1.x in percentage basis is 25% & total image view width is 400 (for example), than window1.x pixel position will be-
window1X = (25 * 400) / 100 = 100
Suppose, window1.y in percentage basis is 25% & total image view height is 300 (for example), than window1.y pixel position will be-
window1Y = (25 * 300) / 100 = 75
Suppose, width is 7% of image views width, than width in pixel will be -
window1Width = (7 * 400) /100 = 28
Suppose, height is 12% of image views height, than height in pixel will be -
window1Height = (12 * 300) /100 = 36
window1.frame = CGRectMake (window1X, window1Y, window1Width, window1Height)
Same approach for other windows, to calculate their positions(size will be same as window 1)
This approach will work across all screen resolutions, since it uses percentage based calculations & ScaleToFill as content mode for image view.
i have this problem in 2 projects.Normally, profile image is displayed in circle like
and this is ok for iphone5 size.problem raises on bigger devices.like
as you can see size of profile imageview, it looks small compare to cover image.if i let it increase based on outer image then xocde ignores the aspect ratio constrains which results in non cricular profile imageview
here's current constrains image
any suggestion how should i handle it?
Update
here's result if i set constrain on profile imageview to increase with ratio to background image.
asks for y of image view,as i want it to be center so i sets fixed hight = 68 in hopes that xcode will break this constrain to keep aspect ratio, result
so if i remove hight = 68 and add constrain like width.
result
Select your image view and it's super view together and give equal width constraint,
then select that equal width constraint from size inspector, and reduce its multiplier until you get your desired width!
Now select your image view and give aspect ratio constraint!
And finally give position constraint for x and y position!
In your case center x and center y with it's super view I think!
And your imageview will increase or decrease with device width and will remains square always!
And You should set dynamic corner radius(half of width or height of your imageview) in layoutSubviews method of tableviewcell's class as you need rounded imageview and your size is dynamic!
Instead of setting the height and width as constants, set equal width constraints between the background image and the profile image:
And then select the profile image and set the multiplier value to the desired value:
Now you can also set an aspect ratio for the profile image.
This is simple:
Provide Aspect Ratio constraint and make the width of the profile pic = width of the screen
Select the equal width constraint and give the ratio in multiplier
My views width will change according to the device width but I want to change the height according to that I don't want that to be static.
I couldn't find any constraint that can take care of this.
I heard aspect ratio can do this. But I tried It doesn't seem to work.
How it is generally achieved?
Use concept of aspect ratio with AutoLayout to update your view with respect to height & width. Use multiplier to update aspect ratio. Here are snap of aspect ration assignment and how to update it's multiplier
Logic of Multiplier:
1:1 = Height and width of your image will remain same
2:1 = Your width or height is 2x with respect to each other and create a rectangle. Here Height will be 2x or width will be 2x, it depends upon first item and second item in constraint.
Logic of Priority:
Priority assigns, priority to specific constraint when it conflicts with another constraint of same view. e.g. if you have set a view with 1:1 aspect ratio, with 100 height & 100 width and centred in Main View. Now you also assign Left (margin)/Leading constraint as fix value like 200. In that case for different size of screen width, Centred alignment and/or Leading alignment and/or aspect ration will conflict each other. At this point you need to update priority between 0-1000, according to your requirement for adjustment of design.
Share me your design, I will give your exact logic, how to use this concept
Try with following easy way..
1) Give Leading and Trailing Constraint like below image.
2) Now set Top or Bottom or Other Constraint as per your design. For me i have settled Vertically Center.
3) Now set Height of UIView as per your Ratio which you want in design and after selecting that view just Drag and Drop on same view and select Aspect Ratio. XCode will automatically get Ratio Constraint. For ref. see below image.
I would like to take 4 square UIImageViews and align them from left to right at the bottom of a view. I want the images to grow in height (with the correct height/width aspect ratio) and have no spaces between the images. I want all the images to be of equal width
I seem to be having a hard time coming up with the proper constraints.
I've set all the images to Aspect Fit. I've created 8 constraints on all 4 images to have equal widths and height. On the far left and far right I've set the training space to the view as 0. I've aligned them all to the bottom of the view with a constraint of 0 as well.
This all seems to work... except that the images only grow in width and not height. I'm
hoping that as the width is calculated the image will grow proportionally in height. Any ideas?
PS: I would like to do this in Interface Builder if possible, but if code is needed, that's fine