iOS Buttons' text and image are centered on estimates that may be a pixel off at times

[tj-devel709]

Description

On iOS, there are situations where the text and/or image are off-center when the image is on the top or bottom of the button. I believe this happens more so when the title is truncated in the different LineBreakModes.

Prior to this commit, there was an effort to use the UIButton.TitleLabel.Bounds to get the exact width and height of the button's title and use that to move the TitleEdgeInsets and ImageEdgeInsets which happens here. While on the creation of the button, this UIButton.TitleLabel.Bounds is set and accurate. However, when the title is changed or other size changes happen in the button, during our layout pass the UIButton.TitleLabel.Bounds is still set to the old title and is not yet updated. We then tried to use the TitleLabel.Bounds for the first pass and then manually measure the estimated TitleLabel size here, but the issue lies in that the estimation can be a little off from the actual size. We then get into situations where if we have a button with a text, change that text, then change it back to the original, this new button size and position can be different than the original which is not great either.

Efforts have also gone into using SizeThatFits() on the UIButton.TitleLabel.Bounds but the issue is that if the text is truncated, the SizeThatFits() call will not use the truncated size that will appear in the TitleLabel but will include a much larger size that cannot fit into that button.

Currently, the button TitleLabel is measured each time using the GetTitleBoundingRect method which has the chance of being a pixel or two off center but at least keeps the position of the button consistent.

What I have found in experimentation is that inside the GetTitleBoundingRect method when we call GetBoundingRect, using the flag NSStringDrawingOptions.UsesDeviceMetrics gives a better measure of the truncated text including things like the ellipses and partial characters that are cut off, but the height tends to be more accurate without that flag. I recall some situations where the height did not include multiple lines or something like that when the NSStringDrawingOptions.UsesDeviceMetrics was set. As a result, I have the width of the BoundingRect coming from the GetBoundingRect call that uses NSStringDrawingOptions.UsesDeviceMetrics and the height of the rect coming from a GetBoundingRect call that does not use that flag.

An example of this can be found here, in comparing the old image to the new one inside src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/VerifyButtonPage1_NoBorder.png.

It is worth noting that in most of the buttons in our tests, this "always measuring the title ourselves instead of using the TitleLabel.Bounds" method did not make a difference since our estimation was good enough and in this case above where it is off, it is hard to even notice. There may be situations though where it is more noticeable.

Steps to Reproduce

This one is a little hard to recreate, but by looking at the example diff in the image here, you can see there is a difference in the actual size of the UIButton.TitleLabel.Bounds and the new estimated size by maybe a pixel.

Link to public reproduction project repository

No response

Version with bug

8.0.92 SR9.2

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[similar-issues-ai]

We've found some similar issues:

• iOS Buttons without enough padding are truncated in certain scenarios #24746 , similarity score: 81%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

[jaosnz-rep]

This issue can be reproduced at iOS platform on the latest 17.13 Preview 1(9.0.10 & 8.0.92).