iphone आईओएसएबल के लिए आईआईएलएबल के लिए टॉप-बाएं संरेखण कैसे सेट करें?




ios label (12)

मैंने अपनी निब फ़ाइल में एक लेबल जोड़ा है, उसके बाद उस लेल के लिए शीर्ष-बाएं संरेखण होना आवश्यक है। चूंकि मैं रनटाइम पर टेक्स्ट प्रदान कर रहा हूं इसलिए यह सुनिश्चित नहीं है कि कितनी लाइनें हैं। तो यदि पाठ में केवल एक पंक्ति होती है तो यह लंबवत-केंद्र गठबंधन के रूप में दिखाई देती है। वह संरेखण इसके सामने मेरे संबंधित लचीले से मेल नहीं खा रहा है।

उदाहरण के लिए:

जो अजीब लग रहा है :(

क्या कोई तरीका है जहां मैं लेबल-पाठ को शीर्ष-बाएं संरेखण के लिए उचित सेट कर सकता हूं?


सबसे सरल और आसान तरीका है StackView में लेबल एम्बेड करना और स्टैकव्यू के एक्सिस को क्षैतिज में सेट करना, स्टोरीबोर्ड से विशेषता निरीक्षक में शीर्ष पर संरेखण जैसा दिखाना है ।


स्विफ्ट 2.0:: यूलाबेल एक्सटेंशन का उपयोग करना

एक खाली स्विफ्ट फ़ाइल में निरंतर enum मान बनाओ।

//  AppRef.swift

import UIKit
import Foundation

enum UILabelTextPositions : String {

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

}

UILabel एक्सटेंशन का उपयोग करना:

एक खाली स्विफ्ट वर्ग बनाओ और इसे नाम दें। निम्नलिखित जोड़ें।

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

     }
    }

उपयोग:

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

चूंकि आप इंटरफ़ेस बिल्डर का उपयोग कर रहे हैं, अपने लेबल के लिए बाधाएं सेट करें (ऊंचाई और चौड़ाई भी सेट करना सुनिश्चित करें)। फिर आकार निरीक्षक में, लेबल के लिए ऊंचाई की जांच करें। वहां आप इसे => के बजाय = = को पढ़ना चाहेंगे। फिर उस व्यू कंट्रोलर के कार्यान्वयन में, लाइनों की संख्या 0 पर सेट करें (आईबी में भी किया जा सकता है) और लेबल [लेबल आकार टोफिट] सेट करें; और जैसे ही आपके पाठ की लंबाई बढ़ जाती है, लेबल ऊंचाई में बढ़ेगा और आपके पाठ को ऊपरी बाईं ओर रखा जाएगा।


यह करना काफी आसान है। एक verticalAlignment एलाइनमेंट संपत्ति के साथ एक UILabel sublcass बनाएं और textRectForBounds:limitedToNumberOfLines को ओवरराइड करें textRectForBounds:limitedToNumberOfLines शीर्ष, मध्य या नीचे लंबवत संरेखण के लिए सही सीमाएं वापस करने के लिए। यहां कोड है:

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

मुझे यह समस्या भी थी लेकिन मुझे जो मिला वह वह क्रम था जिसमें आपने यूलाबेल की संपत्तियों और विधियों को निर्धारित किया था!

यदि आप label.font = [UIFont fontWithName:@"Helvetica" size:14]; से पहले [label sizeToFit] कहते हैं label.font = [UIFont fontWithName:@"Helvetica" size:14]; तो पाठ शीर्ष पर संरेखित नहीं होता है लेकिन यदि आप उन्हें चारों ओर स्वैप करते हैं तो यह करता है!

मैंने यह भी देखा कि पाठ को पहले सेट करना भी एक फर्क पड़ता है।

उम्मीद है की यह मदद करेगा।


सोलाबेल मेरे लिए काम करता है।

स्विफ्ट 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)
    }
}

स्विफ्ट 3:

आरटीएल भाषाओं के लिए समर्थन की अनुमति देने के लिए यह संस्करण मूल से अद्यतन किया गया है:

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

आपके कोड में

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

सावधान रहें कि यदि आप तालिका कक्षों या अन्य दृश्यों में इसका उपयोग करते हैं जो विभिन्न डेटा के साथ पुनर्नवीनीकरण करते हैं, तो आपको मूल फ्रेम को कहीं भी स्टोर करना होगा और आकार को कॉल करने से पहले इसे रीसेट करना होगा।


मुझे एक ही समस्या के लिए एक और समाधान मिला। मैंने UILabel बजाय UITextView उपयोग किया और editable() फ़ंक्शन को false स्विच किया।


@ TotiG के उत्तर का 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)
    }
}

टोटीजी के शानदार जवाब के शीर्ष पर बिल्डिंग, मैंने एक आईबी डिज़ाइन करने योग्य वर्ग बनाया है जो स्टोरीबोर्ड से यूआईएलएबल के ऊर्ध्वाधर संरेखण को अनुकूलित करना बेहद आसान बनाता है। बस सुनिश्चित करें कि आपने स्टोरीबार्ड पहचान निरीक्षक से अपनी यूलाबेल की कक्षा को 'वर्टिकल अलाइन लेबल' पर सेट किया है। यदि लंबवत संरेखण प्रभावी नहीं होता है, तो संपादक-> सभी दृश्यों को ताज़ा करें जो चाल चलाना चाहिए।

यह कैसे काम करता है: एक बार जब आप अपना यूलाबेल की कक्षा सही ढंग से सेट कर लेते हैं, तो स्टोरीबोर्ड आपको एक इनपुट फ़ील्ड दिखाएगा जो एक पूर्णांक (संरेखण कोड) लेता है।

अपडेट करें: मैंने केंद्रित लेबल ~ सेव के लिए समर्थन जोड़ा है

शीर्ष संरेखण के लिए 0 दर्ज करें

मध्य संरेखण के लिए 1 दर्ज करें

नीचे संरेखण के लिए 2 दर्ज करें

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


फिर से समझाए जाने के बजाय, मैं इस व्यापक और अत्यधिक मूल्यांकन किए गए प्रश्न / उत्तर से लिंक करूंगा:

UILabel के भीतर टेक्स्ट को लंबवत रूप से संरेखित करें

संक्षिप्त जवाब नहीं है, ऐप्पल ने यह आसान नहीं बनाया है, लेकिन फ्रेम आकार को बदलकर यह संभव है।


SoLabel काम के साथ समाधान, धन्यवाद।

भाई मैंने मोनोचच संस्करण जोड़ा है:

    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
}






text-alignment