I want this to work on all iPhones from 4 to 6+ portrait only.
Look at this autolayout designed for iPhone 4:
This imageView has an aspect ratio of 49:59 and has to keep this constant.
The imageView is inside a UIView container (the orange box). The orange container is attached to the 4 corners with 0 space. On the bottom part of the interface, another container (the white one) that contains 4 sliders.
This is the constraints I have applied to that imageView: top, bottom, leading, trailing to the orange container and aspect ratio 49:59.
This is how it scales to other iPhone screens:
but I don't want that. Look of how much screen is wasted on bigger iPhones.
What I want is the imageView to scale until it touches the left and right borders.
I want this:
There is plenty room for the view to scale and touch the left and right borders on big iphones while still keeping the same aspect ratio.
What kind of constraints should I apply to the imageView to do that? I have tried everything.
I haven't tried this, but I think it should work, if you give the image view constraints to the left and right sides of the orange view with constant values of 0 (or some other small number if you want a little orange showing), a centerY constraint, and the aspect ratio constraint.
After hours of fighting I got it to work. The constraints to the imageView are:
centerX, centerY, trailing and leading both >= 0, top and bottom both >= 3 and aspect ratio locked to 49:59.
This auto layout thing is the opposite of something intuitive.
Related
I'm trying to make a splash screen with a simple logo images, but problem it, it show diffrently cross all ios devices, from iphone 12 to iphone 4, and of course ipad too.
I searched the internet and i saw this https://blog.echobind.com/react-native-ios-splash-screen-with-storyboard-f6f9d847994e
But unfortunately , in my case, the splash icon fill all screen
When i'm trying to add alignment
So how can i center the splashIcon and apply it to all devices and all landscape in ios, thank you guy a lots
You have constrained the centre of the image, but not the edges.
This sets the position, but not the size of the image; The image is centred but its size is the size of the image so it bleeds off the edges of the screen.
I would keep the vertically centred constraint but remove the horizontally centred constraint. Add constraints to the leading and trailing edges of the image to the leading and trailing edges of the view. Set the content mode to aspect fit.
This will keep the edges of the image inside the view and scale the image so that it fits without distorting the aspect ratio. That way the image will be the right height based on its width.
Depending on how much space there is around the logo you might need to add non-zero values to the leading & trailing constraints.
For a landscape layout you will want to constrain the top and bottom rather than the leading and trailing edges. You can use size classes to conditionally apply these constraints depending on whether the height is compact (top and bottom constraints) or regular (leading and trailing constraints).
I have 4 images inside a UIStackView which is constrained 20pts from top, right, bottom, left.
4 images are set to Aspect Fit and the UIStackView settings are set to: Fill Equally, and Spacing of 20.
When I come to view this on an iPhone 8 upwards the layout works. When viewing on an iPhone SE layout I get squashing of the images as below.
Shouldn't the fact that Aspect Fit has been set solve this issue and scale the image down accordingly?
Thanks
Add an aspect ratio constraint to each image and set it to 1:1. This should make the images have the same height and width, no matter the width of the screen.
I agree however, that using "aspect fit" should work. Are these regular images stored in your app bundle, or are you creating them with code or something similar?
I come from design. Using Auto layout to me is like trying to understand Klingon without any previous knowledge of that language. Auto layout defies all logic of good understanding.
I have this situation:
An image view that is 400x400 pixels to be shown portrait and landscape. This image has to be shown with the aspect ratio of 1:1 and adjust itself to be smaller when the device is landscape.
The "image editing" logic says I have to apply the following constraints:
1:1 aspect ratio
leading/trailing of 10 points.
center Y to view
This works on portrait but when I rotate the device to landscape, the image will expand to respect the leading/trailing of 10 points and it will be clipped top/bottom.
Then I thought, I can add a top/bottom constraint to the view >= 10 pt... nope. The image is stretched horizontally and does not respect the aspect ratio of 1:1.
Then I changed the leading/trailing to >=10 and now the image has this:
1:1 aspect ratio
leading/trailing of >=10 points.
top/bottom of >=10 points.
This is working but Xcode is complaining that the image view needs constraints for Y position or height!
For me, Y is defined perfectly based on the leading/trailing/top/bottom constraints and I cannot define height because each device this runs will have one height.
For God's sake. How to solve that?
Couple ways to go about this, but probably the easiest is:
Set Leading, Trailing, Top and Bottom constraints all to 10
Set the ImageView's Content Mode to Aspect Fit
So here's my problem, I'm attempting to align the two green images relative to the superview, so that they retain the same position on all the possible iPhone screen sizes, but I noticed that when i pin trailing, leading, bottom and top edges of both to the superview, the left image appears correctly but the right image appears squashed on iPhones with smaller widths (e.g 5, 4S, 5S).
I can only assume that the constraints of the left image are inevitably affecting the constraints of the one on the right. Although I'm not too new to auto layouts, I've never had to deal with a situation of this nature before, What changes do I need to make to ensure that the images appear like this on all screens, especially ones with smaller widths.
PS: Reducing the actual sizes of both images didn't solve the issue either.
Thanks.
UPDATE: I would like the space between the images to shrink/grow according to the screen size. The space between them isn't my goal, my goal is getting the images to appear trailing and leading the superview as shown in the screenshot, not necessarily relative to each other.
Just to add another way you can do it like this Ctrl+Drag from One view to the Other and chose either Top, Bottom, or Centre according to your requirement
I haven't tried this, but what I would do is:
Left image:
Pin the "left" and "top" edges to the superview.
Pin the width
and height
Right image:
Pin the "right" and "top" edges to the superview
Pin the width and height
Don't pin the two images to each other. Also, don't pin the right image's left edge or the left image's right edge. There's no reason to pin the bottom edge either because you can fix the height (assuming you want the size of the images to remain fixed).
I am having trouble figuring out how to set up the constraints on an image view.
I have an imageView of size 155*155. I want the view to remain a square shape but scale up if the iPhone screen size increases to 6 or 6+. I can constrain the distance to the bottom of the container and the sides of the imageView to the sides of the main view. This should stretch the width but is there a way to make the height increase by the same amount? Any pointers would be really appreciated. Thanks
You can use an aspect ratio constraint by ctrl + dragging from your image INTO your image.
This basically tells that you want to maintain the current aspect ratio as your other constraints force a change in the width or in the height.