ইউআইএলবেলে কীভাবে ছোট আইকন এম্বেড করা যায়


153

আইওএস 7-এ আমাকে ছোট আইকনগুলি (কাস্টম বুলেটের ধরণের) এম্বেড করা দরকার UILabel। ইন্টারফেস ডিজাইনারে আমি কীভাবে এটি করতে পারি? বা কমপক্ষে কোডে?

অ্যান্ড্রয়েডে লেবেল রয়েছে leftDrawableএবং রয়েছে rightDrawable, তবে এটি আইওএসে কীভাবে হয়? অ্যান্ড্রয়েডে নমুনা:

অ্যান্ড্রয়েড নমুনা


আমি অ্যান্ড্রয়েডের সাথে ফ্যামিলির নই আপনি কি রেফারেন্সের জন্য কিছু চিত্র পোস্ট করতে পারেন?
ব্যবহারকারী1673099

2
একটি ছোট চিত্রদর্শন তৈরি করুন এবং এটিকে লেবেলের বস্তুর সাবউভিউ হিসাবে যুক্ত করুন
সৌরভ পাসোলিয়া

উত্তর:


292

আপনি এটি আইওএস 7 এর পাঠ্য সংযুক্তিগুলির সাহায্যে করতে পারেন , যা পাঠ্যকিটের অংশ। কিছু নমুনা কোড:

NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = [UIImage imageNamed:@"MyIcon.png"];

NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment];

NSMutableAttributedString *myString= [[NSMutableAttributedString alloc] initWithString:@"My label text"];
[myString appendAttributedString:attachmentString];

myLabel.attributedText = myString;

আইওএস about কেমন? তোমার কি কোন পরামর্শ আছে?? থেক্স
স্টিভেন জিয়াং

1
@ স্টিভেন জিয়াং: আপনাকে কেবলমাত্র UIImageViewআপনার লেবেলে একটি যুক্ত করতে হবে
স্কট বেরেরোয়েটস

1
দুর্ভাগ্যক্রমে এটি পাঠ্যের পরে আইকন রাখে। পাঠ্যের আগে আমরা এটি স্থানান্তর করতে পারি এমন কোনও সুযোগ কারণ আমি কোনও উপায় খুঁজে পাচ্ছি না ?!
পুনর্বিবেচনা করুন

4
@ রিভার্স আপনার পাঠ্য স্ট্রিংটিতে চিত্র (সংযুক্তি স্ট্রিং) সংযোজন করার পরিবর্তে, আপনি অন্য উপায়ে চেষ্টা করতে পারেন, সুতরাং সংযুক্তি স্ট্রিংয়ে পাঠ্য স্ট্রিং যুক্ত করুন।
স্কট বেরেরোয়েটস

11
ইতিমধ্যে এটি গতকাল চেষ্টা করেছেন। মনে হচ্ছে কিছু মিস করা কারণ এটি এখন কাজ করে। ধন্যবাদ। যারা একই কাজটি করার চেষ্টা করছেন কেবল তাদের ক্ষেত্রে (যেহেতু এটি কিছুটা আলাদা): NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment]; NSMutableAttributedString *myString = [[NSMutableAttributedString alloc] initWithAttributedString:attachmentString]; NSAttributedString *myText = [[NSMutableAttributedString alloc] initWithString:text]; [myString appendAttributedString:myText];
পুনর্বিবেচনা করুন

153

ইউআইএবেবেলে আইকন এম্বেড করার উপায় এখানে।

এছাড়াও থেকে আইকন সারিবদ্ধ ব্যবহার attachment.bounds


সুইফট 5.1

// Create Attachment
let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named:"iPhoneIcon")
// Set bound to reposition
let imageOffsetY: CGFloat = -5.0
imageAttachment.bounds = CGRect(x: 0, y: imageOffsetY, width: imageAttachment.image!.size.width, height: imageAttachment.image!.size.height)
// Create string with attachment
let attachmentString = NSAttributedString(attachment: imageAttachment)
// Initialize mutable string
let completeText = NSMutableAttributedString(string: "")
// Add image to mutable string
completeText.append(attachmentString)
// Add your text to mutable string
let textAfterIcon = NSAttributedString(string: "Using attachment.bounds!")
completeText.append(textAfterIcon)
self.mobileLabel.textAlignment = .center
self.mobileLabel.attributedText = completeText

উদ্দেশ্য-সি সংস্করণ

