Come allineare le linee di base del testo in UILabels con diverse dimensioni di carattere su iOS?

Question

Ho bisogno di allineare le linee di base del testo in UILabels. Quello che sto facendo è che sto allineando le linee di base di UILabels che contengono il testo e quando la dimensione del carattere del testo in due etichette è diversa, questo si traduce in linea di base UILabels allineata ma linea di testo disallineata (disallineato da un piccolo margine, ma ancora disallineata). Le etichette sono incluse in una sottoclasse UIView personalizzata, pertanto self si riferisce alla UIView che comprende.

Ecco il codice relativo

[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]; 

risultati questo codice di allineamento nell'immagine link sottostante.

Come si può vedere, anche se le linee di base UILabel sono allineati, le linee di base del testo è disallineata da un piccolo margine. Come posso allineare le linee di base del testo in modo dinamico (perché le dimensioni dei caratteri potrebbero cambiare in fase di runtime)?

Answer 1

usavo this answer in un paio di posti diversi, ma le linee di base erano a volte un pixel spento sul display Retina. Il frammento di seguito spiega scala dello schermo:

[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

Stavo cercando di farlo da solo (solo ora) e ho trovato la mia risposta su un almost identical question. Non è una soluzione semplice, dobbiamo fare i conti.

Ho solo dovuto farlo con 2 etichette diverse e lo sto facendo in una sottoclasse di 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

È possibile ottenere l'allineamento della linea di base pixel-perfetta per qualsiasi coppia di UILabels utilizzando il valore ascendente UIFont in un semplice calcolo. Ecco come:

[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() viene utilizzato in quanto i valori font.ascender possono essere frazionata.

Ho provato questo su entrambi i dispositivi retina e non-retina, con risultati eccellenti. Il posizionamento delle due etichette l'una sull'altra sull'asse x è stato omesso, in quanto le tue esigenze potrebbero variare. Se hai bisogno di una rapida spiegazione di cosa sia l'ascender UIFont (più altre informazioni UIFont), controlla questo chiaro, conciso article.