UIButton 文本边距/填充

我有以下布局,我试图添加一个填充左边和右边. 。

控件是禁用的 UIButton。

enter image description here

我创建按钮的代码如下:

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];
61250 次浏览
// Swift
var titleEdgeInsets: UIEdgeInsets!


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

使用此属性可以调整按钮标题的有效绘图矩形的大小和重新定位。您可以为四个 insets (顶部、左边、底部、右边)中的每一个指定不同的值。一个正值会缩小或插入那个边缘,使其更靠近按钮的中心。负值会扩大或开启这个边缘。使用 UIEdgeInsetsMake 函数为此属性构造值。默认值为 UIEdgeInsetsZero。

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

contentHorizontalAlignment的特性就像一种魅力,正如这里解释的那样:

如何设置 UIButton 的标题为左对齐?

你也可以在情节串连图板或 xib 中设置 Interface Builder 大小检查器的插入值。

Interface Builder Size Inspector

我找到了一种简单/粗糙的方法来给文本按钮添加边框(并且有左右边距) :

  1. 创建带标题的按钮。

  2. 放置按钮在故事板,对齐你想要的地方,然后添加一个强制宽度约束是一个偶数(我使用20,所以它增加了10点,每边)。这将强制您创建的宽度周围的边框。

  3. 使用代码创建边框。例如:

    myTextButton.backgroundColor = .clear
    myTextButton.layer.cornerRadius = 5
    myTextButton.layer.borderWidth = 2
    myTextButton.layer.borderColor = UIColor.white.cgColor
    
  4. Set left titleInset to 2 via editor (now under Size Inspector) or by code. This seems to center the text, but this value may be different for various texts and text sizes.

This post is for Xcode 8.1 and Swift 3.

正如苹果公司的文档中所指出的那样,设置 titleEdgeInsets是一个局限性,这是公认答案面临的挑战:

此属性仅用于在布局期间定位标题。> 按钮不使用此属性确定 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

定位按钮而不添加进一步的高度或宽度约束,它将出现正确的标题长度无关。

如果使用 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 = ...

设置 内容插入将防止 UIButton的标题缩小或截断,给文本边距一个填充。

故事板

content edges

密码

ContentEdgeInsets = UIEdgeInsets (上: 0,左: 5,下: 0,右: 5)

在上面的解决方案中,如果按钮周围有边框,就会剪掉一些文本。例如,一个名为“ Delete something”的按钮标签最终显示“ Delete... ing”。如果你有这个问题,这就是解决办法:

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

在 Swift 4中,请注意使用 contentEdgeInsets而不是 titleEdgeInsets:

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

这将使按钮包装其文本,并保持它一行,只要有一个空间为它 + 添加一些填充左右

正如苹果的建议:

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

使用 contentEdgeInsets

使用此属性可以调整按钮内容的有效绘图矩形的大小和重新定位。内容包括按钮图像和按钮标题。您可以为四个 insets (顶部、左边、底部、右边)中的每一个指定不同的值。一个正值会缩小或插入那个边缘,使其更靠近按钮的中心。负值会扩大或开启这个边缘。使用 init (top: left: bottom: right:)函数为此属性构造一个值。默认值为零。

该按钮使用此属性确定 intrinsicContentSize 和 SizeThatFits (_:).

斯威夫特

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