NSTextAttachment *imageAttachment = [[NSTextAttachment alloc] init];
imageAttachment.image = [UIImage imageNamed:@"iPhoneIcon"];
CGFloat imageOffsetY = -5.0;
imageAttachment.bounds = CGRectMake(0, imageOffsetY, imageAttachment.image.size.width, imageAttachment.image.size.height);
NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:imageAttachment];
NSMutableAttributedString *completeText = [[NSMutableAttributedString alloc] initWithString:@""];
[completeText appendAttributedString:attachmentString];
NSAttributedString *textAfterIcon = [[NSAttributedString alloc] initWithString:@"Using attachment.bounds!"];
[completeText appendAttributedString:textAfterIcon];
self.mobileLabel.textAlignment = NSTextAlignmentRight;
self.mobileLabel.attributedText = completeText;

এখানে চিত্র বর্ণনা লিখুন

এখানে চিত্র বর্ণনা লিখুন


22
সংযুক্তি.বাউন্ডসের পক্ষে ভোট দিন
পিটার ঝাও

3
সংযুক্তি.বাউন্ডস ব্যবহার করে দুর্দান্ত কল। ঠিক আমি যা খুঁজছিলাম তা ঠিক।
জিওহরনা

2
আসলে চিত্র-অফসেটওয়াই -5.0 এর একটি নির্দিষ্ট মান ব্যবহার না করে গণনা করা যেতে পারে। ইমেজঅফসেটওয়াই: সিজিফ্লোট = - (ইমেজএটাচমেন্ট.আইমেজ!। সাইজ.ইহাইট - সেলফ.মোবাইললবেল.ফন্ট.পয়েন্টসাইজ) / 2.0;
জোনস্লোসিএন

দ্রষ্টব্য: এটি সংকলনের সময়টি ধীর করে দেয়
জ্যাক

আমি স্টোরিবোর্ডে এটি করতে পারি?
আগস্টো

53

সুইফট 4.2:

let attachment = NSTextAttachment()        
attachment.image = UIImage(named: "yourIcon.png")
let attachmentString = NSAttributedString(attachment: attachment)
let myString = NSMutableAttributedString(string: price)
myString.append(attachmentString)
label.attributedText = myString

23

আপনার রেফারেন্স চিত্রটি একটি বোতামের মতো দেখাচ্ছে। চেষ্টা করুন (ইন্টারফেস বিল্ডারেও করা যেতে পারে):

এখানে চিত্র বর্ণনা লিখুন

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:CGRectMake(50, 50, 100, 44)];
[button setImage:[UIImage imageNamed:@"img"] forState:UIControlStateNormal];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, -30, 0, 0)];
[button setTitle:@"Abc" forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor yellowColor]];
[view addSubview:button];

ভালভাবে ব্যাখ্যা করা হয়েছে, আপনি একটি রেফ সরবরাহ করার জন্য সময় নিয়েছিলেন তা আমি পছন্দ করি। এটা আমাকে অনেক সাহায্য করেছে! ধন্যবাদ
শিনিক্স

এটি আমার ট্রফি আইকনটিকে একটি বোতামে পেতে সহায়তা করেছে। অনেক ধন্যবাদ!
হরিশ

23

সুইফট 3 সংস্করণ

let attachment = NSTextAttachment()
attachment.image = UIImage(named: "plus")
attachment.bounds = CGRect(x: 0, y: 0, width: 10, height: 10)
let attachmentStr = NSAttributedString(attachment: attachment)
let myString = NSMutableAttributedString(string: "")
myString.append(attachmentStr)
let myString1 = NSMutableAttributedString(string: "My label text")
myString.append(myString1)
lbl.attributedText = myString

ইউআইএলবেল এক্সটেনশন

extension UILabel {

    func set(text:String, leftIcon: UIImage? = nil, rightIcon: UIImage? = nil) {

        let leftAttachment = NSTextAttachment()
        leftAttachment.image = leftIcon
        leftAttachment.bounds = CGRect(x: 0, y: -2.5, width: 20, height: 20)
        if let leftIcon = leftIcon {
            leftAttachment.bounds = CGRect(x: 0, y: -2.5, width: leftIcon.size.width, height: leftIcon.size.height)
        }
        let leftAttachmentStr = NSAttributedString(attachment: leftAttachment)

        let myString = NSMutableAttributedString(string: "")

        let rightAttachment = NSTextAttachment()
        rightAttachment.image = rightIcon
        rightAttachment.bounds = CGRect(x: 0, y: -5, width: 20, height: 20)
        let rightAttachmentStr = NSAttributedString(attachment: rightAttachment)


        if semanticContentAttribute == .forceRightToLeft {
            if rightIcon != nil {
                myString.append(rightAttachmentStr)
                myString.append(NSAttributedString(string: " "))
            }
            myString.append(NSAttributedString(string: text))
            if leftIcon != nil {
                myString.append(NSAttributedString(string: " "))
                myString.append(leftAttachmentStr)
            }
        } else {
            if leftIcon != nil {
                myString.append(leftAttachmentStr)
                myString.append(NSAttributedString(string: " "))
            }
            myString.append(NSAttributedString(string: text))
            if rightIcon != nil {
                myString.append(NSAttributedString(string: " "))
                myString.append(rightAttachmentStr)
            }
        }
        attributedText = myString
    }
}

17

আমি দ্রুত এখানে এই বৈশিষ্ট্যটির একটি বাস্তবায়ন করেছি: https://github.com/anatoliyv/SMIconLabel

কোড যতটা সম্ভব সহজ:

var labelLeft = SMIconLabel(frame: CGRectMake(10, 10, view.frame.size.width - 20, 20))
labelLeft.text = "Icon on the left, text on the left"

// Here is the magic
labelLeft.icon = UIImage(named: "Bell") // Set icon image
labelLeft.iconPadding = 5               // Set padding between icon and label
labelLeft.numberOfLines = 0             // Required
labelLeft.iconPosition = SMIconLabelPosition.Left // Icon position
view.addSubview(labelLeft)

এটি কেমন দেখাচ্ছে তা এখানে:

SMIconLabel চিত্র


13

UIlabelউপরের উত্তরের রেফারেন্স সহ লেবেলে চিত্র যুক্ত করতে সুইফট 4 এক্সটেনশন

extension UILabel {
  func set(image: UIImage, with text: String) {
    let attachment = NSTextAttachment()
    attachment.image = image
    attachment.bounds = CGRect(x: 0, y: 0, width: 10, height: 10)
    let attachmentStr = NSAttributedString(attachment: attachment)

    let mutableAttributedString = NSMutableAttributedString()
    mutableAttributedString.append(attachmentStr)

    let textString = NSAttributedString(string: text, attributes: [.font: self.font])
    mutableAttributedString.append(textString)

    self.attributedText = mutableAttributedString
  }
}

NSAttributedString(string: " " + text, attributes: [.font: self.font])
ফরজাদ

@ গ্রিজলি আইকন এবং পাঠ্যের মধ্যে স্থান তৈরি করার জন্য এটি কি?
এজেন্ট স্মিথ

হ্যাঁ. আইকন এবং পাঠ্যের মধ্যে স্থান জন্য অন্য উপায়?
ফরজাদ

4

সুইফট 2.0 সংস্করণ:

//Get image and set it's size
let image = UIImage(named: "imageNameWithHeart")
let newSize = CGSize(width: 10, height: 10)

//Resize image
UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
image?.drawInRect(CGRectMake(0, 0, newSize.width, newSize.height))
let imageResized = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

//Create attachment text with image
var attachment = NSTextAttachment()
attachment.image = imageResized
var attachmentString = NSAttributedString(attachment: attachment)
var myString = NSMutableAttributedString(string: "I love swift ")
myString.appendAttributedString(attachmentString)
myLabel.attributedText = myString

3

আইবিতে UIViewস্ক্রিনে একটি টেনে আনার চেষ্টা করুন । সেখান থেকে আপনি একটি তৈরি করতে UIImageViewএবং UILabelআপনার সদ্য তৈরি করা দৃশ্যে can UIImageViewবৈশিষ্ট্য পরিদর্শকের মধ্যে থাকা চিত্রটি কাস্টম বুলেট চিত্র হিসাবে সেট করুন (যা আপনাকে আপনার প্রকল্পে এটি নেভিগেশন ফলকে টেনে টেনে যোগ করতে হবে) এবং আপনি লেবেলে কিছু পাঠ্য লিখতে পারেন।


2

এইভাবে চেষ্টা করুন ...

  self.lbl.text=@"Drawble Left";
    UIImageView *img=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 20, 20)];
    img.image=[UIImage imageNamed:@"Star.png"];
    [self.lbl addSubview:img];

এটি কি আপনার পক্ষে সহায়ক?
ব্যবহারকারী1673099

এই পদ্ধতির চিত্রটির জন্য পাঠ্য অফসেটটি মিস হয় (পাঠ্য চিত্রের পিছনে রয়েছে)
ব্রিগেডিয়ার

2

সুইফট 5 সহজ উপায় জাস্ট কপিপাস্ট করুন এবং আপনি যা চান তা পরিবর্তন করুন

let fullString = NSMutableAttributedString(string:"To start messaging contacts who have Talklo, tap ")

 // create our NSTextAttachment
let image1Attachment = NSTextAttachment() 
image1Attachment.image = UIImage(named: "chatEmoji")
image1Attachment.bounds = CGRect(x: 0, y: -8, width: 25, height: 25)

