Oben ausrichten der text in verschiedenen Größen in einem UILabel

Wie oben-richten Sie den text in verschiedenen Größen in einem UILabel? Ein Beispiel ist die top-Angleichung kleineren cent-Betrag mit noch größeren dollar-Betrag, der in Preis Banner.

UILabel in iOS6 unterstützt NSAttributedStringdie es mir erlaubt haben, den text in verschiedenen Größen in der gleichen UILabel. Aber es scheint nicht zu haben, ein Attribut für top-text ausrichten. Was sind die Optionen, um dies zu implementieren? Es scheint mir, dass die Bereitstellung eine benutzerdefinierte Zeichnung Logik zu tun, top-Ausrichtung, basierend auf einem benutzerdefinierten zugeschrieben string key ist vielleicht das beste, aber ich habe keine Ahnung, wie man über es.

Siehe: Vertikal ausrichten von text in einem UILabel

InformationsquelleAutor ejel | 2013-03-20

War ich in der Lage zu erreichen, das gewünschte Ergebnis mit einem einzigen label.

Mit ein wenig Mathematik können Sie den Versatz der Grundlinie des kleineren text für die Erreichung Ihrer gewünschten Ergebnis.

Objective-C

- (NSMutableAttributedString *)styleSalePriceLabel:(NSString *)salePrice withFont:(UIFont *)font
{
    if ([salePrice rangeOfString:@"."].location == NSNotFound) {
        return [[NSMutableAttributedString alloc] initWithString:salePrice];
    } else {
        NSRange range = [salePrice rangeOfString:@"."];
        range.length = (salePrice.length - range.location);
        NSMutableAttributedString *stylizedPriceLabel = [[NSMutableAttributedString alloc] initWithString:salePrice];
        UIFont *smallFont = [UIFont fontWithName:font.fontName size:(font.pointSize / 2)];
        NSNumber *offsetAmount = @(font.capHeight - smallFont.capHeight);
        [stylizedPriceLabel addAttribute:NSFontAttributeName value:smallFont range:range];
        [stylizedPriceLabel addAttribute:NSBaselineOffsetAttributeName value:offsetAmount range:range];
        return stylizedPriceLabel;
    }
}

Swift

extension Range where Bound == String.Index {
    func asNSRange() -> NSRange {
        let location = self.lowerBound.encodedOffset
        let length = self.lowerBound.encodedOffset - self.upperBound.encodedOffset
        return NSRange(location: location, length: length)
    }
}

extension String {
    func asStylizedPrice(using font: UIFont) -> NSMutableAttributedString {
        let stylizedPrice = NSMutableAttributedString(string: self, attributes: [.font: font])

        guard var changeRange = self.range(of: ".")?.asNSRange() else {
            return stylizedPrice
        }

        changeRange.length = self.count - changeRange.location
        //forgive the force unwrapping
        let changeFont = UIFont(name: font.fontName, size: (font.pointSize / 2))!
        let offset = font.capHeight - changeFont.capHeight
        stylizedPrice.addAttribute(.font, value: changeFont, range: changeRange)
        stylizedPrice.addAttribute(.baselineOffset, value: offset, range: changeRange)
        return stylizedPrice
    }
}

Daraus ergibt sich die folgende:

Oben ausrichten der text in verschiedenen Größen in einem UILabel

Ich bin ändern der akzeptierten Antworten auf diese ein, als es ist übersichtlicher und haben ein leicht verständliches Beispiel. Danke!
Dies scheint nicht zu funktionieren, wenn Sie die font-Skalierung. die offsetAmount ist pre-Skalierung, so dass der Abstand wird zu groß.
Vielen Dank. wollte das gleiche für meinen text ($100), $ sollte kleine. es erreicht mit dem code .. vielen Dank 🙂
Fügen Sie eine schnelle Umsetzung Ihrer Antwort, ist eine sehr gute Antwort @ErickKenny
aktualisiert.

