UIButton 文本边距/填充

Posted 2023-03-06

【中文标题】UIButton 文本边距/填充

【英文标题】：UIButton Text Margin / Padding

【发布时间】：2011-07-18 20:08:52

【问题描述】：

我有以下布局，我正在尝试向左右添加填充..

这些控件是一个禁用的 UIButton。

我创建按钮的代码是这样的：

UIButton *buttonTime = [[UIButton alloc] initWithFrame:CGRectMake(90, 10, 50, 20)]; 
[buttonTime setBackgroundImage:[[UIImage imageNamed:@"bubble.png"] stretchableImageWithLeftCapWidth:9 topCapHeight:13] forState:UIControlStateDisabled];

[buttonTime setTitle:@"27 feb, 2011 11:10 PM" forState:UIControlStateDisabled];             
[buttonTime setTitleColor:[UIColor blackColor] forState:UIControlStateDisabled];
buttonTime.titleLabel.font=[UIFont fontWithName:@"Helvetica" size:8.0]; 
buttonTime.titleLabel.lineBreakMode= UILineBreakModeWordWrap;
[buttonTime setEnabled:FALSE];
[scrollView addSubview:buttonTime];
[buttonTime release];

【问题讨论】：

d= (-_- ) ios 没有任何东西可以与android 的填充相媲美，我的意思是，所有insets（无论是标题还是contentEdgeInsets）都在不断变化内容的视觉位置（从不是实际的宽度或高度，与 Android 的填充不同）。所以，祝你工作愉快！

【参考方案1】：

// Swift
var titleEdgeInsets: UIEdgeInsets!

// Objective-C
@property(nonatomic) UIEdgeInsets titleEdgeInsets;

使用此属性调整按钮标题的有效绘图矩形的大小和重新定位。您可以为四个插图（上、左、下、右）中的每一个指定不同的值。正值会缩小或插入该边缘——将其移近按钮的中心。负值扩展或开始该边缘。使用 UIEdgeInsetsMake 函数为此属性构造一个值。默认值为 UIEdgeInsetsZero。

https://developer.apple.com/documentation/uikit/uibutton/1624010-titleedgeinsets

【讨论】：

当我使用这个方法时，它会使标题标签中的文本在中间被截断。

@Jeremy，您需要为UIButton 找到另一种方法，以在文本长度过长时调整文本字体大小。例如，this post

但字符串的长度不会太长，无法容纳 UIButton 的可用空间。如果标题需要 100px 显示，将 titleEdgeInsets 设置为 (0, 10, 0, 0) 将使标题仅显示 90px 并截断文本。

字体大小必须符合设计规范。按钮的屏幕上有足够的水平空间，但如果我设置titleEdgeInsets，它不会自行自动增长。

@JeremyWhite 我在 Interface Builder 中设置了 content 插入而不是标题插入，它避免了我也遇到的中间截断问题。

【参考方案2】：

contentHorizontalAlignment 属性就像一个魅力，如下所述：

How to set the title of UIButton as left alignment?

【参考方案3】：

您还可以从 Storyboard 或 xib 中的 Interface Builder Size Inspector 设置插入值。

【讨论】：

我要么是盲人，要么是从 xcode 8 中消失了

Cristi，此选项已在 XCode 8 中从 Attribute Inspector 选项卡移至 Size Inspector 选项卡。

Xcode 12 现在......他们一定又把它移动了，因为我找不到它

如果我只需要 Padding for Trailing（接口方向感知填充）怎么办？

【参考方案4】：

我找到了一种简单/巧妙的方法来为文本按钮添加边框（并具有左/右边距）：

创建带有标题的按钮。

在情节提要中放置按钮，对齐您想要的位置，然后添加一个偶数的强制宽度约束（我使用了 20，所以它在每边添加 10 个点）。这将强制边框围绕您创建的宽度。

使用代码创建边框。例如：

myTextButton.backgroundColor = .clear
myTextButton.layer.cornerRadius = 5
myTextButton.layer.borderWidth = 2
myTextButton.layer.borderColor = UIColor.white.cgColor

通过编辑器（现在在 Size Inspector 下）或通过代码将左 titleInset 设置为 2。这似乎使文本居中，但对于各种文本和文本大小，此值可能不同。

这篇文章适用于 Xcode 8.1 和 Swift 3。

【参考方案5】：

接受答案的挑战在于设置 titleEdgeInsets 是限制，如 Apple 文档中所述：

此属性仅用于在布局期间定位标题。 >button 不使用此属性来确定intrinsicContentSize 和>sizeThatFits(_:)。

这意味着设置边距仅在按钮明确调整大小以适合标题标签和边距时才有效。如果标题太长或页边距太大，标题文本可能会被剪掉。这对于您在编译时知道其标题的按钮是可以的，但对于可变长度的按钮标题，可能会造成问题。

另一种适应可变标题长度的方法是将titleEdgeInsets 保留为默认值。设置按钮的标题后，添加明确的宽度和高度约束，以适应按钮的标题标签和额外的边距。例如：

let margin: CGFloat = 10.0

let button = UIButton()

button.setTitle("My Button Title", for .normal)

button.widthAnchor.constraint(equalToConstant: button.titleLabel!.intrinsicContentSize.width + margin * 2.0).isActive = true

button.heightAnchor.constraint(equalToConstant: button.titleLabel!.intrinsicContentSize.height + margin * 2.0).isActive = true

放置按钮而不添加进一步的高度或宽度限制，无论标题长度如何，它都会正确显示。

【讨论】：

Objective-C 版本：[button.widthAnchor constraintEqualToConstant:button.titleLabel.intrinsicContentSize.width + margin * 2.0].active = YES;

【参考方案6】：

如果使用 UIButton 子类不太烦人，此选项也是可行的

class Button: UIButton 
    override var intrinsicContentSize: CGSize 
        get 
            let baseSize = super.intrinsicContentSize
            return CGSize(width: baseSize.width + titleEdgeInsets.left + titleEdgeInsets.right,
                          height: baseSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom)
        
    

然后根据需要使用titleEdgeInsets

 let button = Button()
 ... configure button
 button.titleEdgeInsets = ...

【讨论】：

如果我想在interfacebuilder中使用，先生，如何使用？

【参考方案7】：

设置 content insets 将防止 UIButton 的标题缩小或截断，为文本边距提供填充。

【讨论】：

应该投票得更高！超级简单，适用于动态文本。

简单而且效果很好！作为一名 Android 编码员，我搜索了“xcode uibutton text padding”并找到了这个。

【参考方案8】：

使用上述解决方案，如果按钮周围有边框，则某些文本会被剪掉。例如，一个名为“Delete something”的按钮标签最终会显示“Dele...ing”。如果您遇到此问题，这就是解决方案：

aButton.contentEdgeInsets = UIEdgeInset.init(top: 0, left: 8, bottom: 0, right: 8)

【参考方案9】：

在 Swift 4 中，注意使用 contentEdgeInsets 而不是 titleEdgeInsets：

btn.contentEdgeInsets =  UIEdgeInsetsMake(8, 8, 8, 8)
btn.titleLabel?.lineBreakMode = .byWordWrapping

这将使按钮将其文本换行并保持一行，只要它有空间+在周围添加一些填充

【参考方案10】：

按照 Apple 的建议：

https://developer.apple.com/documentation/uikit/uibutton/1624036-contentedgeinsets

使用contentEdgeInsets

使用此属性调整按钮内容的有效绘图矩形的大小和位置。内容包括按钮图像和按钮标题。您可以为四个插图（上、左、下、右）中的每一个指定不同的值。正值会缩小或插入该边缘 - 将其移近按钮的中心。负值扩展或开始该边缘。使用 init(top:left:bottom:right:) 函数为该属性构造一个值。默认值为零。

按钮使用此属性来确定intrinsicContentSize 和 sizeThatFits(_:)。

斯威夫特

aButton.contentEdgeInsets = UIEdgeInsets(top: YOURVALUE, left: YOURVALUE, bottom: YOURVALUE, right: YOURVALUE)