// wrap the attachment in its own attributed string so we can append it
let image1String = NSAttributedString(attachment: image1Attachment)

 // add the NSTextAttachment wrapper to our full string, then add some more text.

 fullString.append(image1String)
 fullString.append(NSAttributedString(string:" at the right bottom of your screen"))

 // draw the result in a label
 self.lblsearching.attributedText = fullString

এখানে চিত্র বর্ণনা লিখুন



1

সুইফট ২.০ এ,

আমার সমস্যার সমাধানটি এই প্রশ্নের কয়েকটি উত্তরের সংমিশ্রণ। @ ফিলের উত্তরে আমি যে সমস্যার মুখোমুখি হয়েছি তা হ'ল আমি আইকনের অবস্থানটি পরিবর্তন করতে পারিনি এবং এটি সর্বদা ডান কোণায় উপস্থিত হয়েছিল। @Anatoliy_v এর একটি উত্তর, আমি স্ট্রিংয়ের সাথে যুক্ত করতে চাই এমন আইকন আকারটি পরিবর্তন করতে পারিনি।

এটি আমার পক্ষে কাজ করার জন্য, আমি প্রথমে একটি করেছিলাম pod 'SMIconLabel'এবং তারপরে এই ফাংশনটি তৈরি করেছি:

func drawTextWithIcon(labelName: SMIconLabel, imageName: String, labelText: String!,  width: Int, height: Int) {

        let newSize = CGSize(width: width, height: height)
        let image = UIImage(named: imageName)
        UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
        image?.drawInRect(CGRectMake(0, 0, newSize.width, newSize.height))
        let imageResized = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        labelName.text = " \(labelText)"
        labelName.icon = imageResized
        labelName.iconPosition = .Left
    }

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

ধন্যবাদ.


1

সুইফট 3 ইউিলাবল এক্সটেনশন

টিপ: আপনার যদি চিত্র এবং পাঠ্যের মধ্যে কিছু জায়গার প্রয়োজন হয় কেবল লেবেল পাঠের আগে বা দু'একটি জায়গা ব্যবহার করুন।

extension UILabel {
    func addIconToLabel(imageName: String, labelText: String, bounds_x: Double, bounds_y: Double, boundsWidth: Double, boundsHeight: Double) {
        let attachment = NSTextAttachment()
        attachment.image = UIImage(named: imageName)
        attachment.bounds = CGRect(x: bounds_x, y: bounds_y, width: boundsWidth, height: boundsHeight)
        let attachmentStr = NSAttributedString(attachment: attachment)
        let string = NSMutableAttributedString(string: "")
        string.append(attachmentStr)
        let string2 = NSMutableAttributedString(string: labelText)
        string.append(string2)
        self.attributedText = string
    }
}

1
আমি এটি ব্যবহার করেছি এবং এটি পুরোপুরি কাজ করেছে। উপরের অন্যান্যগুলি প্রকৃতপক্ষে স্ট্রিংয়ের শেষে চিত্রটি উল্টিয়েছিল।
মন্ডসেজ

1
 func atributedLabel(str: String, img: UIImage)->NSMutableAttributedString
{   let iconsSize = CGRect(x: 0, y: -2, width: 16, height: 16)
    let attributedString = NSMutableAttributedString()
    let attachment = NSTextAttachment()
    attachment.image = img
    attachment.bounds = iconsSize
    attributedString.append(NSAttributedString(attachment: attachment))
    attributedString.append(NSAttributedString(string: str))

    return attributedString
} 

আপনি লেবেলে ছবি বা ছোট আইকন যুক্ত করতে এই ফাংশনটি ব্যবহার করতে পারেন


এটিকে ভিডিডলোড ()
দীক্ষিত

ইমোজিসকলেশন = [ইউআইআইমেজ (নাম: "আইসি_প্লেস"), ইউআইআইমেজ (নাম দেওয়া হয়েছে: "আইস_গ্রুপ"), ইউআইআইমেজ (নাম দেওয়া হয়েছে: "আইস_অ্যানালিটিক্স")] lbl1.attributesText = atributesLabel (স্ট্রিম: "হাওথ, ডাবলিন", img: ইমোজিসলকশন [0 ]!) lbl2.attributesText = atributesLabel (str: "অসুবিধা: 18+", img: ইমোজিসকলকেশন [2]!) lbl3.attributesText = atributesLabel (str: "সর্বাধিক গ্রুপের আকার: 10", img: ইমোজিসোলেশন [1]!)
আয়ুশ দীক্ষিত

উপরের মন্তব্যগুলি অন্তর্ভুক্ত করতে আপনি মূল উত্তরটি সম্পাদনা করতে পারেন।
মুন্দ্রা

0

আপনি একটি কাস্টম অবজেক্ট তৈরি করতে হবে যেখানে আপনি UIViewএকটি UIImageViewএবং একটি রেখেছিলেন insideUILabel

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.