Wie stelle ich die Ausrichtung von links oben für UILabel für iOS-Anwendungen ein?

Ich habe ein Etikett in meine NIB-Datei eingefügt, dann muss es für dieses Etikett oben links ausgerichtet sein. Da ich zur Laufzeit Text bereitstelle, ist es nicht sicher, wie viele Zeilen vorhanden sind. Wenn Text nur eine einzelne Zeile enthält, wird er vertikal mittig ausgerichtet angezeigt. Diese Ausrichtung stimmt nicht mit meinem jeweiligen Etikett davor überein.

Beispielsweise:

Was seltsam aussieht :(

Gibt es eine Möglichkeit, den Beschriftungstext auf die Ausrichtung oben links einzustellen?

Anstatt es noch einmal zu erklären, werde ich auf diese ziemlich umfangreiche und hoch bewertete Frage / Antwort verweisen:

Richten Sie den Text innerhalb eines UILabels vertikal nach oben aus

Die kurze Antwort lautet: Nein, Apple hat dies nicht einfach gemacht, aber es ist möglich, die Rahmengröße zu ändern.

Das ist ziemlich einfach. Erstellen Sie eine UILabelUnterklasse mit einer verticalAlignmentEigenschaft und überschreiben Sie diese textRectForBounds:limitedToNumberOfLines, um die korrekten Grenzen für eine vertikale Ausrichtung oben, in der Mitte oder unten zurückzugeben. Hier ist der Code:

SOLabel.h

#import <UIKit/UIKit.h>

typedef enum
{
    VerticalAlignmentTop = 0, // default
    VerticalAlignmentMiddle,
    VerticalAlignmentBottom,
} VerticalAlignment;

@interface SOLabel : UILabel

   @property (nonatomic, readwrite) VerticalAlignment verticalAlignment;

@end

SOLabel.m

@implementation SOLabel

-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (!self) return nil;

    // set inital value via IVAR so the setter isn't called
    _verticalAlignment = VerticalAlignmentTop;

    return self;
}

-(VerticalAlignment) verticalAlignment
{
    return _verticalAlignment;
}

-(void) setVerticalAlignment:(VerticalAlignment)value
{
    _verticalAlignment = value;
    [self setNeedsDisplay];
}

// align text block according to vertical alignment settings
-(CGRect)textRectForBounds:(CGRect)bounds 
    limitedToNumberOfLines:(NSInteger)numberOfLines
{
   CGRect rect = [super textRectForBounds:bounds 
                   limitedToNumberOfLines:numberOfLines];
    CGRect result;
    switch (_verticalAlignment)
    {
       case VerticalAlignmentTop:
          result = CGRectMake(bounds.origin.x, bounds.origin.y, 
                              rect.size.width, rect.size.height);
           break;

       case VerticalAlignmentMiddle:
          result = CGRectMake(bounds.origin.x, 
                    bounds.origin.y + (bounds.size.height - rect.size.height) / 2,
                    rect.size.width, rect.size.height);
          break;

       case VerticalAlignmentBottom:
          result = CGRectMake(bounds.origin.x, 
                    bounds.origin.y + (bounds.size.height - rect.size.height),
                    rect.size.width, rect.size.height);
          break;

       default:
          result = bounds;
          break;
    }
    return result;
}

-(void)drawTextInRect:(CGRect)rect
{
    CGRect r = [self textRectForBounds:rect 
                limitedToNumberOfLines:self.numberOfLines];
    [super drawTextInRect:r];
}

@end

Ich habe eine Lösung mit AutoLayout in StoryBoard gefunden.

1) Setzen Sie die Anzahl der Zeilen auf 0 und die Textausrichtung auf Links.

2) Stellen Sie die Höhenbeschränkung ein.

3) Die Höhenbeschränkung sollte in Beziehung stehen - kleiner als oder gleich

4)

   override func viewWillLayoutSubviews() {
        sampleLabel.sizeToFit()
    }

Ich habe das Ergebnis wie folgt erhalten:

Das SOLabel funktioniert bei mir.

Swift 3 & 5:

Diese Version wurde vom Original aktualisiert, um die Unterstützung von RTL-Sprachen zu ermöglichen:

public class VerticalAlignLabel: UILabel {
    enum VerticalAlignment {
        case top
        case middle
        case bottom
    }

    var verticalAlignment : VerticalAlignment = .top {
        didSet {
            setNeedsDisplay()
        }
    }

