Mixing
UIButton sizing wrong with image and title inset
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)?
ios swift uibutton
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
add a comment |
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)?
ios swift uibutton
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
You can subclass UIButton and override intrinsicContentSize.
– Aaron Brager
Apr 20 '15 at 2:25
add a comment |
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)?
ios swift uibutton
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
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)?
ios swift uibutton
ios swift uibutton
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
edited Nov 29 '17 at 22:51
vagrant
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
asked Apr 20 '15 at 2:19
vagrantvagrant
4791518
4791518
You can subclass UIButton and override intrinsicContentSize.
– Aaron Brager
Apr 20 '15 at 2:25
add a comment |
You can subclass UIButton and override intrinsicContentSize.
– Aaron Brager
Apr 20 '15 at 2:25
You can subclass UIButton and override intrinsicContentSize.
– Aaron Brager
Apr 20 '15 at 2:25
You can subclass UIButton and override intrinsicContentSize.
– Aaron Brager
Apr 20 '15 at 2:25
add a comment |
2 Answers
2
active
oldest
votes
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).
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
RTFM would seem to apply then, as I missed that. I can't say that I think it makes much sense if the world of autolayout that would be considered a correct behavior, but it is what it is. I guess I should open a Radar with as much. Thanks.
– vagrant
Apr 20 '15 at 2:42
@vagrant, Actually, I think this make sense in the world of auto layout. Using these 2 properties allows you to adjust the padding around the content of the button and the placement of the title (and image) without having to set an explicit width for the button, so that it can still expand or contract appropriately when the length of the title changes.
– rdelmar
Apr 20 '15 at 2:56
add a comment |
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()
edited Nov 21 '18 at 16:59
shim
4,02064677
answered Apr 12 '18 at 6:54
YuriYuri
4318
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29738340%2fuibutton-sizing-wrong-with-image-and-title-inset%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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).
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
RTFM would seem to apply then, as I missed that. I can't say that I think it makes much sense if the world of autolayout that would be considered a correct behavior, but it is what it is. I guess I should open a Radar with as much. Thanks.
– vagrant
Apr 20 '15 at 2:42
@vagrant, Actually, I think this make sense in the world of auto layout. Using these 2 properties allows you to adjust the padding around the content of the button and the placement of the title (and image) without having to set an explicit width for the button, so that it can still expand or contract appropriately when the length of the title changes.
– rdelmar
Apr 20 '15 at 2:56
add a comment |
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).
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
RTFM would seem to apply then, as I missed that. I can't say that I think it makes much sense if the world of autolayout that would be considered a correct behavior, but it is what it is. I guess I should open a Radar with as much. Thanks.
– vagrant
Apr 20 '15 at 2:42
@vagrant, Actually, I think this make sense in the world of auto layout. Using these 2 properties allows you to adjust the padding around the content of the button and the placement of the title (and image) without having to set an explicit width for the button, so that it can still expand or contract appropriately when the length of the title changes.
– rdelmar
Apr 20 '15 at 2:56
add a comment |
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).
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
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).
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
answered Apr 20 '15 at 2:38
rdelmarrdelmar
98.4k10187208
98.4k10187208
RTFM would seem to apply then, as I missed that. I can't say that I think it makes much sense if the world of autolayout that would be considered a correct behavior, but it is what it is. I guess I should open a Radar with as much. Thanks.
– vagrant
Apr 20 '15 at 2:42
@vagrant, Actually, I think this make sense in the world of auto layout. Using these 2 properties allows you to adjust the padding around the content of the button and the placement of the title (and image) without having to set an explicit width for the button, so that it can still expand or contract appropriately when the length of the title changes.
– rdelmar
Apr 20 '15 at 2:56
add a comment |
RTFM would seem to apply then, as I missed that. I can't say that I think it makes much sense if the world of autolayout that would be considered a correct behavior, but it is what it is. I guess I should open a Radar with as much. Thanks.
– vagrant
Apr 20 '15 at 2:42
@vagrant, Actually, I think this make sense in the world of auto layout. Using these 2 properties allows you to adjust the padding around the content of the button and the placement of the title (and image) without having to set an explicit width for the button, so that it can still expand or contract appropriately when the length of the title changes.
– rdelmar
Apr 20 '15 at 2:56
RTFM would seem to apply then, as I missed that. I can't say that I think it makes much sense if the world of autolayout that would be considered a correct behavior, but it is what it is. I guess I should open a Radar with as much. Thanks.
– vagrant
Apr 20 '15 at 2:42
RTFM would seem to apply then, as I missed that. I can't say that I think it makes much sense if the world of autolayout that would be considered a correct behavior, but it is what it is. I guess I should open a Radar with as much. Thanks.
– vagrant
Apr 20 '15 at 2:42
@vagrant, Actually, I think this make sense in the world of auto layout. Using these 2 properties allows you to adjust the padding around the content of the button and the placement of the title (and image) without having to set an explicit width for the button, so that it can still expand or contract appropriately when the length of the title changes.
– rdelmar
Apr 20 '15 at 2:56
@vagrant, Actually, I think this make sense in the world of auto layout. Using these 2 properties allows you to adjust the padding around the content of the button and the placement of the title (and image) without having to set an explicit width for the button, so that it can still expand or contract appropriately when the length of the title changes.
– rdelmar
Apr 20 '15 at 2:56
add a comment |
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()
edited Nov 21 '18 at 16:59
shim
4,02064677
answered Apr 12 '18 at 6:54
YuriYuri
4318
add a comment |
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()
edited Nov 21 '18 at 16:59
shim
4,02064677
answered Apr 12 '18 at 6:54
YuriYuri
4318
add a comment |
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()
edited Nov 21 '18 at 16:59
shim
4,02064677
answered Apr 12 '18 at 6:54
YuriYuri
4318
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()
edited Nov 21 '18 at 16:59
shim
4,02064677
answered Apr 12 '18 at 6:54
YuriYuri
4318
edited Nov 21 '18 at 16:59
shim
4,02064677
edited Nov 21 '18 at 16:59
shim
4,02064677
edited Nov 21 '18 at 16:59
shim
4,02064677
4,02064677
answered Apr 12 '18 at 6:54
YuriYuri
4318
answered Apr 12 '18 at 6:54
YuriYuri
4318
answered Apr 12 '18 at 6:54
YuriYuri
4318
4318
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29738340%2fuibutton-sizing-wrong-with-image-and-title-inset%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can subclass UIButton and override intrinsicContentSize.
– Aaron Brager
Apr 20 '15 at 2:25