如果我只在按鈕中放置一個圖像，然后將imageEdgeInsets設(shè)置為更靠近頂部，則圖像將居中，并且所有工作都將按預(yù)期進行：[button setImage:image forState:UIControlStateNormal];[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, 0.0)];如果我僅在按鈕中放置文本，然后將titleEdgeInsets設(shè)置為更靠近底部，則文本將居中，并且一切正常[button setTitle:title forState:UIControlStateNormal];[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, -30, 0.0)];但是，如果我將4行放在一起，則文本會干擾圖像，并且都失去中心對齊。我所有的圖像都有30像素的寬度，如果我在setSettletleEdgeInsets的UIEdgeInsetMake的左側(cè)參數(shù)中放了30個像素，則文本將再次居中。問題在于圖像永遠不會居中，因為它似乎取決于button.titleLabel的大小。我已經(jīng)嘗試過使用按鈕大小，圖像大小，titleLabel大小進行許多計算，并且永遠都無法完美地居中。有人已經(jīng)遇到了同樣的問題嗎？
3 回答
呼如林
TA貢獻1798條經(jīng)驗 獲得超3個贊
對于它的價值，這是一種將圖像居中放置在文本上方而不使用任何幻數(shù)的通用解決方案。請注意，以下代碼已過時，您可能應(yīng)該使用以下更新版本之一：
// the space between the image and text
CGFloat spacing = 6.0;
// lower the text and push it left so it appears centered
// below the image
CGSize imageSize = button.imageView.frame.size;
button.titleEdgeInsets = UIEdgeInsetsMake(
0.0, - imageSize.width, - (imageSize.height + spacing), 0.0);
// raise the image and push it right so it appears centered
// above the text
CGSize titleSize = button.titleLabel.frame.size;
button.imageEdgeInsets = UIEdgeInsetsMake(
- (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);
以下版本包含以下注釋中推薦的支持iOS 7+的更改。我還沒有親自測試過此代碼，因此不知道它的運行效果如何，或者如果在以前的iOS版本中使用，它是否會損壞。
// the space between the image and text
CGFloat spacing = 6.0;
// lower the text and push it left so it appears centered
// below the image
CGSize imageSize = button.imageView.image.size;
button.titleEdgeInsets = UIEdgeInsetsMake(
0.0, - imageSize.width, - (imageSize.height + spacing), 0.0);
// raise the image and push it right so it appears centered
// above the text
CGSize titleSize = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName: button.titleLabel.font}];
button.imageEdgeInsets = UIEdgeInsetsMake(
- (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);
// increase the content height to avoid clipping
CGFloat edgeOffset = fabsf(titleSize.height - imageSize.height) / 2.0;
button.contentEdgeInsets = UIEdgeInsetsMake(edgeOffset, 0.0, edgeOffset, 0.0);
Swift 5.0版本
extension UIButton {
func alignVertical(spacing: CGFloat = 6.0) {
guard let imageSize = imageView?.image?.size,
let text = titleLabel?.text,
let font = titleLabel?.font
else { return }
titleEdgeInsets = UIEdgeInsets(
top: 0.0,
left: -imageSize.width,
bottom: -(imageSize.height + spacing),
right: 0.0
)
let titleSize = text.size(withAttributes: [.font: font])
imageEdgeInsets = UIEdgeInsets(
top: -(titleSize.height + spacing),
left: 0.0,
bottom: 0.0, right: -titleSize.width
)
let edgeOffset = abs(titleSize.height - imageSize.height) / 2.0
contentEdgeInsets = UIEdgeInsets(
top: edgeOffset,
left: 0.0,
bottom: edgeOffset,
right: 0.0
)
}
}
慕萊塢森
TA貢獻1810條經(jīng)驗 獲得超4個贊
找到了。
首先，配置titleLabel（由于樣式，例如，粗體，斜體等）的文本。然后，setTitleEdgeInsets考慮圖像的寬度：
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitle:title forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont boldSystemFontOfSize:10.0]];
// Left inset is the negative of image width.
[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -image.size.width, -25.0, 0.0)];
之后，請setTitleEdgeInsets考慮文本邊界的寬度：
[button setImage:image forState:UIControlStateNormal];
// Right inset is the negative of text bounds width.
[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, -button.titleLabel.bounds.size.width)];
現(xiàn)在，圖像和文本將居中（在此示例中，圖像顯示在文本上方）。
有只小跳蛙
TA貢獻1824條經(jīng)驗 獲得超8個贊
您可以使用此Swift擴展來做到這一點，該擴展部分基于Jesse Crossen的回答：
extension UIButton {
func centerLabelVerticallyWithPadding(spacing:CGFloat) {
// update positioning of image and title
let imageSize = self.imageView.frame.size
self.titleEdgeInsets = UIEdgeInsets(top:0,
left:-imageSize.width,
bottom:-(imageSize.height + spacing),
right:0)
let titleSize = self.titleLabel.frame.size
self.imageEdgeInsets = UIEdgeInsets(top:-(titleSize.height + spacing),
left:0,
bottom: 0,
right:-titleSize.width)
// reset contentInset, so intrinsicContentSize() is still accurate
let trueContentSize = CGRectUnion(self.titleLabel.frame, self.imageView.frame).size
let oldContentSize = self.intrinsicContentSize()
let heightDelta = trueContentSize.height - oldContentSize.height
let widthDelta = trueContentSize.width - oldContentSize.width
self.contentEdgeInsets = UIEdgeInsets(top:heightDelta/2.0,
left:widthDelta/2.0,
bottom:heightDelta/2.0,
right:widthDelta/2.0)
}
}
這定義了一個centerLabelVerticallyWithPadding適當(dāng)設(shè)置標(biāo)題和圖像插圖的函數(shù)。
它還設(shè)置contentEdgeInsets，我認(rèn)為這是確保intrinsicContentSize仍然正確運行所必需的，這將需要使用“自動布局”。
我相信從子類上繼承UIButton的所有解決方案在技術(shù)上都是非法的，因為您不應(yīng)該將UIKit控件子類化。即，從理論上講，它們可能會在將來的版本中中斷。
- 3 回答
- 0 關(guān)注
- 607 瀏覽
添加回答
舉報
0/150
提交
取消