¿Cómo alinear líneas de base de texto en UILabels con diferentes tamaños de fuente en iOS?

Question

Necesito alinear las líneas de base de texto en UILabels. Lo que estoy haciendo actualmente es alinear las líneas de base de UILabels que contienen el texto, y cuando el tamaño de fuente de texto en dos etiquetas es diferente, esto da como resultado una línea base de UILabels alineadas pero una línea de base de texto desalineada (desalineada por un pequeño margen, pero desalineado). Las etiquetas se incluyen en una subclase UIView personalizada, por lo tanto, self se refiere a la UIView abarcadora.

Este es el código correspondiente

[self.mySmallLabel sizeToFit]; 
[self.myBigLabel sizeToFit]; 

self.mySmallLabel.frame = CGRectMake(0,  
            self.bounds.size.height - self.mySmallLabel.bounds.size.height, 
            self.mySmallLabel.bounds.size.width, 
            self.mySmallLabel.bounds.size.height); 

self.myBigLabel.frame = CGRectMake(self.mySmallLabel.frame.origin.x + self.mySmallLabel.bounds.size.width, 
            self.bounds.size.height - self.myBigLabel.bounds.size.height, 
            self.myBigLabel.bounds.size.width, 
            self.myBigLabel.bounds.size.height); 
[self.mySmallLabel sizeToFit]; 
[self.myBigLabel sizeToFit]; 

resultados este código en el alineamiento en la imagen vinculada a continuación.

Como se puede ver, a pesar de que las líneas de base UILabel están alineados, las líneas de base del texto no está bien alineado por un pequeño margen. ¿Cómo puedo alinear las líneas de base del texto de forma dinámica (porque los tamaños de fuente pueden cambiar en tiempo de ejecución)?

Answer 1

que estaba usando this answer en un par de lugares diferentes, pero las líneas de base eran a veces un pixel apagado en pantallas de Retina. El siguiente fragmento de código da cuenta de la escala de la pantalla:

[majorLabel sizeToFit]; 
[minorLabel sizeToFit]; 

CGRect changedFrame = minorLabel.frame; 
changedFrame.origin.x = CGRectGetWidth(majorLabel.frame); 

const CGFloat scale = [UIScreen mainScreen].scale; 
const CGFloat majorLabelBaselineInSuperView = CGRectGetMaxY(majorLabel.frame) + majorLabel.font.descender; 
const CGFloat minorLabelBaselineInOwnView = CGRectGetHeight(minorLabel.frame) + minorLabel.font.descender; 
changedFrame.origin.y = ceil((majorLabelBaselineInSuperView - minorLabelBaselineInOwnView) * scale)/scale; 

minorLabel.frame = changedFrame; 

Answer 2

Estaba buscando hacer esto yo mismo (ahora mismo) y encontré mi respuesta en un almost identical question. Aunque no es una solución simple, tenemos que hacer los cálculos.

Solo necesitaba hacerlo con 2 etiquetas diferentes y lo estoy haciendo en una subclase de UIView.

- (void)layoutSubviews { 
    [majorLabel sizeToFit]; 
    [minorLabel sizeToFit]; 

    CGRect changedFrame = minorLabel.frame; 
    changedFrame.origin.x = majorLabel.frame.size.width; 
    changedFrame.origin.y = (majorLabel.frame.size.height + majorLabel.font.descender) - (minorLabel.frame.size.height + minorLabel.font.descender); 
    minorLabel.frame = changedFrame; 
} 

Answer 3

Usted puede obtener la alineación de línea de base de píxel perfecto para cualquier par de UILabels utilizando el valor ascendente UIFont en un simple cálculo. Así es como:

[majorLabel sizeToFit]; 
[minorLabel sizeToFit]; 

CGRect changedFrame = minorLabel.frame; 
changedFrame.origin.y = ceilf(majorLabel.frame.origin.y + (majorLabel.font.ascender - minorLabel.font.ascender)); 
minorLabel.frame = changedFrame; 

ceilf() se utiliza porque los valores font.ascender pueden ser fraccionario.

He probado esto tanto en dispositivos con retina como sin retina, con excelentes resultados. Se ha omitido colocar las dos etiquetas una respecto de la otra en el eje x, ya que sus necesidades pueden variar. Si necesita una explicación rápida de lo que es el ascendente UIFont (más otra información de UIFont), consulte este claro y conciso article.