logo标签列表

如何在Swift中设置UIButton的标题内边距（插入）

iosswiftxcodeuibuttonpadding
19

我是一名初学者iOS程序员，尝试开发iOS应用程序。 我在主页上放置了几个按钮，就像图片中显示的那样。

Front Page

请看红圈。 图片和标题之间没有空格（填充/插图）。

实际上，我已经使用这段代码设置了图片和标题的插图，但它并没有给出任何不同的结果。

    buttonDoctor.titleLabel?.numberOfLines = 2
    buttonDoctor.titleLabel?.lineBreakMode = .byWordWrapping
    buttonMedical.titleLabel?.numberOfLines = 2
    buttonMedical.titleLabel?.lineBreakMode = .byWordWrapping
    buttonQuestion.titleLabel?.numberOfLines = 2
    buttonQuestion.titleLabel?.lineBreakMode = .byWordWrapping
    buttonLocation.titleLabel?.numberOfLines = 2
    buttonLocation.titleLabel?.lineBreakMode = .byWordWrapping
    buttonPromotion.titleLabel?.numberOfLines = 2
    buttonPromotion.titleLabel?.lineBreakMode = .byWordWrapping
    buttonDoctor.image(for: .normal)
    buttonMedical.image(for: .normal)
    buttonQuestion.image(for: .normal)
    buttonLocation.image(for: .normal)
    buttonPromotion.image(for: .normal)
    //buttonDoctor.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonPromotion.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonLocation.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonQuestion.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonMedical.titleLabel?.adjustsFontSizeToFitWidth = true



    let btnimg = try? UIImage(named: "doctorschedule.png")
    var newimg = imageResize(image: btnimg!!, scaledTo: CGSize(width: 36, height: 36))
    buttonDoctor.setImage(newimg, for: .normal)
    buttonDoctor.contentMode = .scaleAspectFit
    buttonDoctor.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonDoctor.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg2 = try? UIImage(named: "medicalcheck.png")
    var newimg2 = imageResize(image: btnimg2!!, scaledTo: CGSize(width: 36, height: 36))
    buttonMedical.setImage(newimg2, for: .normal)
    buttonMedical.contentMode = .scaleAspectFit
    buttonMedical.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonMedical.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg3 = try? UIImage(named: "survey.png")
    var newimg3 = imageResize(image: btnimg3!!, scaledTo: CGSize(width: 36, height: 36))
    buttonQuestion.setImage(newimg3, for: .normal)
    buttonQuestion.contentMode = .scaleAspectFit
    buttonQuestion.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonQuestion.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg4 = try? UIImage(named: "location.png")
    var newimg4 = imageResize(image: btnimg4!!, scaledTo: CGSize(width: 36, height: 36))
    buttonLocation.setImage(newimg4, for: .normal)
    buttonLocation.contentMode = .scaleAspectFit
    buttonLocation.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonLocation.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg5 = try? UIImage(named: "promotion.png")
    var newimg5 = imageResize(image: btnimg5!!, scaledTo: CGSize(width: 36, height: 36))
    buttonPromotion.setImage(newimg5, for: .normal)
    buttonPromotion.contentMode = .scaleAspectFit
    buttonPromotion.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonPromotion.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

我已经尝试过几个插入值，但结果没有任何不同。请问我的代码有问题吗？

请有人好心帮我解决这个问题。谢谢

注：我还有一个问题。 我想在首页上方放置一个图像徽标（见橙色圆圈），但我不知道该怎么做。由于导航栏中没有插入图像的属性。 FYI，这只是我从storyboard放置在 UIViewController 中的常规导航栏（而不是 UINavigationController ）。如果您不介意，请给些建议。

注意：圆圈中的所有内容都只是常规UIBUTTON，而不是UIImage和UILabel或UIbutton。 请查看我的代码。

为什么不在UIImageView和UILabel之间添加一个标准的距离约束呢？只需使用新的约束更新自定义单元格即可。这正是自动布局最擅长的。 - Robotic Cat
为什么不使用默认的UIButton？通过Storyboard，您可以编辑其插图。 - Kingalione
这是一个普通的UIButton。 - christ2702
您是否为按钮设置了宽度约束？能否（暂时）将按钮的背景颜色设置为.green，并发布一张新图，以便我们可以看到实际的框架？ - DonMag
4个回答
25

对于一个编程解决方案，您正在使用：

dismissButton.titleEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 0, right: 10)

当你应该使用：

someButton.contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 0, right: 10)

这是因为标题边缘插图（按设计）在调整文本大小后进行插入。
编辑：（iOS 15+） 正如@SuryaKantSharma所评论的那样，这已被弃用。
配置按钮的新方法包括三个选项来控制填充和插图。
- titlePadding：标题和副标题标签之间的距离。 - imagePadding：按钮图像和文本之间的距离 - contentInsets：按钮内容区域与其边界的距离。
有关UIButton.Configuration的示例和说明，请查看此链接：
这是Sarun关于使用UIButton（UIKit）的三篇文章中的第一篇。它们值得一读！

https://sarunw.com/posts/new-way-to-style-uibutton-in-ios15/

2
.contentEdgeInsets 在 iOS 15 中已被弃用。 - SuryaKantSharma
谢谢让我知道！我主要使用SwiftUI，但找到了一些资源来解释新的方法，并将其添加到我的答案中。 - Mozahler
19

解决方法： 作为解决您的问题的方案，将标题的左缩进设置为10。将其他缩进保持为0（或您想要设置的任何值）

注意：

  • '内容缩进'适用于标题和图像。
  • '标题缩进'仅适用于标题文本/字符串。
  • '图像缩进'仅适用于图像/图标。


尝试此操作（使用Xcode 9+）：

从Storyboard（界面生成器）设计中，您可以使用UIButton的属性来设置缩进，如此快照所示：

enter image description here

我已经这样做了，但结果仍然相同。请看我的代码。 - christ2702
它不会按照你在代码中设置的方式工作，你需要扩展（覆盖）这些属性。 - Krunal
尝试使用界面构建器，而不是编程方式。 - Krunal
6
在 iOS 15 中，请确保将“样式”设置为“默认”。 - aheze
2
将左右两侧的限制设置为0，文字就会居中显示。

enter image description here

enter image description here

0
除了@mozahler的答案之外，只有那个对我不起作用，必须添加一行才能使其左右对齐：
（它将标题与按钮的左侧对齐）
button.contentHorizontalAlignment = .left
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 5, right: 5)
'titleEdgeInsets' 在 iOS 15.0 中已被弃用：在使用 UIButtonConfiguration 时，此属性将被忽略。 - Chris Prince
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接