    override public func textRect(forBounds bounds: CGRect, limitedToNumberOfLines: Int) -> CGRect {
        let rect = super.textRect(forBounds: bounds, limitedToNumberOfLines: limitedToNumberOfLines)

        if UIView.userInterfaceLayoutDirection(for: .unspecified) == .rightToLeft {
            switch verticalAlignment {
            case .top:
                return CGRect(x: self.bounds.size.width - rect.size.width, y: bounds.origin.y, width: rect.size.width, height: rect.size.height)
            case .middle:
                return CGRect(x: self.bounds.size.width - rect.size.width, y: bounds.origin.y + (bounds.size.height - rect.size.height) / 2, width: rect.size.width, height: rect.size.height)
            case .bottom:
                return CGRect(x: self.bounds.size.width - rect.size.width, y: bounds.origin.y + (bounds.size.height - rect.size.height), width: rect.size.width, height: rect.size.height)
            }
        } else {
            switch verticalAlignment {
            case .top:
                return CGRect(x: bounds.origin.x, y: bounds.origin.y, width: rect.size.width, height: rect.size.height)
            case .middle:
                return CGRect(x: bounds.origin.x, y: bounds.origin.y + (bounds.size.height - rect.size.height) / 2, width: rect.size.width, height: rect.size.height)
            case .bottom:
                return CGRect(x: bounds.origin.x, y: bounds.origin.y + (bounds.size.height - rect.size.height), width: rect.size.width, height: rect.size.height)
            }
        }
    }

    override public func drawText(in rect: CGRect) {
        let r = self.textRect(forBounds: rect, limitedToNumberOfLines: self.numberOfLines)
        super.drawText(in: r)
    }
}

Swift 1:

class UIVerticalAlignLabel: UILabel {

enum VerticalAlignment : Int {
    case VerticalAlignmentTop = 0
    case VerticalAlignmentMiddle = 1
    case VerticalAlignmentBottom = 2
}

var verticalAlignment : VerticalAlignment = .VerticalAlignmentTop {
    didSet {
        setNeedsDisplay()
    }
}

required init(coder aDecoder: NSCoder){
    super.init(coder: aDecoder)
}

override func textRectForBounds(bounds: CGRect, limitedToNumberOfLines: Int) -> CGRect {
    let rect = super.textRectForBounds(bounds, limitedToNumberOfLines: limitedToNumberOfLines)

    switch(verticalAlignment) {
        case .VerticalAlignmentTop:
            return CGRectMake(bounds.origin.x, bounds.origin.y, rect.size.width, rect.size.height)
        case .VerticalAlignmentMiddle:
            return CGRectMake(bounds.origin.x, bounds.origin.y + (bounds.size.height - rect.size.height) / 2, rect.size.width, rect.size.height)
        case .VerticalAlignmentBottom:
            return CGRectMake(bounds.origin.x, bounds.origin.y + (bounds.size.height - rect.size.height), rect.size.width, rect.size.height)
        default:
            return bounds
    }
}

override func drawTextInRect(rect: CGRect) {
    let r = self.textRectForBounds(rect, limitedToNumberOfLines: self.numberOfLines)
    super.drawTextInRect(r)
    }
}

In meinem Fall handelte es sich um ein bottom spaceEinschränkungsproblem. Ich hatte es eingestellt = 16.

Als ich es einstellte, bottom to >= 16wurde dieses Problem gelöst.

Wenn das Etikett eine Höhenbeschränkung enthält, müssen Sie diese entfernen.

Hier ist die Einschränkungsansicht meines Etiketts im Größeninspektor:

In deinem Code

label.text = @"some text";
[label sizeToFit];

Beachten Sie, dass Sie, wenn Sie dies in Tabellenzellen oder anderen Ansichten verwenden, die mit unterschiedlichen Daten recycelt werden, den ursprünglichen Frame irgendwo speichern und zurücksetzen müssen, bevor Sie sizeToFit aufrufen.

Ich habe eine andere Lösung für das gleiche Problem gefunden. Ich habe UITextViewstatt UILabelund editable()Funktion umgeschaltet false.

Ich hatte auch dieses Problem, aber was ich fand, war die Reihenfolge, in der Sie die Eigenschaften und Methoden des UILabels festlegen!

Wenn Sie [label sizeToFit]vorher anrufen, label.font = [UIFont fontWithName:@"Helvetica" size:14];wird der Text nicht nach oben ausgerichtet, aber wenn Sie sie vertauschen, ist dies der Fall!

Mir ist auch aufgefallen, dass das Festlegen des Textes zuerst einen Unterschied macht.

Hoffe das hilft.

