ios - উল্লম্বভাবে একটি UILabel মধ্যে শীর্ষে টেক্সট সারিবদ্ধ




cocoa-touch uikit (20)

  1. নতুন টেক্সট সেট করুন:

    myLabel.text = @"Some Text"
  2. maximum number লাইন 0 (স্বয়ংক্রিয়) সেট করুন:

    myLabel.numberOfLines = 0
  3. লেবেলটির ফ্রেমটিকে সর্বোচ্চ আকারে সেট করুন:

    myLabel.frame = CGRectMake(20,20,200,800)
  4. ফ্রেম সাইজ হ্রাস করার জন্য আকার sizeToFit কল করুন যাতে সামগ্রীগুলি ঠিক থাকে:

    [myLabel sizeToFit]

লেবেল ফ্রেম এখন আপনার পাঠ্য মাপসই যথেষ্ট উচ্চ এবং বিস্তৃত। উপরের বাম অপরিবর্তিত হতে হবে। আমি শুধুমাত্র উপরের বাম সাইন ইন টেক্সট সঙ্গে এই পরীক্ষা করেছেন। অন্যান্য alignments জন্য, আপনি পরে ফ্রেম সংশোধন করতে হতে পারে।

এছাড়াও, আমার লেবেল শব্দ মোড়ানো সক্রিয় আছে।

আমি টেক্সট দুটি লাইন জন্য স্থান সঙ্গে একটি UILabel আছে। কখনও কখনও, যখন পাঠটি খুব ছোট হয়, তখন এই পাঠটি লেবেলটির উল্লম্ব কেন্দ্রে প্রদর্শিত হয়।

আমি উল্লম্বভাবে UILabel শীর্ষে থাকা টেক্সটটি কীভাবে সারিবদ্ধ করতে UILabel ?


Subclass UILabel এবং আঁকা আয়তক্ষেত্রকে সীমাবদ্ধ করুন, এটির মতো:

- (void)drawTextInRect:(CGRect)rect
{
    CGSize sizeThatFits = [self sizeThatFits:rect.size];
    rect.size.height = MIN(rect.size.height, sizeThatFits.height);

    [super drawTextInRect:rect];
}

আমি নিউলাইন প্যাডিং জড়িত সমাধান চেষ্টা করে এবং কিছু ক্ষেত্রে ভুল আচরণ মধ্যে দৌড়ে। আমার অভিজ্ঞতায়, অঙ্কন numberOfLines সাথে জগাখিচুড়ি তুলনায় উপরের হিসাবে সীমাবদ্ধ করা সহজ।

পিএস আপনি সহজেই UIViewContentMode সমর্থন এই ভাবে কল্পনা করতে পারেন:

- (void)drawTextInRect:(CGRect)rect
{
    CGSize sizeThatFits = [self sizeThatFits:rect.size];

    if (self.contentMode == UIViewContentModeTop) {
        rect.size.height = MIN(rect.size.height, sizeThatFits.height);
    }
    else if (self.contentMode == UIViewContentModeBottom) {
        rect.origin.y = MAX(0, rect.size.height - sizeThatFits.height);
        rect.size.height = MIN(rect.size.height, sizeThatFits.height);
    }

    [super drawTextInRect:rect];
}

