我想在两行文本的左边放置一个图标，这样在图像和文本开始之间有大约2-3像素的空间。控件本身水平居中对齐(通过接口生成器设置)
这个按钮应该是这样的:
| |
|[Image] Add To |
| Favorites |
我试图配置这与contenttedgeinset, imageEdgeInsets和titleEdgeInsets无效。我知道，负值会使边缘扩大，而正值会使边缘缩小，使边缘更接近中心。
我试着:
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];
但这并没有正确显示它。我一直在调整这些值，但从-5到-10的左插入值似乎不会以预期的方式移动它。-10将文本一直向左移动，所以我期望-5将它从左侧移动一半，但事实并非如此。
嵌套背后的逻辑是什么?我不熟悉图像放置和相关术语。
我用这个SO问题作为参考，但我的价值观有些不对。
UIButton:如何使用imageEdgeInsets和titleEdgeInsets居中图像和文本?
我的垂直定心方法:
extension UIButton {
/// Layout image and title with vertical centering.
/// - Parameters:
/// - size: The button size.
/// - imageTopOffset: Top offset for image.
/// - spacing: Distance between image and title.
func verticalAlignmentByCenter(size: CGSize, imageTopOffset: CGFloat, spacing: CGFloat) {
let contentRect = contentRect(forBounds: CGRect(origin: .zero, size: size))
let imageRect = imageRect(forContentRect: contentRect)
let titleRect = titleRect(forContentRect: contentRect)
let imageTop = imageTopOffset - imageRect.origin.y
let imageLeft = contentRect.width/2 - imageRect.width/2
imageEdgeInsets = UIEdgeInsets(top: imageTop, left: imageLeft, bottom: 0, right: 0)
let titleTop = imageTopOffset + spacing + imageRect.height - titleRect.origin.y
let titleLeft = titleRect.origin.x - contentRect.width/2 - titleRect.width/2
titleEdgeInsets = UIEdgeInsets(top: titleTop, left: titleLeft, bottom: 0, right: 0)
}
}
我同意imageEdgeInsets和titleEdgeInsets的文档应该更好，但我想出了如何获得正确的定位而不求助于试验和错误。
这个问题的大意是，如果你想同时以文本和图像为中心。我们不希望图像和文本分别居中，我们希望图像和文本作为一个单独的实体放在一起。这实际上是UIButton已经做的，所以我们只需要调整间距。
CGFloat spacing = 10; // the amount of spacing to appear between image and title
tabBtn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
tabBtn.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
我还把它变成了UIButton的一个类别，这样它就很容易使用:
UIButton + h位置。
@interface UIButton(ImageTitleCentering)
-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing;
@end
公元UIButton +位置。
@implementation UIButton(ImageTitleCentering)
-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing {
self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
}
@end
所以现在我要做的就是
[button centerButtonAndImageWithSpacing:10];
我每次都能得到我想要的。没有更多的混乱与边缘插入手动。
编辑:交换图像和文本
回复@Javal的评论
使用相同的机制，我们可以交换图像和文本。要完成交换，只需使用负间距，但也包括文本和图像的宽度。这将要求帧是已知的和布局已经执行。
[self.view layoutIfNeeded];
CGFloat flippedSpacing = -(desiredSpacing + button.currentImage.size.width + button.titleLabel.frame.size.width);
[button centerButtonAndImageWithSpacing:flippedSpacing];
当然，你可能会想要为此创建一个很好的方法，可能会添加第二个类别方法，这是留给读者的练习。