InformationsquelleAutor Eric Murphey

10

Das problem mit dem Versuch zu tun, diese einfach durch die Angleichung der Ursprung von frames ist, dass "normale" Zeichen in der Regel am Ende mit einigen extra-Polsterung um Sie herum, weil das label für alle der schriftart von Zeichen, einschließlich derjenigen, die wird groß Aufsteiger und lange Unterlängen. Sie werden bemerken, das Bild, das Sie gepostet, dass wenn die kleine "99" wurden in einem separaten label gesetzt wurde, den gleichen Ursprung hat wie die grösseren text, es wäre zu hoch, weil der dollar-Zeichen den obersten Punkt.

Glücklicherweise UIFont gibt uns alle Informationen, die wir brauchen, um dies richtig tun. Wir Messen müssen, die leer seilwinde Raum die Etiketten sind mit und anpassen der relativen Positionierung zu berücksichtigen, für die es, wie so:
```
//Make sure the labels hug their contents
[self.bigTextLabel sizeToFit];
[self.smallTextLabel sizeToFit];

//Figure out the "blank" space above normal character height for the big text
UIFont *bigFont = self.bigTextLabel.font;
CGFloat bigAscenderSpace = (bigFont.ascender - bigFont.capHeight);

//Move the small text down by that ammount
CGFloat smallTextOrigin = CGRectGetMinY(self.bigTextLabel.frame) + bigAscenderSpace;

//Figure out the "blank" space above normal character height for the little text
UIFont *smallFont = self.smallTextLabel.font;
CGFloat smallAscenderSpace = smallFont.ascender - smallFont.capHeight;

//Move the small text back up by that ammount
smallTextOrigin -= smallAscenderSpace;

//Actually assign the frames
CGRect smallTextFrame = self.smallTextLabel.frame;
smallTextFrame.origin.y = smallTextOrigin;
self.smallTextLabel.frame = smallTextFrame;
```
(Dieser code setzt Voraus, Sie haben zwei label-Eigenschaften mit dem Namen bigTextLabel und smallTextLabel jeweils)

Edit:

Tut dies ohne zwei Etiketten ist ziemlich ähnlich. Sie können eine benutzerdefinierte UIView-Unterklasse, und ziehen NSAttributedStrings mit den -drawInRect:options:context: Methode (stellen Sie sicher, dass Sie NSStringDrawingUsesLineFragmentOrigin in die Optionen). Die Mathematik für die Arbeit der top-Ausrichtung sollte die gleiche, der einzige Unterschied ist, bekommen Sie die schriftart aus der attributierten string über die NSFontAttributeName - Attribut, nicht das label. Die WWDC 2012 video-on zugeschrieben string Zeichnung ist eine gute Referenz für diese.
- Ich bin eigentlich auf der Suche nach einer Lösung, die nicht erforderlich ist, zwei separate UILabel.
- (Habe ich aktualisiert meine Antwort mit einige Diskussionen über diese)
- Würden Sie bitte ein wenig erläutern bisschen mehr auf NSAttributedString Ansatz? Die Methode drawInRect:options:context ist NSAttributedString Instanz-Methode. Wie kann ich festlegen, verschiedene Rahmen zu zeichnen, für verschiedene Teile des NSAttributedString?
- Sie müssten auch noch zwei separate Zeichenfolgen in diesem Fall, für die großen und kleinen Seiten. Zeichnung der gleiche string wird mit zwei verschiedenen Stile ist ein sehr viel komplexeres Thema,, die eine gute Menge von benutzerdefinierten Kern-Text-code. Wenn Sie unbedingt tun müssen, es auf diese Weise, schauen Sie sich die Freundschaft mit Kern-Text tutorial von Cocoanetics für ein Ort, um zu starten.
- Von dem, was ich habe versucht, meine bigAscenderSpace stellt sich heraus, kleiner als smallAscenderSpace--verursacht smallTextOrigin negativen Wert. {bigFont.seilwinde = 24, bigFont.capHeight = 22.176, smallFont.seilwinde = 11, smallFont.capHeight = 7.788. Irgendeine Idee was falsch sein könnte?
- Es ist möglich, dass mit einer negativen Ursprungs ist richtig. Sieht es falsch, wenn gezeichnet? Wenn dem so ist, können Sie fügen Sie den code, den Sie versucht haben, Ihre Antwort?
- Es sieht falsch aus. Der offset wird auf die falsche Richtung. Hier ist der code: gist.github.com/ejel/5282524 und hier ist die Beispiel-Ausgabe: imgur.com/nKFnIDc
- Es scheint, wie die Metriken für "Avenir-Mittel" sind einfach komisch. Wenn Sie ändern bigFont zu jeder anderen Schrift, die (Auch plain old "Avenir") funktioniert alles wie erwartet. Ich habe einen code zum zeichnen der Grundlinie und versalhöhe und diese waren die Ergebnisse, "Avenir-Mittel": i.imgur.com/Z8oin2S.png, "Avenir": "i.imgur.com/z74WxEC.png.
- Wow, ich hätte nicht gedacht, dass könnte das Problem sein. Ich danke Euch so sehr für Eure Geduld mir zu helfen mit diesem. Wirklich zu schätzen.
InformationsquelleAutor

Das ist schade. Ich habe nicht genug Ruf, um kommentieren Sie die Antwort, dass ich auch nach ein wenig Modifikation.
Ich möchte nur darauf hinweisen, dass die Nutzung smallfont für Cent statt font, die möglicherweise an einem Tippfehler.

Unten ist der geänderte code

- (NSMutableAttributedString *)styleSalePriceLabel:(NSString *)salePrice withFont:(UIFont *)font
{
    if ([salePrice rangeOfString:@"."].location == NSNotFound) {
        return [[NSMutableAttributedString alloc]  
                   initWithString:salePrice];
    } else {
        NSRange range = [salePrice rangeOfString:@"."];
        range.length = (salePrice.length - range.location);
        NSMutableAttributedString *stylizedPriceLabel =
            [[NSMutableAttributedString alloc] initWithString:salePrice];
        UIFont *smallfont = [UIFont fontWithName:font.fontName 
                                            size:(font.pointSize / 2)];
        NSNumber *offsetAmount = @(font.capHeight - smallfont.capHeight);
        [stylizedPriceLabel addAttribute:NSFontAttributeName 
                                   value:smallfont 
                                   range:range];
        [stylizedPriceLabel addAttribute:NSBaselineOffsetAttributeName 
                                   value:offsetAmount 
                                   range:range];
        return stylizedPriceLabel;
    }
}

Danke für den Hinweis, dass sich Corey. Korrigiert habe ich das code-snippet in die akzeptierte Antwort auf Ihren Vorschlag.

InformationsquelleAutor Corey

0

Ein möglicher Ansatz wäre, um das Etikett um die genaue Größe des Textes, die Sie setzen in.
```
CGRect labelFrame;
//Set the origin of the label to whatever you want
labelFrame.size = [label.text sizeWithFont:label.font];  //If using NSString
labelFrame.size = [label.text size];                     //If using NSAttributedString
label.frame = labelFrame;
```
Sehen diese ähnlich ALSO post für mehr details.
- Diese Lösung scheint zu verlangen, 2 UILabels, aber ich bin mehr auf der Suche nach einer Lösung, die erfordert, dass ein UILabel. Auch als @frozendevil wies darauf hin, diese nicht ausrichten den text richtig durch extra Polsterung.
- ich denke, was Sie ment war CGRect newFrame = self.lblText.frame; newFrame.Herkunft.y= floor(selbst.lblText.font.seilwinde); selbst.lblText.frame = newFrame;
InformationsquelleAutor architectpianist

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.