Wie können Sie die Grundlinien von Text in UILabels mit verschiedenen Schriftgrößen auf iOS ausrichten?

Question

Ich muss die Grundlinien von Text in UILabels ausrichten. Was ich gerade mache, ist, dass ich die Grundlinien von UILabels, die den Text enthalten, ausrichtend, und wenn die Textschriftgröße in zwei Beschriftungen unterschiedlich ist, führt dies zu einer ausgerichteten UILabels-Grundlinie aber falsch ausgerichteten Textgrundlinie (falsch ausgerichtet, aber immer noch verstellt). Die Beschriftungen sind in einer benutzerdefinierten UIView-Unterklasse enthalten, daher bezieht sich self auf die umfassende UIView.

hier ist der entsprechende Code

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

Dieser Code führt zur aligment im Bild unten verlinkt sind.

Wie Sie sehen können, auch wenn die UILabel Basislinien ausgerichtet sind, ist die Grundlinien des Textes durch einen kleinen Rand versetzt. Wie kann ich die Grundlinien von Text dynamisch ausrichten (weil sich die Schriftgrößen zur Laufzeit ändern können)?

Answer 1

Ich war mit this answer in ein paar verschiedenen Orten, aber die Grundlinien waren manchmal ein Pixel auf Retina-Displays aus. Die Snippet-Konten unten für den Maßstab des Bildschirm:

[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

Ich wollte das gerade machen (gerade jetzt) ​​und fand meine Antwort auf einem almost identical question. Es ist jedoch keine einfache Lösung, wir müssen rechnen.

Ich musste es nur mit 2 verschiedenen Etiketten tun, und ich mache es in einer Unterklasse von 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

Sie können für jedes Paar von UILabels pixelgenaue Ausrichtung Basislinie erhalten, indem den UIFont ascender Wert in einer einfachen Berechnung verwendet wird. Hier ist, wie:

[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() verwendet, weil die font.ascender Werte gebrochen sein kann.

Ich habe dies sowohl auf Retina-und Nicht-Retina-Geräten getestet, mit hervorragenden Ergebnissen. Das Positionieren der beiden Etiketten relativ zueinander auf der x-Achse wurde weggelassen, da Ihre Anforderungen variieren können. Wenn Sie eine schnelle Erklärung dessen benötigen, was die UIFont-Seilklemme ist (plus andere UIFont-Informationen), lesen Sie diese klare, präzise article.