Bagaimana cara mengatur perataan kiri atas untuk UILabel untuk aplikasi iOS?

Saya telah menambahkan satu label di file ujung pena saya, lalu diperlukan perataan kiri atas untuk label itu. Karena saya menyediakan teks saat runtime jadi tidak yakin berapa banyak baris yang ada. Jadi jika teks hanya berisi satu baris, maka teks tersebut muncul sebagai rata tengah vertikal. Penjajaran itu tidak sesuai dengan label saya masing-masing di depannya.

Sebagai contoh:

Yang terlihat aneh :(

Apakah ada cara untuk menyetel teks label ke kanan atas perataan?

Daripada menjelaskan ulang, saya akan menautkan ke pertanyaan / jawaban yang agak ekstensif & berperingkat tinggi ini:

Ratakan teks secara vertikal ke atas dalam UILabel

Jawaban singkatnya adalah tidak, Apple tidak membuat ini mudah, tetapi dimungkinkan dengan mengubah ukuran bingkai.

Ini cukup mudah dilakukan. Buat UILabelsublcass dengan verticalAlignmentproperti dan timpa textRectForBounds:limitedToNumberOfLinesuntuk mengembalikan batas yang benar untuk perataan vertikal atas, tengah, atau bawah. Berikut kodenya:

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

Saya menemukan solusi menggunakan AutoLayout di StoryBoard.

1) Atur tidak ada baris ke 0 dan perataan teks ke Kiri.

2) Tetapkan batasan tinggi.

3) Batasan tinggi harus dalam Relasi - Kurang Dari atau Sama

4)

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

Saya mendapatkan hasil sebagai berikut:

SOLabel bekerja untuk saya.

Swift 3 & 5:

Versi ini telah diperbarui dari aslinya untuk memungkinkan dukungan untuk bahasa RTL:

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)
    }
}

Cepat 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)
    }
}

Dalam kasus saya, itu adalah bottom spacemasalah kendala. Saya telah mengaturnya ke = 16.

Ketika saya mengaturnya ke bottom to >= 16, masalah ini terpecahkan.

Selain itu, jika Anda memiliki batasan ketinggian di label, Anda harus menghapusnya.

Berikut tampilan batasan label saya di size inspector:

Dalam kode Anda

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

Berhati-hatilah jika Anda menggunakannya dalam sel tabel atau tampilan lain yang didaur ulang dengan data berbeda, Anda harus menyimpan bingkai asli di suatu tempat dan menyetel ulang sebelum memanggil sizeToFit.

Saya menemukan solusi lain untuk masalah yang sama. Saya menggunakan UITextViewalih-alih UILabeldan beralih editable()fungsi ke false.

Saya juga mengalami masalah ini tetapi yang saya temukan adalah urutan pengaturan properti dan metode UILabel yang penting!

Jika Anda menelepon [label sizeToFit]sebelumnya label.font = [UIFont fontWithName:@"Helvetica" size:14];maka teks tidak sejajar dengan bagian atas tetapi jika Anda menukar mereka, maka itu benar!

Saya juga memperhatikan bahwa mengatur teks terlebih dahulu membuat perbedaan juga.

Semoga ini membantu.

Saat Anda menggunakan pembuat antarmuka, setel batasan untuk label Anda (pastikan untuk menyetel tinggi dan lebar juga). Kemudian di Size Inspector, periksa tinggi untuk labelnya. Di sana Anda akan menginginkannya untuk membaca> = bukannya =. Kemudian dalam implementasi untuk pengontrol tampilan tersebut, setel jumlah baris ke 0 (juga dapat dilakukan di IB) dan setel label [label sizeToFit]; dan saat teks Anda bertambah panjang, label akan bertambah tinggi dan teks Anda tetap berada di kiri atas.

Jika yang Anda butuhkan adalah teks yang tidak dapat diedit yang secara default dimulai di sudut kiri atas Anda cukup menggunakan Tampilan Teks sebagai ganti label dan kemudian mengatur statusnya menjadi tidak dapat diedit, seperti ini:

textview.isEditable = false

Jauh lebih mudah daripada mengotak-atik label ...

Bersulang!

Solusi dengan SoLabel berhasil, Terima kasih.

Di bawah ini saya telah menambahkan versi monotouch:

    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
}

Cara termudah dan termudah adalah dengan menyematkan Label di StackView dan mengatur Axis StackView ke Horizontal, Alignment to Top di Attribute Inspector dari Storyboard seperti yang ditunjukkan di sini .

Membangun di atas jawaban mengagumkan totiG, saya telah membuat kelas IBDesignable yang membuatnya sangat mudah untuk menyesuaikan perataan vertikal UILabel langsung dari StoryBoard. Pastikan Anda menyetel kelas UILabel Anda ke 'VerticalAlignLabel' dari inspektur identitas StoryBoard. Jika perataan vertikal tidak berpengaruh, buka Editor-> Segarkan Semua Tampilan yang seharusnya melakukan trik.

Cara kerjanya: Setelah Anda mengatur kelas UILabel Anda dengan benar, storyboard akan menampilkan bidang input yang mengambil integer (kode penyelarasan).

Pembaruan: Saya telah menambahkan dukungan untuk label terpusat ~ Sev

Masukkan 0 untuk Perataan Teratas

Masukkan 1 untuk Perataan Tengah

Masukkan 2 untuk Alignment Bawah

    @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)
    }
}

Anda juga dapat mengubah UILabel Anda menjadi UITextView, karena mereka pada dasarnya melakukan hal yang sama kecuali keuntungan dari UITextView adalah teks secara otomatis diratakan ke kiri atas

Saya memiliki masalah ini tetapi label saya ada di UITableViewCell, dan dengan dana itu cara termudah untuk menyelesaikan masalah adalah dengan membuat UIView kosong dan mengatur label di dalamnya dengan batasan ke atas dan ke sisi kiri saja, tanpa kutukan setel jumlah baris menjadi 0

Untuk iOS 7 itulah yang saya buat dan bekerja untuk saya

@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 :: Menggunakan Ekstensi UILabel

Buat nilai enum konstan dalam file Swift yang kosong.

//  AppRef.swift

import UIKit
import Foundation

enum UILabelTextPositions : String {

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

}

Menggunakan Ekstensi UILabel:

Buat kelas Swift kosong dan beri nama. Tambahkan yang berikut ini.

//  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!

     }
    }

Penggunaan:

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

Jawaban @ totiG versi Swift 3

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)
    }
}

Jawaban @ totiG benar dan menyelesaikan masalah saya. Tetapi saya menemukan masalah saat menerapkan metode ini, di perangkat yang lebih kecil seperti 5s, SE, ini tidak berhasil untuk saya. Saya harus set label.sizeToFit()dioverride func layoutSubViews()

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

Cepat 5

Sederhana saja, urutan properti adalah segalanya.

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)

Bagaimana cara mengatur perataan kiri atas untuk UILabel untuk aplikasi iOS? Label Setel Mode Konten ke "Kiri Atas" berfungsi untuk saya, terima kasih banyak: