I want to thank anyone of you who is contributing to this community, and i which to find a solution to the issue that is presented below:
this is a capture of my xcode project Main Storyboard:
it contains a background image view with a grid picture and a small image view over it with a cercle picture.the content mode is the same for both views is aspect fit.
what i am trying to achieve here is to get the same combination between the two images, as in this picture, on all devices.
so basically sticking the cercle image to the background image (the grid image) so that if the background image dimensions change on another device the dimensions of the cercle image change the same way to keep the same view as in this picture.
I grabbed your image and clipped out the circle.
The "grid" actual pixels are 312 x 324. The "circle" is 30 x 30.
I set the grid imageView to fill, with a width-to-height ratio of 312:324 and a width of 0.75 to superview.
I set the circle imageView to fill, with a width-to-height ratio of 1:1 and a width constraint of 30:312 of the grid imageView.
Here is the result:
You would need to calculate the run-time" ratio for placement, but that's pretty straight-forward.
Edit:
I whipped up a simple example - has buttons to move the circle based on the intersection points: https://github.com/DonMag/GridScale
Related
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
Here's the Sample Project
Problem
I want to make an image to have a fixed top half part and a stretched bottom half part which to make it properly resized in any height.
And I use image slicing in Assets.xcassets to achieve that. The image can be resized properly, however, it displays slightly different in different sizes.
The Original Image
Image Slicing
Just simply slice the image from the vertical center.
Storyboard
Content Mode is set to Scale to Fill
Height constraint is equal to its width constraint multiplied by 0.8
Result
I think it should display nearly the same images in different devices. Because everything is the same except for the image assets(2x, 3x).
However, the result is not what I expect. The image seems a bit squashed on iPhone 8 PLUS.
At Last
I'm using Mojave with Xcode 10.1 (10B61).
Anyone knows what is the cause. And how to make the image vertically stretched properly?
The reason it looks "squashed" is because the image is being stretched horizontally.
Your slicing allows the top portion to remain a constant height, but not a constant (or proportional) width.
Here, I use your original image without any slicing... each image view is the same height (201-pts), so you know it's not scaling vertically, but different widths so you can see the result of horizontal stretching:
What you may want to try is clipping your original image to only the top portion. Setup the constraints on that image view to stay proportional, and then use a solid color image view (or just a UIView with matching background color), as the lower "vertical stretch" section.
I'm working on an app using XCode 6 and I'm trying to frame an image. I have one image that will change dynamically depending on the selection in the prior screen. I have another image behind it that is literally an image of a frame. The idea is to have the actual image look like it is surrounded by the frame itself. Here's the trick. I want the actual image to be a certain width to fill most of the horizontal size of the screen (say 85% if you want a number). I want the image to resize to this width based on the width of the screen (based on iPhone 4 vs iPhone 6, for example; so the width sets based on the screen, and the height sets based on the width to maintain its original aspect ratio). The frame should be about 10 pixels wider and 10 pixels taller, leaving 5 pixels around each edge, and the pictures should be centered at the same point.
I've seen a few programmatic fixes for resizing things based on the original aspect ratio of the image. However, I've been primarily using just Storyboard and was hoping to get an answer along those lines. Thanks so much!
Use auto layout and add constraints to the left and right of the frame to the superview. Then add constraints to the image inside the frame to be 10 pixels on top, bottom, left, and right to the edges of the frame. The left and right constraints of the frame should leave everything centered on the screen. Do you have any experience with Auto Layout? It can be a bit of a difficult learning curve, but for your purposes its a perfect solution.
Please see screen shot of flower setup below. The flower image has been correctly loaded from an asset catalog and when the app is run on various simulators the correct pixel resolution is assigned to each device. My problem is how to get the flower image to be scaled (equally sized to fit) the same on each device ??
I have learnt how to position the image to different positions using constraints and frames but the image never scales correctly - please see first pic
The following image is a mock up of what I want to be able to do (flower image scaled correctly on each device)
Judging by your mockups, it looks like you want the image to fill half the width, and keep its square aspect ratio to determine its height. One way to approach this would be to use AutoLayout to make a left UIImageView and a right placeholder (blank) view. Pin the left view to the left edge of the parent, the right view to the right edge, and then set them to be 0 pixels from each other. Then set an equal widths constraint on them. Finally, control drag the image view to itself and you can select aspect ratio -- and assuming that in IB, the width and height is the same, it will keep it square. Adding an equal heights constraint will give the other view the height it needs to be equal in case you need that.
This gives you a left image view that is 50% and with your mode set to Aspect Fit or Aspect Fill, it should give you the results in your mockups. In case you have an image that isn't square, make sure to check Clip Subviews for your UIImageView to prevent showing the overflow.
The real problem is that your goals are not well defined. Scaled with respect to what? The screen has a height and a width. You can't scale with respect to both, because that would distort the image (because different devices have different overall aspect ratios). Thus you have to pick one dimension that you will scale to.
Judging from your mockup, I'm going to guess that what you want is to scale with respect to height. If so, then give the image view a height constraint that is a fixed fraction of its superview's height. It looks to be about 0.25 in your mockups but you will have to eyeball what you think is a good fraction.
Now, if the content mode of the image view is Aspect Fit (or Aspect Fill), the image will change its height along with the image view without distorting the aspect ratio.
However, it would be best if you would make the other dimension (here, the width) of the image view a fixed fraction of the height, such as to make the aspect ratio of the image view the same as the aspect ratio of the image. The reason is that otherwise the image might end up centered in the image view in such a way that it doesn't touch the top or left any more, even though the image view itself does.
CGFloat screen_width = [[UIScreen mainScreen] bounds].size.width;
your_imageview.frame = CGRectMake(0, 0, screen_width/2, screen_width/2);