অ্যাডাপ্টিভ UI (iOS8 বা তারপরে) এর জন্য, UILabel এর উল্লম্ব অ্যালাইনমেন্টটি StoryBoard থেকে বৈশিষ্ট্য noOfLines = 0` পরিবর্তন করে সেট করা হবে এবং

সীমাবদ্ধতাসমূহ

  1. UILabel LefMargin, রাইটমার্গিন এবং শীর্ষ মার্জিন সীমাবদ্ধতা সামঞ্জস্য।

  2. Content Compression Resistance Priority For Vertical = 1000 এর Content Compression Resistance Priority For Vertical পরিবর্তন করুন যাতে উল্লম্ব> অনুভূমিক।

সম্পাদিত:

noOfLines=0

এবং নিম্নলিখিত সীমাবদ্ধতা অনুকূল ফলাফল অর্জন যথেষ্ট।


আপনি TTTAttributedLabel ব্যবহার করতে পারেন, এটি উল্লম্ব সারিবদ্ধকরণ সমর্থন করে।

@property (nonatomic) TTTAttributedLabel* label;
<...>

//view's or viewController's init method
_label.verticalAlignment = TTTAttributedLabelVerticalAlignmentTop;

আমি এই উদ্দেশ্য অর্জন করার জন্য একটি ব্যবহার ফাংশন লিখেছেন। আপনি একটি চেহারা নিতে পারেন:

// adjust the height of a multi-line label to make it align vertical with top
+ (void) alignLabelWithTop:(UILabel *)label {
  CGSize maxSize = CGSizeMake(label.frame.size.width, 999);
  label.adjustsFontSizeToFitWidth = NO;

  // get actual height
  CGSize actualSize = [label.text sizeWithFont:label.font constrainedToSize:maxSize lineBreakMode:label.lineBreakMode];
  CGRect rect = label.frame;
  rect.size.height = actualSize.height;
  label.frame = rect;
}

.ব্যবহারবিধি? (LblHello ইন্টারফেস বিল্ডার দ্বারা তৈরি করা হয়, তাই আমি কিছু UILabel বৈশিষ্ট্য বিস্তারিত উপেক্ষা)

lblHello.text = @"Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!";
lblHello.numberOfLines = 5;
[Utils alignLabelWithTop:lblHello];

আমি এটি একটি প্রবন্ধ হিসাবে আমার ব্লগে লিখেছি: http://fstoke.me/blog/?p=2819


আমি এই প্রশ্নের উত্তর খুঁজে পেয়েছি এখন কিছুটা পুরনো, তাই সেখানে স্বয়ংক্রিয় লেআউট ভক্তদের জন্য এটি যোগ করা হয়েছে।

অটো বিন্যাস এই সমস্যা বেশ তুচ্ছ করে তোলে। আমরা UIView *view লেবেল যুক্ত করছি বলে UIView *view , নিম্নলিখিত কোডটি এইটি সম্পাদন করবে:

UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
[label setText:@"Some text here"];
[label setTranslatesAutoresizingMaskIntoConstraints:NO];
[view addSubview:label];

[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[label]|" options:0 metrics:nil views:@{@"label": label}]];
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label]" options:0 metrics:nil views:@{@"label": label}]];

লেবেলের উচ্চতা স্বয়ংক্রিয়ভাবে গণনা করা হবে (এর intrinsicContentSize ব্যবহার করে) এবং লেবেলের view শীর্ষে আনুভূমিকভাবে প্রান্ত-থেকে-প্রান্ত অবস্থিত হবে।


আমি এখানে পরামর্শগুলি গ্রহণ করেছি এবং একটি দর্শন তৈরি করেছি যা একটি UILabel মোড়ানো এবং এটি আকার করবে এবং লাইনের সংখ্যা সেট করবে যাতে এটি উপরের সারিবদ্ধ হয়। কেবল একটি উপবিষ্ট হিসাবে একটি UILabel করা:

@interface TopAlignedLabelContainer : UIView
{
}

@end

@implementation TopAlignedLabelContainer

- (void)layoutSubviews
{
    CGRect bounds = self.bounds;

    for (UILabel *label in [self subviews])
    {
        if ([label isKindOfClass:[UILabel class]])
        {
            CGSize fontSize = [label.text sizeWithFont:label.font];

            CGSize textSize = [label.text sizeWithFont:label.font
                                     constrainedToSize:bounds.size
                                         lineBreakMode:label.lineBreakMode];

            label.numberOfLines = textSize.height / fontSize.height;

            label.frame = CGRectMake(0, 0, textSize.width,
                 fontSize.height * label.numberOfLines);
        }
    }
}

@end

আমি কোডটি পড়তে সময় নেন, পাশাপাশি প্রবর্তিত পৃষ্ঠাটিতে কোডটি দেখেছি এবং তারা সবাই লেবেলের আকারের আকার সংশোধন করার চেষ্টা করেছে, যাতে ডিফল্ট কেন্দ্র উল্লম্ব সারিবদ্ধকরণ প্রদর্শিত হবে না।

যাইহোক, কিছু ক্ষেত্রে আমরা লেবেলটিকে সমস্ত স্পেসগুলি দখল করতে চাই, এমনকি যদি লেবেলটিতে অনেক পাঠ্য থাকে (যেমন সমান উচ্চতার সাথে একাধিক সারি)।

এখানে, আমি কেবল এটির সমাধান করার বিকল্প উপায় ব্যবহার করেছি, লেবেল শেষে কেবল নতুন UILabel দিয়ে ( UILabel নোট করুন যে আমি আসলেই UILabel উত্তরাধিকারী, কিন্তু এটি প্রয়োজনীয় নয়):

CGSize fontSize = [self.text sizeWithFont:self.font];

finalHeight = fontSize.height * self.numberOfLines;
finalWidth = size.width;    //expected width of label

CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];

int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;

for(int i = 0; i < newLinesToPad; i++)
{
    self.text = [self.text stringByAppendingString:@"\n "];
}

উপরের উত্তরটি ভালো লেগেছে, তবে এটি বেশ সঠিক ছিল না, বা কোডে স্ল্যাপ করা সহজ ছিল তাই আমি এটিটিকে কিছুটা পরিষ্কার করে দিলাম। এই এক্সটেনশানটিকে নিজের নিজের .h এবং .m ফাইলে যুক্ত করুন অথবা আপনি যেটি ব্যবহার করতে চান তা ঠিক উপরেই পেস্ট করুন:

#pragma mark VerticalAlign
@interface UILabel (VerticalAlign)
- (void)alignTop;
- (void)alignBottom;
@end


@implementation UILabel (VerticalAlign)
- (void)alignTop
{
    CGSize fontSize = [self.text sizeWithFont:self.font];

    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label


    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];


    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;

    for(int i=0; i<= newLinesToPad; i++)
    {
        self.text = [self.text stringByAppendingString:@" \n"];
    }
}

- (void)alignBottom
{
    CGSize fontSize = [self.text sizeWithFont:self.font];

    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label


    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];


    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;

    for(int i=0; i< newLinesToPad; i++)
    {
        self.text = [NSString stringWithFormat:@" \n%@",self.text];
    }
}
@end

এবং তারপর ব্যবহার করতে, আপনার পাঠ্যকে লেবেলে রাখুন, এবং তারপরে এটিকে সাজানোর উপযুক্ত পদ্ধতিটি কল করুন:

[myLabel alignTop];

অথবা

[myLabel alignBottom];

একটি নতুন বর্গ তৈরি করুন

LabelTopAlign

.h ফাইল

#import <UIKit/UIKit.h>


@interface KwLabelTopAlign : UILabel {

}

@end

.m ফাইল

#import "KwLabelTopAlign.h"


@implementation KwLabelTopAlign

- (void)drawTextInRect:(CGRect)rect {
    int lineHeight = [@"IglL" sizeWithFont:self.font constrainedToSize:CGSizeMake(rect.size.width, 9999.0f)].height;
    if(rect.size.height >= lineHeight) {
        int textHeight = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(rect.size.width, rect.size.height)].height;
        int yMax = textHeight;
        if (self.numberOfLines > 0) {
            yMax = MIN(lineHeight*self.numberOfLines, yMax);    
        }

        [super drawTextInRect:CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, yMax)];
    }
}

@end

সম্পাদন করা

এখানে একটি সহজ বাস্তবায়ন যা একই কাজ করে:

#import "KwLabelTopAlign.h"

@implementation KwLabelTopAlign

- (void)drawTextInRect:(CGRect)rect
{
    CGFloat height = [self.text sizeWithFont:self.font
                            constrainedToSize:rect.size
                                lineBreakMode:self.lineBreakMode].height;
    if (self.numberOfLines != 0) {
        height = MIN(height, self.font.lineHeight * self.numberOfLines);
    }
    rect.size.height = MIN(rect.size.height, height);
    [super drawTextInRect:rect];
}

@end

এটি সম্পন্ন করার এমনকি দ্রুততর (এবং dirtier) উপায় UILabel এর লাইন ব্রেক মোডটি "ক্লিপ" এবং নির্দিষ্ট সংখ্যক নতুন লাইন যোগ করে সেট করা।

myLabel.lineBreakMode = UILineBreakModeClip;
myLabel.text = [displayString stringByAppendingString:"\n\n\n\n"];

এই সমাধানটি সবার জন্য কাজ করবে না - বিশেষ করে, যদি আপনি এখনও আপনার স্ট্রিংয়ের শেষে "..." প্রদর্শন করতে চান তবে এটি যদি আপনার দ্বারা প্রদর্শিত লাইনগুলির সংখ্যা অতিক্রম করে তবে আপনাকে এটির একটি ব্যবহার করতে হবে কোড এর দীর্ঘ বিট - কিন্তু অনেক ক্ষেত্রে এটি আপনার প্রয়োজন কি পাবেন।


কোন ঝগড়া, কোন ঝগড়া

@interface MFTopAlignedLabel : UILabel

@end


@implementation MFTopAlignedLabel

- (void)drawTextInRect:(CGRect) rect
{
    NSAttributedString *attributedText = [[NSAttributedString alloc]     initWithString:self.text attributes:@{NSFontAttributeName:self.font}];
    rect.size.height = [attributedText boundingRectWithSize:rect.size
                                            options:NSStringDrawingUsesLineFragmentOrigin
                                            context:nil].size.height;
    if (self.numberOfLines != 0) {
        rect.size.height = MIN(rect.size.height, self.numberOfLines * self.font.lineHeight);
    }
    [super drawTextInRect:rect];
}

@end

কোন muss, কোন উদ্দেশ্য-সি, কোন fuss কিন্তু সুইফ্ট 3:

class VerticalTopAlignLabel: UILabel {

    override func drawText(in rect:CGRect) {
        guard let labelText = text else {  return super.drawText(in: rect) }

        let attributedText = NSAttributedString(string: labelText, attributes: [NSFontAttributeName: font])
        var newRect = rect
        newRect.size.height = attributedText.boundingRect(with: rect.size, options: .usesLineFragmentOrigin, context: nil).size.height

        if numberOfLines != 0 {
            newRect.size.height = min(newRect.size.height, CGFloat(numberOfLines) * font.lineHeight)
        }

        super.drawText(in: newRect)
    }

}

যেহেতু এটি কারো কাছে কোনও সাহায্যের ক্ষেত্রে, আমারও একই সমস্যা ছিল কিন্তু UILabel ব্যবহার করে UILabel ব্যবহার করে স্যুইচ করে সমস্যার সমাধান করতে সক্ষম হয়েছিল। আমি কৃতজ্ঞ এই প্রত্যেকের জন্য নয় কারণ কার্যকারিতা একটু ভিন্ন।

আপনি যদি UITextView ব্যবহার করতে স্যুইচ করেন, তবে আপনি সমস্ত স্ক্রল ভিউ বৈশিষ্ট্যগুলি বন্ধ করতে পারেন এবং ব্যবহারকারীর ইন্টারঅ্যাকশন সক্রিয় করতে পারেন ... এটি একটি লেবেলের মত আরো কাজ করতে বাধ্য করবে।


FXLabel (github এ) label.contentMode . label.contentMode সেট করে UIViewContentModeTop এ বক্সটির মাধ্যমে এটি করে। এই উপাদানটি আমার দ্বারা তৈরি করা হয় না, তবে এটি একটি উপাদান যা আমি ঘন ঘন ব্যবহার করি এবং তার বেশ কয়েকটি বৈশিষ্ট্য রয়েছে এবং এটি ভালভাবে কাজ করে।


UILabel পরিবর্তে আপনি UILabel ব্যবহার করতে পারেন যা উল্লম্ব সারিবদ্ধ বিকল্প রয়েছে:

textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
textField.userInteractionEnabled = NO; // Don't allow interaction

স্টোরিবোর্ড সমাধান: StackView Label এম্বেড করা এবং স্ট্যাকভিউ এর Axis Horizontal , স্টোরিবোর্ড থেকে গুণমানের Attribute Inspector Top Alignment করা সহজতম এবং সহজতম উপায়।


আমি জানি এটি একটি পুরানো পোস্ট কিন্তু উল্লম্বভাবে সারিবদ্ধ পাঠ্য একটি বিশাল সমস্যা (অন্তত আমার জন্য এটি) এবং আমি মনে করি যে আমি এই সমাধানটি ভাগ করে নেব কারণ আমি নিজেকে খুঁজে পাইনি।

DrawRect ব্যবহার করে আমার মতে একটু ব্যয়বহুল। একটি UILabel উল্লম্বভাবে সারিবদ্ধ পেতে সঠিক উপায় একটি UILabel ব্যবহার করা হয় না। একটি UITextView (মাল্টিলাইন UITextField) ব্যবহার করুন এবং সামগ্রী সম্পত্তির পরিদর্শন করুন যাতে:

- (UITextView*)textView{
     if(!_textView){
        UIEdgeInsets insets = UIEdgeInsetsMake(0, 50, 0, 5);
        CGRect frame = CGRectMake(0.0f, 0.0f, 100.0f, 100.0f);
        _textView = [[UITextView alloc]initWithFrame:UIEdgeInsetsInsetRect(frame, insets)];
        _textView.delegate = self;
        _textView.scrollEnabled = YES;
        _textView.bounces = YES;
        _textView.backgroundColor = [UIColor whiteColor];
        [_textView setUserInteractionEnabled:NO];
        [_textView addObserver:self forKeyPath:@"contentSize" options:(NSKeyValueObservingOptionNew) context:NULL];
    }
    return _textView;
}

 -(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:    (NSDictionary *)change context:(void *)context {
UITextView *tv = object;

CGFloat height = [tv bounds].size.height;
CGFloat contentheight;

#ifdef __IPHONE_7_0
    contentheight = [tv sizeThatFits:CGSizeMake(tv.frame.size.width, FLT_MAX)].height;
#else
    contentheight = [tv contentSize].height;
#endif

    switch(self.verticalAlignment) {
        case VerticalAlignmentBottom:{
            CGFloat topCorrect = ([tv bounds].size.height - contentheight);
            topCorrect = (topCorrect <0.0 ? 0.0 : topCorrect);
            tv.contentOffset = (CGPoint){.x = 0, .y = -topCorrect};
        }
        break;
        case VerticalAlignmentMiddle:{
            CGFloat topCorrect = (height - contentheight * [tv zoomScale])/2.0;
            topCorrect = ( topCorrect < 0.0 ? 0.0 : topCorrect );
            tv.contentOffset = (CGPoint){.x = 0, .y = -topCorrect};
        }
            break;
        case VerticalAlignmentTop:{
            tv.contentOffset = (CGPoint){.x = 0, .y = 0 };
        }
            break;
        default:
            break;
    }
}

মূলত এখানে যা ঘটছে তা আমরা পর্যবেক্ষকের মতো করছি এমন ক্লাস সেট করি, সামগ্রীটি দেখি NSKeyValueObservingOptionNewNew বিকল্পের সাথে সাবস্ক্রিপশানটি যাতে প্রতিবার সামগ্রী পরিবর্তিত হয়, কল করা -(void)observeValueForKeyPath:ofObject:change:context:হবে এবং তারপরে আপনি সঠিকভাবে পাঠ্যটি আলগা করার জন্য অফসেট আকার গণনা করতে পারেন ।

আমি এই জন্য ক্রেডিট নিতে পারে না, আসল ধারণা here থেকে এসেছিলেন । কিন্তু, এই সমাধান iOS7 কাজ করে না। কয়েক ঘন্টার জন্য SO কাছাকাছি চলাফেরার পরে, আমি এটি খুঁজে পেয়েছি: iOS 7 উল্লম্ব সারিবদ্ধকরণ ফিক্স । সেখানে মূল লাইন আছেcontentheight = [tv sizeThatFits:CGSizeMake(tv.frame.size.width, FLT_MAX)].height; ।IOS 7 এর কিছু কারণের জন্য, সামগ্রীটি পেতে সাইজ উচ্চতা কাজ করে না তবে এটি সংশোধন করে। দুইটি সমাধানই তাদের নিজস্ব কাজ করে নি, তবে অল্প কিছুক্ষণ পর আমি উপরের সমাধানটি সংশ্লেষ করতে সক্ষম হয়েছিলাম।


দ্রুত,

let myLabel : UILabel!

আপনার লেবেলটির পাঠ্য পর্দায় মাপসই করা এবং এটি শীর্ষে রয়েছে

myLabel.sizeToFit()

পর্দার প্রস্থ বা নির্দিষ্ট প্রস্থ আকারে মাপসই করা লেবেলটির আপনার ফন্ট তৈরি করতে।

myLabel.adjustsFontSizeToFitWidth = YES

এবং লেবেল জন্য কিছু টেক্সট অ্যালাইনমেন্ট:

myLabel.textAlignment = .center

myLabel.textAlignment = .left

myLabel.textAlignment = .right

myLabel.textAlignment = .Natural

myLabel.textAlignment = .Justified


UILabel উল্লম্বভাবে টেক্সট সারিবদ্ধকরণ সম্ভব নয়। কিন্তু, আপনি sizeWithFont:পদ্ধতিটির সাহায্যে লেবেলটির উচ্চতাটি গতিশীলভাবে পরিবর্তন করতে পারেন NSStringএবং আপনার x এবং y সেটিকে ঠিক করতে পারেন।

আপনি ব্যবহার করতে পারেন UITextField। এটি বিষয়বস্তু সমর্থন করে উল্লম্ব অ্যালাইনমেন্ট peoperty এটি একটি subclass হিসাবে UIControluserInteractionEnabledব্যবহারকারীকে লেখাটি টাইপ করতে বাধা দেওয়ার জন্য আপনাকে এটিতে NO সেট করতে হবে।


আপনি autolayout ব্যবহার করছেন, উল্লম্ব কন্টেন্ট হগিং প্রাইরিয়ার 1000, কোড বা আইবিতে সেট করুন। আইবিতে আপনাকে 1 এর অগ্রাধিকারটি সেটিকে রেখে এবং তারপরে মুছে ফেলার পরে উচ্চতা সীমাবদ্ধতাটি সরাতে হবে।





text-alignment