Legen Sie bei Verwendung des Interface Builder die Einschränkungen für Ihre Beschriftung fest (stellen Sie sicher, dass Sie auch die Höhe und Breite festlegen). Überprüfen Sie dann im Größeninspektor die Höhe des Etiketts. Dort soll es> = statt = lauten. Setzen Sie dann in der Implementierung für diesen Ansichts-Controller die Anzahl der Zeilen auf 0 (kann auch in IB durchgeführt werden) und setzen Sie das Label [label sizeToFit]; Wenn Ihr Text an Länge gewinnt, wird die Beschriftung höher und Ihr Text bleibt oben links.

Wenn Sie nicht bearbeitbaren Text benötigen, der standardmäßig in der oberen linken Ecke beginnt, können Sie einfach eine Textansicht anstelle einer Beschriftung verwenden und den Status wie folgt auf nicht bearbeitbar setzen:

textview.isEditable = false

Viel einfacher als mit den Etiketten herumzuspielen ...

Prost!

Lösung mit SoLabel funktioniert, danke.

Unten habe ich eine Monotouch-Version hinzugefügt:

    public class UICustomLabel : UILabel
{
    private UITextVerticalAlignment _textVerticalAlignment;

    public UICustomLabel()
    {
        TextVerticalAlignment = UITextVerticalAlignment.Top;
    }

    public UITextVerticalAlignment TextVerticalAlignment
    {
        get
        {
            return _textVerticalAlignment;
        }
        set
        {
            _textVerticalAlignment = value;
            SetNeedsDisplay();
        }
    }

    public override void DrawText(RectangleF rect)
    {
        var bound = TextRectForBounds(rect, Lines);
        base.DrawText(bound);
    }

    public override RectangleF TextRectForBounds(RectangleF bounds, int numberOfLines)
    {
        var rect = base.TextRectForBounds(bounds, numberOfLines);
        RectangleF resultRect;
        switch (TextVerticalAlignment)
        {
            case UITextVerticalAlignment.Top:
                resultRect = new RectangleF(bounds.X, bounds.Y, rect.Size.Width, rect.Size.Height);
                break;
            case UITextVerticalAlignment.Middle:
                resultRect = new RectangleF(bounds.X,
                                            bounds.Y + (bounds.Size.Height - rect.Size.Height)/2,
                                            rect.Size.Width, rect.Size.Height);
                break;
            case UITextVerticalAlignment.Bottom:
                resultRect = new RectangleF(bounds.X,
                                            bounds.Y + (bounds.Size.Height - rect.Size.Height),
                                            rect.Size.Width, rect.Size.Height);
                break;

            default:
                resultRect = bounds;
                break;
        }

        return resultRect;
    }
}

public enum UITextVerticalAlignment
{
    Top = 0, // default
    Middle,
    Bottom
}

Der einfachste und einfachste Weg besteht darin, die Beschriftung in StackView einzubetten und die Achse von StackView auf Horizontal und die Ausrichtung im Attributinspektor vom Storyboard nach oben zu setzen, wie hier gezeigt .

Aufbauend auf der großartigen Antwort von totiG habe ich eine IBDesignable-Klasse erstellt, mit der sich die vertikale Ausrichtung eines UILabels direkt vom StoryBoard aus ganz einfach anpassen lässt. Stellen Sie einfach sicher, dass Sie die Klasse Ihres UILabels im StoryBoard-Identitätsinspektor auf 'VerticalAlignLabel' setzen. Wenn die vertikale Ausrichtung nicht wirksam wird, gehen Sie zu Editor-> Alle Ansichten aktualisieren, um den Trick auszuführen.

So funktioniert es: Sobald Sie die Klasse Ihres UILabels richtig festgelegt haben, sollte das Storyboard ein Eingabefeld anzeigen, das eine Ganzzahl (Ausrichtungscode) enthält.

Update: Ich habe Unterstützung für zentrierte Labels hinzugefügt ~ Sev

Geben Sie 0 für Top Alignment ein

Geben Sie 1 für die mittlere Ausrichtung ein

