将图标与多行 UILabel 的左上角对齐

Posted 2023-02-23

【中文标题】将图标与多行 UILabel 的左上角对齐

【英文标题】：Align an Icon to the top left of multiline UILabel

【发布时间】：2017-08-18 11:14:08

【问题描述】：

在 UILabel 的左上角，我想对齐一个图标。这工作文件，但如果标签有多行 UIImage 在 UILabel 的中间对齐。界面生成器上有选项，例如第一基线，但我需要的是第一线中心 Y 之类的东西。有类似的东西吗？

【问题讨论】：

尝试从图像到标签添加中心垂直约束！！

这就是我所做的。如果标签只有一行，它就可以工作。如果多行，则图像在标签的中间居中，而不是在第一行的中间

然后尝试用你的常量值添加顶部约束！！

您的要求不存在默认约束尝试手动修复图标的位置，例如它看起来是标签第一行的中心。不要对您的标签进行任何关系约束。

我认为您能做的最好的事情是使用第一个基线约束并使用约束的常量值补偿图像的高度（可以不同于文本的高度 1 行）以使其居中在第一行。

【参考方案1】：

其实是有办法的！如果您使用 AutoLayout，可以使用以下 sn-p 来完成：

// Aligns the icon to the center of a capital letter in the first line
let offset = label.font.capHeight / 2.0

// Aligns the icon to the center of the whole line, which is different
// than above. Especially with big fonts this makes a visible difference.
let offset = (label.font.ascender + label.font.descender) / 2.0

let constraints: [NSLayoutConstraint] = [
  imageView.centerYAnchor.constraint(equalTo: label.firstBaselineAnchor, constant: -offset),
  imageView.trailingAnchor.constraint(equalTo: label.leadingAnchor, constant: -10)
]
NSLayoutConstraint.activate(constraints)

第一个约束将在标签第一行的 Y 中心显示您的图标。第二个将您的图标放在标签左侧，并在它们之间创建一个 10pt 的空间。

【参考方案2】：

如上图所示放置约束即可。

提示：我将标签的 lines 属性值设置为 5，它最多支持 5 行，没有任何妥协。