I am trying to put the image at the top of of my device and these are the constrains that i am applying
The result that i am getting by applying this result is
so there is some black space left at the top, i want that my image should stick to the top, i want to conserve the aspect ratio of the image and can't clip it so i can't use aspect fill. Can someone help me out with this
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 feel like I'm going crazy. I set my UIImageView.contentMode = UIViewContentModeScaleAspectFill, but it is still stretching the image. (Not a clipping issue, it is stretching the image.)
It even shows it stretched in my Storyboard. I created an image of green and brown squares to test:
I added a UIImageView in my Storyboard. I added the image to that image view, and when I'm setting to Aspect FIT then it does what it is supposed to do (maintain aspect ratio and show the whole image allowing gaps as needed), but when I switch to Aspect FILL then it stretches the image. Here is an animated gif from my storyboard:
What the heck is going on? This is in a storyboard in a project that is a few years old. If I create a brand new project with a brand new storyboard, then this insanity doesn't happen.
Is there something in my underlying storyboard that is causing this bug?
Any help is appreciated. I feel like I'm taking crazy pills.
It's not stretching it. It's filling the area while keeping the aspect ratio. If it were stretching it, the horizontal white line in the middle would not be as tall as the vertical white lines are wide.
Set the content mode to "Scale To Fill" to see what it would look like if it were getting stretched (like this):
Note the difference in line thickness of the middle white line, as opposed to when it's set to Aspect Fill:
If you turn off Clip to Bounds on the image view, then you can see how the image is getting cropped when set to Aspect Fill:
If you want to show the full image at the full width while keeping the aspect ratio, you'll have to increase that cell's height to accommodate the height of the image.
I have added an icon to my assets to be used in an image view. However, When I put it in an image view the outer edges seem to be larger than the image itself. Is there any way I can fully fill the image. Even when I try scale to fill or aspect fill, fit options still there remains a margin in between.
In other words I want my circular image to be tangent to the image view rectangle
The example of what I am trying to do
I place an image view (content size: aspect fit) on my base layout. I create the trailing, leading and bottom constraints and set their constants to 0.
This doesn't happen when the image is smaller than the view:
Though, the image isn't positioned properly on the iPhone - it appears almost centered - while it is on the iPad. Perhaps its intrinsic content size is too big? Why is this happening?
As you haven't set a top, aspect ratio, or height constraint on your image view, iOS falls back to the intrinsic content size (the actual size of the image) for the height only (the width is set by the leading/trailing constraints). If the image is wider than the screen, it will result in an image view that is as tall as the original image, but with the with set to the screen width.
Then, as you have the content mode set to Aspect Fit, iOS places your resized image inside the image view, and leaves lots of blank space around it.
One option to resolve this is to add an aspect ratio contraint on the image view, matching the aspect ratio of the image inside it. This will result in a correct height for the image view.
beyowulf was correct i believe. You should try changing the background color of imageview. If you change the imageview background color, you will realise that imageview always obeys your auto-layout constraint.
Now why not image??
Its because you asked it not to :) aspect fit will try to resize the image still maintaining the aspect ratio :) when the size of the image is too large i.e greater than the size of imageview frame, image covers the full frame of imageview and maintains the aspect ratio as well. Meaning if width is greater than screen width, image will cover the imageview frame width and takes a corresponding height for that width.
Thats why in first case your image covers full imageview frame where as in second where image size is small covers only space required :)
If on the other hand you want image to cover imageview frame always either fall back to scale to fill or aspect fill based on your requirement.
Happy coding :)
I have an image that I want to align with the bottom right corner of the View and then I want the rest of the image to scale to fill the available space but without falling off screen.
My image is a square, so I don't want the width of the image to be any greater than the device's shortest side (portrait or landscape).
I'm new to Size Classes, but no matter what constraints I apply, the image grows bigger than the view and seems to have a gap between the bottom and right had edges of the screen, even though I've set those constraints to 0.
Your specifications are a little unclear, which may account for the difficulty you're having; you need to be very clear on exactly what you want. I had no trouble making a square image be square and fill the shorter dimension exactly in both orientations:
So if that's what you want, it's easily achieved with constraints (no size classes involved).