UIButton文本边距/填充


70

我有以下布局,并且我想在左侧和右侧添加填充。

控件是禁用的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];

Answers:


80
// Swift
var titleEdgeInsets: UIEdgeInsets!

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

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

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


10
当我使用此方法时,它会使标题标签中的文本在中间被截断。
杰里米·怀特

@Jeremy,您需要找到另一种方法来UIButton在长度过长时调整文本字体大小。例如,此帖子
AechoLiu

但是字符串的长度不能太长,无法容纳UIButton的可用空间。如果标题需要100像素,显示,设置titleEdgeInsets(0, 10, 0, 0)会给标题只有90像素显示和截断文本。
杰里米·怀特

3
字体大小必须与设计规格相符。屏幕上有很多用于按钮的水平空间,但是如果我设置的话,它不会自动增长titleEdgeInsets
杰里米·怀特

15
@JeremyWhite我在Interface Builder中设置了内容插图,而不是标题插图,它避免了我也遇到的中间截断问题。
bugloaf

95

您还可以通过情节提要或xib中的“界面生成器大小”检查器设置插入值。

界面生成器大小检查器


6
我要么是盲人,要么从xcode 8中消失了
Cristi Băluță 16'Oct

19
Cristi,此选项已在XCode 8中从“属性检查器”选项卡移至“大小检查器”选项卡。
阿披(Abhi)

50

设置内容插图将防止UIButton的标题缩小或被截断,从而使文本边距具有填充作用。

内容边缘


7
应该被选得更高!超级简单,可以处理动态文本。
最多

1
简单,效果很好!作为一个Android编码器,我搜索了“ xcode uibutton文本填充”并找到了它。
戴尔

9

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

此属性仅用于在布局过程中定位标题。>按钮不使用此属性来确定internalContentSize和> 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

放置按钮时无需添加进一步的高度或宽度限制,并且无论标题长度如何,按钮都将正确显示。


第二行代码上有错字吗?它应该是internalContentSize.height而不是internalContentSize.width吗?
迈克尔·彼得森

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

8

在Swift 4中,请注意contentEdgeInsetsnot的使用titleEdgeInsets

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

这将使按钮将其文字换行并保持一行,只要有空格,并在其周围添加一些填充


4

如果此选项不太讨厌使用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中使用,先生如何使用?
kemdo

4

通过上述解决方案,如果按钮周围有边框,则某些文本将被剪切掉。例如,名为“ Delete something”的按钮标签最终显示“ Dele ... ing”。如果您遇到此问题,这是解决方案:

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


1

我发现了一种简单/容易的方法来向文本按钮添加边框(并具有左/右边界):

  1. 创建带有标题的按钮。

  2. 将按钮放在情节提要中,在所需位置对齐,然后添加一个强制宽度约束,该约束是偶数(我用了20,所以它在每一侧都添加了10个点)。这将迫使边框围绕您创建的宽度。

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

    myTextButton.backgroundColor = .clear
    myTextButton.layer.cornerRadius = 5
    myTextButton.layer.borderWidth = 2
    myTextButton.layer.borderColor = UIColor.white.cgColor
    
  4. 通过编辑器(现在位于Size Inspector下)或代码将左titleInset设置为2。这似乎使文本居中,但是此值对于各种文本和文本大小可能有所不同。

这篇文章是针对Xcode 8.1和Swift 3的。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.