It does not seem like UIButton instrinsicSize and/or sizeToFit takes a title left edge inset into account, or something is messed up with my expectations.
To demonstrate, I have two Custom type buttons in a view, both with the title "Button". I want to add an image to the button to the left of a title.
var image = UIImage(named: "circledPlay")
image = image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
self.button1.setImage(image, forState: UIControlState.Normal)
self.button1.invalidateIntrinsicContentSize()
self.button1.sizeToFit()
self.button2.setImage(image, forState: UIControlState.Normal)
self.button2.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0)
self.button2.invalidateIntrinsicContentSize()
self.button2.sizeToFit()
The result is as follows:
Note the second button is being truncated.
So my question would be if anybody has seen this before (and hopefully has a solution) or am I confused and this is behaving as expected (and hopefully knows the right way to do this)?
As it says in the documentation, for titleEdgeInsets: "The button does not use this property to determine intrinsicContentSize and sizeThatFits:".
So, setting the titleEdgeInsets just moves the title label, but doesn't affect the size of the button. If you want the button to have more padding around the content, set the contentEdgeInsets as well. I don't think you need to call either sizeToFit, or invalidateIntrinsicContentSize (but 'm not sure about that).
You can use the contentEdgeInsets and titleEdgeInsets to implement that.
button2.setImage(image, for: .normal)
button2.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
button2.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 10)
button2.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, -10)
button2.setTitle("Button", for: .normal)
button2.sizeToFit()
Related
I have a UIButton with the label on the left side and UIImageView on the right side. The button is used to open a UIPicker. When a value is picked in the picker the same value is shown in button title. When the title changes (or, more accurately, when to uilabel has a width that screws the UI up) the title and icon is moved and the UI does not look good.
When a title with too long text is used the word is clipped and when it's too short the alignment is messed up.
I've tried changing the label frame so it can be constant, whatever the text, and left aligning the text so the jumping stops. I added adjustsFontSizeToFitWidth = true which kind of works, but with a longer title the text will get too small. I've also tried recreating/rerendering the button when the title changes but all attempts fail.
lazy var sortButton = { () -> UIButton in
let btn = UIButton()
btn.addTarget(self, action: #selector(sortButtonPressed), for: .touchUpInside)
btn.setTitle(NSLocalizedString("Sortera", comment: ""), for: .normal)
btn.titleLabel?.text = btn.titleLabel?.text?.uppercased()
btn.setImage(UIImage(named: "ios-down"), for: .normal)
btn.translatesAutoresizingMaskIntoConstraints = false
btn.setTitleColor(Colors.FILTER_BUTTON_TEXT_COLOR, for: .normal)
btn.titleLabel?.adjustsFontSizeToFitWidth = true
btn.titleLabel?.font = UIFont(name: Fonts.AkzidenzGroteskProMd, size: 16)
btn.backgroundColor = Colors.BUTTON_BACKGROUND_GRAY
btn.imageView?.contentMode = .scaleAspectFit
btn.imageEdgeInsets = UIEdgeInsets(top: 16, left: (btn.titleLabel?.frame.size.width)! - buttonInsideOffset/2, bottom: 16, right: -(btn.titleLabel?.frame.size.width)! + buttonInsideOffset/2)
btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(btn.titleLabel?.frame.size.width)! + buttonInsideOffset, bottom: 0, right: (btn.titleLabel?.frame.size.width)! - buttonInsideOffset)
return btn
}()
I want all button to like like this, whatever the title text:
However, when the text is too small it looks like this:
or when it's too long:
You can do it in many way but the simplest way :
Take a UIView and then others two-element (a label a imageView) set in this View and make it look like button then set constraint as you want. Then addTarget to label and do all functionality to that that target selector method.
If you dont want button image to be shifted to the right or left then you have to constraint independent of the button's title label
btn.imageView?.frame = CGRect(x: 0, y: 0, width: 20, height: 20) // Or any size you want
// NB: I ommited left insets intentionally
btn.imageEdgeInsets.top = 16
btn.imageEdgeInsets.bottom = 16
btn.imageEdgeInsets.right = 16
Then constraint your label dependent to the imageView position, that way only label size will change without affecting the position of image.
btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(btn.titleLabel?.frame.size.width)! + buttonInsideOffset, bottom: 0, right: btn.imageView?.frame.width + 10)
Lastly, Since the frame is fixed size, I think you need to limit the font scaling factor to the min size you want and truncate the tail when that size is reached. If you don't want to truncate tail then you have to enable multiline titleLabel (Which I think you don't want this).
btn.titleLabel?.minimumScaleFactor = 0.5 // Or whatever minimum scale you wish
btn.titleLabel?.lineBreakMode = NSLineBreakMode.byTruncatingTail // Since button size is fixed and you want to limit font size then the best option is to truncate tail
Hello I want to make UIButton title label as a circle. So I did in this way.
btnAttachments.setTitle(strcount, for: .normal)
btnAttachments.setTitleColor(UIColor.white, for: .normal)
btnAttachments.titleLabel?.backgroundColor=com.getRedcolor()
btnAttachments.titleLabel?.font=UIFont.init(name: "Bariol", size: 15)
btnAttachments.titleLabel?.layer.cornerRadius=(btnAttachments.titleLabel?.frame.width)!/2
But it doesn't make it as a circle. It looks like this code doen't affect on the titleLabel
UPDATE
This is what I want to make
Please help me
Thanks
well first you have to verify that the uibutton has its clipsToBounds true, but incase that s already set and the problem still there, then you probably trying to achieve this in the viewDidLoad which "should" work, but for some reason in some of the xcode 8 versions in the viewDidLoad the layout are still aint final (objects doesnt have their true dimensions set yet) you can verify this by logging the uibutton frame right before you assign the corner radius if you find some incoherent that this is probably the issue , incase this is the issue then you just need to move your code to viewWillAppear
You are missing to set MasToBounds
btnAttachments.titleLabel?.layer.masksToBounds = true;
add this you code will work fine ,
You should set corner redius in viewDidLayoutSubViews or drawRect(usually in UIView class)
i hope this will help u
Use the following code to get desired result:
let btnAttachments = UIButton(type: .custom)
btnAttachments.setTitle(strcount, for: .normal).setTitleColor(UIColor.white, for: .normal)
btnAttachments.frame = CGRect(x: 160, y: 100, width: 50, height: 50)
btnAttachments.titleLabel?.backgroundColor=com.getRedcolor()
btnAttachments.titleLabel?.font=UIFont.init(name: "Bariol", size: 15)
btnAttachments.layer.cornerRadius = 0.5 * button.bounds.size.width
btnAttachments.clipsToBounds = true
I am trying to create a UIButton that contains a UIImage and text. So far I have managed to do that but I can't make it look pretty because the button width is half of the screen size (and this means the proportions are not right on big screens when I set the image)
Is there a way to position the Image exactly before the text Label in the button? Now I am doing this:
economicsButton.imageEdgeInsets = UIEdgeInsets(top: 15,left: 10,bottom: 15,right: 30)
economicsButton.titleEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 0,right: 0)
Try this
let somespace: CGFloat = 10
self.economicsButton.setImage(UIImage(named: "cross"), forState: UIControlState.Normal)
self.economicsButton.imageEdgeInsets = UIEdgeInsetsMake(0, self.economicsButton.frame.size.width - somespace , 0, 0)
print(self.economicsButton.imageView?.frame)
self.economicsButton.titleEdgeInsets = UIEdgeInsetsMake(0,(self.economicsButton.imageView?.frame.width)! + somespace, 0, 10 )
check the original answer Align image on right side
I've been trying to find a solution to this problem for the past two days and still nothing I have tried works for me. Some solutions I have tried either stretch or completely mess up my custom image but nothing removes the right padding. Here is my code below as well as the result. Notice how the right bar button has a bigger space than the left system one.
var saveButton: UIButton = UIButton(frame: CGRectMake(0, 0, 32, 32))
saveButton.addTarget(self, action: "saveAction:", forControlEvents: .TouchUpInside)
let img = UIImage(named: "save")
saveButton.setBackgroundImage(img, forState: .Normal)
var saveBarButton: UIBarButtonItem = UIBarButtonItem(customView: saveButton)
self.navigationItem.setRightBarButtonItem(saveBarButton, animated: false)
Alright guys, I've found a solution that works pretty well for me. Instead of creating and setting the bar button item in code I added one in storyboard and set it's left margin in size inspector to -6 (or whatever value you like) and it's right margin to 6 (again whatever value you prefer note that the two values must be the same values but one is positive and the other is negative). Then I set it's image to the image I desired in the attributes inspector. If for some reason you want to change the image in code you can do so like this:
barButtonOutlet.image = UIIMage(named: "yourImage") as UIImage?
Hope this helps some of you out.
This is my solution. Try..
rightBtn.imageInsets = UIEdgeInsets(top: 0, left: -13.0, bottom: 0, right: 13.0)
self.navigationItem.rightBarButtonItem = rightBtn
I'm trying to have an UIButton with an image in the middle of it. I want this button to have edge insets of 10px. When I set these, I have the correct visual result but I can only click in a little area of this button.
How can I have the same visual but be able to click on the whole button ?
Here is my code :
self.descriptionViewMaleButton.setImage(UIImage(icon: "icon-male", backgroundColor: UIColor.whiteColor(), iconColor: UIColor.blackColor(), iconScale: 1.0, andSize: CGSize(width: 50, height: 50)), forState: UIControlState.Normal)
self.descriptionViewMaleButton.layer.borderColor = UIColor.grayColor().CGColor
self.descriptionViewMaleButton.layer.borderWidth = 1.0
self.descriptionViewMaleButton.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
And the visual result :
EDIT : I am able to click on the whole button but it is highlighting only the image.
EDIT : I "fixed" that by implementing the highlighting myself. Anyway, if someones know more about this issue, I would be glad to know about it.