Geben Sie 2 für die Bodenausrichtung ein

    @IBDesignable class VerticalAlignLabel: UILabel {
    
    @IBInspectable var alignmentCode: Int = 0 {
        didSet {
            applyAlignmentCode()
        }
    }
    
    func applyAlignmentCode() {
        switch alignmentCode {
        case 0:
            verticalAlignment = .top
        case 1:
            verticalAlignment = .topcenter
        case 2:
            verticalAlignment = .middle
        case 3:
            verticalAlignment = .bottom
        default:
            break
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        self.applyAlignmentCode()
    }
    
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        
        self.applyAlignmentCode()
    }
    
    enum VerticalAlignment {
        case top
        case topcenter
        case middle
        case bottom
    }
    
    var verticalAlignment : VerticalAlignment = .top {
        didSet {
            setNeedsDisplay()
        }
    }
    
    override public func textRect(forBounds bounds: CGRect, limitedToNumberOfLines: Int) -> CGRect {
        let rect = super.textRect(forBounds: bounds, limitedToNumberOfLines: limitedToNumberOfLines)
        
        if #available(iOS 9.0, *) {
            if UIView.userInterfaceLayoutDirection(for: .unspecified) == .rightToLeft {
                switch verticalAlignment {
                case .top:
                    return CGRect(x: self.bounds.size.width - rect.size.width, y: bounds.origin.y, width: rect.size.width, height: rect.size.height)
                case .topcenter:
                    return CGRect(x: self.bounds.size.width - (rect.size.width / 2), y: bounds.origin.y, width: rect.size.width, height: rect.size.height)
                case .middle:
                    return CGRect(x: self.bounds.size.width - rect.size.width, y: bounds.origin.y + (bounds.size.height - rect.size.height) / 2, width: rect.size.width, height: rect.size.height)
                case .bottom:
                    return CGRect(x: self.bounds.size.width - rect.size.width, y: bounds.origin.y + (bounds.size.height - rect.size.height), width: rect.size.width, height: rect.size.height)
                }
            } else {
                switch verticalAlignment {
                case .top:
                    return CGRect(x: bounds.origin.x, y: bounds.origin.y, width: rect.size.width, height: rect.size.height)
                case .topcenter:
                    return CGRect(x: (self.bounds.size.width / 2 ) - (rect.size.width / 2), y: bounds.origin.y, width: rect.size.width, height: rect.size.height)
                case .middle:
                    return CGRect(x: bounds.origin.x, y: bounds.origin.y + (bounds.size.height - rect.size.height) / 2, width: rect.size.width, height: rect.size.height)
                case .bottom:
                    return CGRect(x: bounds.origin.x, y: bounds.origin.y + (bounds.size.height - rect.size.height), width: rect.size.width, height: rect.size.height)
                }
            }
        } else {
            // Fallback on earlier versions
            return rect
        }
    }
    
    override public func drawText(in rect: CGRect) {
        let r = self.textRect(forBounds: rect, limitedToNumberOfLines: self.numberOfLines)
        super.drawText(in: r)
    }
}

Sie können Ihr UILabel auch einfach in UITextView ändern, da diese im Grunde dasselbe tun, außer dass der Vorteil von UITextView darin besteht, dass der Text automatisch oben links ausgerichtet wird

Ich habe dieses Problem, aber mein Etikett befand sich in UITableViewCell, und im Fonds bestand der einfachste Weg, das Problem zu lösen, darin, ein leeres UIView zu erstellen und das Etikett darin mit Einschränkungen nur nach oben und nach links zu setzen Setzen Sie die Anzahl der Zeilen auf 0

Für iOS 7 habe ich das gemacht und für mich gearbeitet

@implementation UILabel (VerticalAlign)
- (void)alignTop
{
    CGSize boundingRectSize = CGSizeMake(self.frame.size.width, CGFLOAT_MAX);
    NSDictionary *attributes = @{NSFontAttributeName : self.font};
    CGRect labelSize = [self.text boundingRectWithSize:boundingRectSize options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
                                              attributes:attributes
                                                 context:nil];
    int numberOfLines= ceil(labelSize.size.height / self.font.lineHeight);

    CGRect newFrame = self.frame;
    newFrame.size.height = numberOfLines * self.font.lineHeight;
    self.frame = newFrame;
}

- (void)alignBottom
{
    CGSize boundingRectSize = CGSizeMake(self.frame.size.width, CGFLOAT_MAX);
    NSDictionary *attributes = @{NSFontAttributeName : self.font};
    CGRect labelSize = [self.text boundingRectWithSize:boundingRectSize options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
                                            attributes:attributes
                                               context:nil];
    int numberOfLines= ceil(labelSize.size.height / self.font.lineHeight);

    int numberOfNewLined = (self.frame.size.height/self.font.lineHeight) - numberOfLines;

    NSMutableString *newLines = [NSMutableString string];
    for(int i=0; i< numberOfNewLined; i++){
        [newLines appendString:@"\n"];
    }
    [newLines appendString:self.text];
    self.text = [newLines mutableCopy];
}

Swift 2.0 :: Verwenden der UILabel-Erweiterung

