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)
I have problem in scale down setImage size if I add UIButton by programmatically whereas if I add the UIButton by storyboard, the UIButton size remain correctly.
The Image is 128x128, I want to shrink down to 30x30
Top one is created from using storyboard, Bottom is created from using programmatically
These are the methods I tried, none able to shrink the image...
let checkBox = UIButton(type .system)
checkBox.sizeThatFits(CGSize(width: 30, height: 30))
checkBox.contentMode = .scaleAspectFit
checkBox.contentVerticalAlignment = .fill
checkBox.contentHorizontalAlignment = .fill
checkBox.heightAnchor.constraint(equalToConstant: 15.0)
checkBox.widthAnchor.constraint(equalToConstant: 15.0)
Image is set/update on runtime
checkBox.setImage(UImage, for: .normal)
With suggest using checkBox.frame.size.width, checkBox.frame.size.height
the image becomes correct size but the UIButton now have extra space.
Like the image below. I update image on touchUP UIButton
What about this:
checkBox.frame.size.width = 30
checkBox.frame.size.height = 30
The Image is 128x128, I want to shrink down to 30x30
One obvious solution, in that case, is to shrink the image. Redraw the image into a 30x30 graphics context at 30x30 size and extract the resulting image. Now you have a 30x30 image. That's the best way; it is a waste of memory to hand the runtime a way oversized image and ask it to display it smaller.
Now, if you want to use constraints to size and position the button, that's fine, but you are not doing that correctly. First, you have forgotten to set the button's translatesAutoresizingMaskIntoConstraints to false. Second, you have to supply enough constraints not only to set the button's height and width but also its horizontal and vertical position.
I have a UIButton within a UIView with two constraints. Both constraints were set in Interface Builder so that the UIButton is centered vertically and horizontally in its superview.
I wanted to add a border to the UIButton and make it rounded. Having followed an answer on SO I was able to get the button partially rounded.
For some reason though, the button is not really round. I assume this is because of my height & width not being equal to each other. Each time I set the width/height of the button to be equal, the autolayout constraints reset it back to 40x34.
I am using the following code to create the rounded button.
self.startButton.clipsToBounds = true
self.startButton.layer.cornerRadius = self.startButton.frame.height / 2
self.startButton.layer.borderWidth = 1
self.startButton.layer.borderColor = self.view.tintColor.CGColor
self.startButton.layer.shadowRadius = 6.0
self.startButton.layer.shadowColor = UIColor.blackColor().CGColor
self.startButton.layer.shadowOffset = CGSizeMake(0.0, 3.0)
self.startButton.layer.shadowOpacity = 0.65
Why does having my button centered vertically and horizontally prevent me from changing its size? I don't understand why I can't set the size of the button and have the constraints re-center it based on the size values I assign to it.
Edit
I have moved the code in to the viewDidLayoutSubviews and then modified the constraints so that both the height and width are constrained to 40x40.
override func viewDidLayoutSubviews() {
self.startButton.clipsToBounds = true
self.startButton.titleLabel?.text = "Start"
self.startButton.layer.cornerRadius = self.startButton.frame.height / 2
self.startButton.layer.borderWidth = 1
self.startButton.layer.borderColor = self.view.tintColor.CGColor
self.startButton.layer.shadowRadius = 6.0
self.startButton.layer.shadowColor = UIColor.blackColor().CGColor
self.startButton.layer.shadowOffset = CGSizeMake(0.0, 3.0)
self.startButton.layer.shadowOpacity = 0.65
}
This partially solves my problem; not fully though. If I do not assign a value to the titleLabel, then the button is a proper round button.
However, if I assign a value to the titleLabel, the button becomes a rounded rect and is not a circle.
The text does not appear in the button though, which confuses me. I need to have the button be a circle, scaling to fit the content it has as well. My button type is set to Custom. I don't know if that has any effect on this as well.
Edit 2
After doing some testing, I discovered i was setting the edge insets to the button. Once I removed the following:
self.startButton.contentEdgeInsets = UIEdgeInsets(top: 25, left: 25, bottom: 25, right: 25)
I got the desired effect with #Leo's answer.
You need to add constraints about height & width of your button.
Either fixed width & height,or aspect radio is ok.
If you use aspect radio,set up the corner radius in viewDidLayoutSubviews
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.
If I have a UIButton arranged using autolayout, its size adjusts nicely to fit its content.
If I set an image as button.image, the instrinsic size again seems to account for this.
However, if I tweak the titleEdgeInsets of the button, the layout does not account for this and instead truncates the button title.
How can I ensure that the intrinsic width of the button accounts for the inset?
Edit:
I am using the following:
[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
The goal is to add some separation between the image and the text.
You can get this to work in Interface Builder (without writing any code), by using a combination of negative and positive Title and Content Insets.
Update: Xcode 7 has a bug where you cannot enter negative values in the Right Inset field, but you can use the stepper control next to it to decrease the value. (Thanks Stuart)
Doing this will add 8pt of spacing between the image and the title and will increase the intrinsic width of the button by the same amount. Like this:
You can solve this without having to override any methods or set an arbitrary width constraint. You can do it all in Interface Builder as follows.
Intrinsic button width is derived from the title width plus the icon width plus the left and right content edge insets.
If a button has both an image and text, they’re centered as a group, with no padding between.
If you add a left content inset, it’s calculated relative to the text, not the text + icon.
If you set a negative left image inset, the image is pulled out to the left but the overall button width is unaffected.
If you set a negative left image inset, the actual layout uses half that value. So to get a -20 point left inset, you must use a -40 point left inset value in Interface Builder.
So you provide a big enough left content inset to create space for both the desired left inset and the inner padding between the icon and the text, and then shift the icon left by doubling the amount of padding you want between the icon and the text. The result is a button with equal left and right content insets, and a text and icon pair that are centered as a group, with a specific amount of padding between them.
Some example values:
// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)
Why not override the intrinsicContentSize method on UIView? For example:
- (CGSize) intrinsicContentSize
{
CGSize s = [super intrinsicContentSize];
return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}
This should tell the autolayout system that it should increase the size of the button to allow for the insets and show the full text. I'm not at my own computer, so I haven't tested this.
You haven't specified how you're setting the insets, so I'm guessing that you're using titleEdgeInsets because I see the same effect you're getting. If I use contentEdgeInsets instead it works properly.
- (IBAction)ChangeTitle:(UIButton *)sender {
self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
[self.button setTitle:#"Long Long Title" forState:UIControlStateNormal];
}
And for Swift worked this:
extension UIButton {
override open var intrinsicContentSize: CGSize {
let intrinsicContentSize = super.intrinsicContentSize
let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom
return CGSize(width: adjustedWidth, height: adjustedHeight)
}
}
Love U Swift
This thread is a bit old, but I just ran into this myself and was able to solve it by using a negative inset. For example, substitute your desired padding values here:
UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
-desiredRightPadding,
-desiredTopPadding,
-desiredLeftPadding);
Combined with the right autolayout constraints, you end up with an auto-resizing button which contains an image and text! Seen below with desiredLeftPadding set to 10.
You can see that the actual frame of the button doesn't encompass the label (since the label is shifted 10 points to the right, outside the bounds), but we've achieved 10 points of padding between the text and the picture.
I wanted to add a 5pt space between my UIButton icon and the label. This is how I achieved it:
UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
// more button config etc
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);
infoButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, -5);
The way contentEdgeInsets, titleEdgeInsets and imageEdgeInsets relate to each other requires a little give and take from each inset. So if you add some insets to the title's left you have to add negative inset on the right and provide some more space (via a positive inset) on the content right.
By adding a right content inset to match the shift of the title insets my text doesn't go outside the bounds of the button.
For Swift 3 based on pegpeg's answer:
extension UIButton {
override open var intrinsicContentSize: CGSize {
let intrinsicContentSize = super.intrinsicContentSize
let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom
return CGSize(width: adjustedWidth, height: adjustedHeight)
}
}
All above did not work for iOS 9+, what i did is:
Add a width constraint (for a minimum width when the button doesn't have any text. The button will auto scale if text is provided)
set the relation to Greater Than or Equal
Now to add a border around the button just use the method:
button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
The option is also available in interface builder. See the Inset. I set left and right to 3. Works like a charm.
The solution I use is to add a width constraint on the button. Then somewhere in initialization, after your text is set, update the width constraint like so:
self.buttonWidthConstraint.constant = self.shareButton.intrinsicContentSize.width + 8;
Where 8 is whatever your inset is.