I'm having and issue and i would like to know if doing this is possible.
I have a UIImageView with the content mode of .aspectFit, the green part is the UIImageView background color and the image inside is the actual image, i want to know if it's possible to make the image inside the UIImageView sticks to the bottom and not just float in the center of the UIImageView space.
Note: Depending on a parameter i'll have to change the UIImageView height dynamically to make the items look bigger or smaller
The photo below represents the problem description.
For your requirement, you may want to change your UIImageView's Content Mode to Bottom,
imageView.contentMode = .bottom
Put your UIImageView to UIView and then anchor image view (with content mode aspect fit) to the bottom of its superview. Also set height of ImageView equal to height of View in certain ratio
Then if you need to change height of ImageView, just change aspect ratio of heights.
did you try setting UIEdgeInsets ?
UIImageView.image = UIImage(yourImage.withAlignmentRectInsets(UIEdgeInsets(top: -10, left: -10, bottom: 0, right: -10)
Related
I have a button with a)Image and b)Background Image - all built in a storyboard. The image is popping out of button as background image has a different shape. I want to give the actual image (a) some padding from all sides so it can shrink back within the background image. I can't do it with insets as they only give padding to non-opposite sides, when same insets are set to opposite sides - image doesn't shrink. It would be great to know how it's done in storyboard and programmatically.
You should set the button to fill the image. Doing so lets you use the image insets as padding. Note that this will stretch the image, so you need to pad properly on left/right vs top/bottom if you want a correct aspect ratio right.
In Storyboard you do this in the buttons control section. Then adjust the button's image insets.
In code you do like this.
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
I have a view named myView which is always half the screen and sit at the top of screen.
Inside this view I added an UIImageView with 120x120 size which sits in center of the myView (horizontally and vertically). Inside the IB, to satisfy the constraints(X & Y) I always need to set a fixed width and height for my image, after I set center horizontally and center vertically.
But with a fixed height and width, the image doesn't resize when changing the screen size. I want my image to resize when running on iPhone5 or iPhone 4s, because myView will resize.
I need something like the image should depend on the myView size.
How to actually achieve this ?
set imageView.clipToBounds = yes, and also set imageView.contentMode = UIViewContentModeScaleAspectFit;
Update
You are talking about imageView not the image, in that case it will not resize due to constant width and height, do one thing, create IBoutLet of constraint and change there values when required, or you can also set Aspect ratio with superView
If you set the image with fixed width and height it will not change respectively.
You can either set it to be relative to myView or you can instead set leading and trailing size from all for edges and delete the center constrains.
Your constraints should look like this:
For Swift 4: Updating answer of #Adnan Aftab
imageView.clipsToBounds = true
imageView.contentMode = .scaleAspectFit
Looking to fill the background image in Xcode iOS based on a percentage.
The Constraints
The image must fill the entire screen (centered), so that the smallest dimension (width or height) fits. (Even if image becomes pixelated because it has a small file size.)
This must work universal, both iPad and iPhone devices.
Examples
You can use UIImageView. To make an image fill the screen, set imageView.contentMode to ScaleAspectFill.
To make UIImageView fill the screen, use auto layout. The easiest way is to add 4 constraints for UIImageView. Spacing to nearest neighbor = 0 will do. Like so:
Or leading/trailing/top/bottom space to superview = 0, if you like.
Set height and width of your image view to the width and height of your screen
var image:UIImageView = UIImageView(frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height))
You want to make a UIImageView with the contentMode set to .ScaleAspectFill and add it as the bottom subview of your view.
I have a UIImageView which is set to mode Aspect Fit. Now I want to place an edit button on top right corner of that image view. I am using auto layout and have a constraint of (Button->Trailing Space to superview) and the layout is connected via IBOutlet.
Once the image is set in UIImageView, I want to resize the ImageView Frame, so I can place the UIButton on top right. But UIImageView is not resizing as per image. Look at the gray part in the attached image (It is the background of ImageView)
imageView.clipsToBounds = YES;
imageView.image = image;
[imageView sizeToFit];
buttonLeadingSpace.constant = imageView.frame.origin.x+imageView.frame.size.width-44;
First of all, you should align your button with ImageView top & trailing. you can add constant=padding you need for your button.
UIImage is displaying as per your properties set for UIImageView (ie. contentMode = AspectFit). Here are the few options you might be interested in
If you want to fill the complete width just remove the height constraint from the UIImageView. It will fill the width and increase the UIImageView height as per image aspect ratio.
If you want same height and width of UIImageView set contentMode = aspectFit. this will fill the complete UIImageView but might clip the image.
Remove leading and trailing constraints from UIImageView. Align horizontal center and add image width constraint.
in my app the UITableViewCell size are dynamic which means each has it's own height. inside of each cell there is a background image in a UIImageView. Through storyboard, i used autolayouts to customize the UIImageView to automatically stretch as the cell is stretched. The problem is that when they stretch the whole image stretches with the corners. So i was looking up online and i came over using resizableImageWithCapInsets: in order to stretch the stretchable sides and exclude the unwanted ones. So i tried the following code in tableView: cellForRowAtIndexPath: as i wanted the image to be stretched vertically only (height):
[cell.backgroundImage.image resizableImageWithCapInsets:UIEdgeInsetsMake(16, 0, 16, 0)];
however, the problem persisted as in the picture below
As you can see, the image corners are still stretched. What am i doing wrong? is the edgeInset values wrong? or should i place the code somewhere else ?
You create UIEdgeInsets values using the UIEdgeInsetsMake() function. UIEdgeInsets encapsulates four different CGFloat values for the inset values of the top, bottom, left, and right individually. Positive inset values shrink the content area, while negative inset values will effectively increase it. Make sure you create the image first and apply the insets there and then, Once that is done then apply the image to the backgroundView as opposed to trying to edit the edge insets from the backgroundView.image property.
UIImageView *cellBGIV =
[[UIImageView alloc] initWithImage:[[UIImage imageNamed:#"imageName"]
resizableImageWithCapInsets:UIEdgeInsetsMake(5.0, 5.0, 5.0, 5.0)]];
cell.backgroundView = cellBGIV;