Erstellen Sie konstante Aufzählungswerte in einer leeren Swift-Datei.

//  AppRef.swift

import UIKit
import Foundation

enum UILabelTextPositions : String {

 case VERTICAL_ALIGNMENT_TOP = "VerticalAlignmentTop"
 case VERTICAL_ALIGNMENT_MIDDLE = "VerticalAlignmentMiddle"
 case VERTICAL_ALIGNMENT_BOTTOM = "VerticalAlignmentBottom"

}

Verwenden der UILabel-Erweiterung:

Erstellen Sie eine leere Swift-Klasse und benennen Sie sie. Fügen Sie Folgendes hinzu.

//  AppExtensions.swift

import Foundation
import UIKit

    extension UILabel{ 
     func makeLabelTextPosition (sampleLabel :UILabel?, positionIdentifier : String) -> UILabel
     {
      let rect = sampleLabel!.textRectForBounds(bounds, limitedToNumberOfLines: 0)

      switch positionIdentifier
      {
      case "VerticalAlignmentTop":
       sampleLabel!.frame = CGRectMake(bounds.origin.x+5, bounds.origin.y, rect.size.width, rect.size.height)
       break;

      case "VerticalAlignmentMiddle":
       sampleLabel!.frame = CGRectMake(bounds.origin.x+5,bounds.origin.y + (bounds.size.height - rect.size.height) / 2,
        rect.size.width, rect.size.height);
       break;

      case "VerticalAlignmentBottom":
       sampleLabel!.frame = CGRectMake(bounds.origin.x+5, bounds.origin.y + (bounds.size.height - rect.size.height),rect.size.width, rect.size.height);
       break;

      default:
       sampleLabel!.frame = bounds;
       break;
      }
      return sampleLabel!

     }
    }

Verwendung :

myMessageLabel.makeLabelTextPosition(messageLabel, positionIdentifier: UILabelTextPositions.VERTICAL_ALIGNMENT_TOP.rawValue)

Swift 3-Version der Antwort von @ totiG

class UIVerticalAlignLabel: UILabel {
    enum VerticalAlignment : Int {
        case VerticalAlignmentTop = 0
        case VerticalAlignmentMiddle = 1
        case VerticalAlignmentBottom = 2
    }

    @IBInspectable var verticalAlignment : VerticalAlignment = .VerticalAlignmentTop {
        didSet {
            setNeedsDisplay()
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func textRect(forBounds bounds: CGRect, limitedToNumberOfLines: Int) -> CGRect {
        let rect = super.textRect(forBounds: bounds, limitedToNumberOfLines: limitedToNumberOfLines)

        switch(verticalAlignment) {
        case .VerticalAlignmentTop:
            return CGRect(x: bounds.origin.x, y: bounds.origin.y, width: rect.size.width, height: rect.size.height)
        case .VerticalAlignmentMiddle:
            return CGRect(x: bounds.origin.x, y: bounds.origin.y + (bounds.size.height - rect.size.height) / 2, width: rect.size.width, height: rect.size.height)
        case .VerticalAlignmentBottom:
            return CGRect(x: bounds.origin.x, y: bounds.origin.y + (bounds.size.height - rect.size.height), width: rect.size.width, height: rect.size.height)
        }
    }

    override func drawText(in rect: CGRect) {
        let r = self.textRect(forBounds: rect, limitedToNumberOfLines: self.numberOfLines)
        super.drawText(in: r)
    }
}

Die Antwort von @ totiG ist richtig und hat mein Problem gelöst. Bei der Implementierung dieser Methode ist jedoch ein Problem aufgetreten. Bei kleineren Geräten wie 5s, SE funktioniert dies bei mir nicht. Ich muss Satz label.sizeToFit()inoverride func layoutSubViews()

override func layoutSubViews() {
    super.layoutSubViews()
    // Do other works if needed
    label.sizeToFit()
}

Swift 5

Es ist einfach, die Reihenfolge der Eigenschaften ist alles.

titleLabel.frame = CGRect(x: 20, y: 20, width: 374, height: 291.2)
titleLabel.backgroundColor = UIColor.clear //set a light color to see the frame
titleLabel.textAlignment = .left
titleLabel.lineBreakMode = .byTruncatingTail
titleLabel.numberOfLines = 4
titleLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 35)
titleLabel.text = "Example"
titleLabel.sizeToFit()
self.view.addSubview(titleLabel)

Wie stelle ich die Ausrichtung von links oben für UILabel für iOS-Anwendungen ein? Label Set Content Mode auf "Top Left" funktioniert für mich, vielen Dank: