垂直居中的UILabel时忽略伸和降落？ [英] Ignore Ascender and Descender when centering UILabel vertically?

问题描述

我使用自动版式在单元格中的垂直中心一些标签的位置。该文本是所有大写，但的UILabel 的质疑，甚至当 sizeToFit 适用，叶下方空间文本，它看起来很像，这将是在信尾部如低级情况下，y，p和q。由于我垂直居中，这是造成偏移和意义的文本出现几个像素高于它应该做的。

I’m using AutoLayout to position some labels in the vertical centre of a cell. The text is in all-caps, but the UILabel in question, even when sizeToFit is applied, leaves space below the text, which looks a lot like it would be for the tails on letters such as a lower case y, p, and q. Since I’m centring vertically, this is causing an offset and meaning the text appears a few pixels higher than it should do.

另一个问题可能是：我可以有一个字体智能调整其垂直中心依赖于它是否包含用伸伸或任何字符

Another question may be: can I have a font intelligently adjust its vertical centre dependant on whether it contains any characters which use the ascender or descender?

有关例如，字符串abbaba不需要的伸，而字符串oyyoyo不需要的伸部。在全部大写的字符串也从来不需要的伸。如果我垂直中心oyyoyoyo它会显得太低了。

For instance, the string "abbaba" doesn’t need the descender, whereas the string "oyyoyo" doesn’t need the ascender. Strings in all-caps also never need the descender. If I vertically center "oyyoyoyo" it’ll appear too low.

推荐答案

谢谢， Abhinit ，你的答案。

我也在找这个，所以我想在这里发表您需要申请对齐文本，以自己的喜好准确的约束。

I was also looking for this so I would like to post here the exact constraints you need to apply to align texts to your liking.

这从维基百科图像显示字体的大小不同的部分。

This image from Wikipedia shows the different size sections of a font.

所以，有许多方法来对齐取决于你是否要对准伸高度，盖高度，x高度，基线或伸高度的标签。

So, there are many ways to align a label depending on whether you want to align to the ascender height, the cap height, the x-height, baseline or descender height.

让我们假设你有一个标签包含文本的帽子像HELLO，你想用 viewAbove 对齐封顶高度和 viewBelow 对齐基线。

Let's say you have a label containing text in caps like "HELLO" and you want to align with viewAbove to cap height and align with viewBelow to baseline.

您会做：

let font = label.font
let ascenderDelta = font.ascender - font.capHeight

LayoutHelper()
    .addViews([
        "label":label, "viewAbove":viewAbove, "viewBelow":viewBelow
    ])
    .withMetrics(["ascenderDelta":ascenderDelta])
    .addConstraints([

        // -- Here the constraints to align to cap height --
        "X:label.top == viewAbove.bottom - ascenderDelta",
        "X:label.baseline == viewBelow.top",

        ...other constraints...
    ])

请注意：在这个例子中，我用我的实用工具类 LayoutHelper ，但我希望这个想法是清楚的。

Note: in the example I'm using my utility class LayoutHelper, but I hope the idea is clear.

关于自动调心的标签：

我会考虑作出智能标签，该标签调整到适当的行取决于它是否包含下行，上行字母，帽子等。

I will think about making an "intelligent" label that adjusts to the appropriate line depending on whether it contains descenders, ascenders, caps, etc.

您可以在 drawTextInRect 用消极的插图做（喜欢这里 但是，例如，使用插图= {-ascenderDelta，0，font.descender，0} ）。但是，这将裁剪的情况下，你有任何伸/下行。我想preFER对齐到帽无需裁剪任何可能的伸。

You could do it using negative insets in drawTextInRect(like here but, for example, using insets = {-ascenderDelta, 0, font.descender, 0}). But that would crop any ascenders/descenders in case you had. I would prefer to align to caps without cropping any possible ascender.

这篇关于垂直居中的UILabel时忽略伸和降落？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！