Einbetten eines kleinen Symbols in UILabel

151

Ich muss kleine Symbole (benutzerdefinierte Aufzählungszeichen) UILabelin iOS7 einbetten. Wie kann ich das im Interface Designer machen? Oder zumindest im Code?

In Android gibt es leftDrawableund rightDrawablefür Labels, aber wie geht das in iOS? Probe in Android:

Android Probe

AVEbrahimi
quelle
Ich bin nicht mit Android vertraut. Kannst du ein Bild als Referenz posten?
user1673099
2
Erstellen Sie eine kleine Bildansicht und fügen Sie sie als Unteransicht zum Objekt des Labels hinzu
Saurabh Passolia

Antworten:

291

Sie können dies tun mit iOS 7 der Text - Anlagen , die Teil TextKit sind. Einige Beispielcodes:

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;
Scott Berrevoets
quelle
Wie wäre es mit iOS6? Hast du irgendwelche Vorschläge?? Thx
Steven Jiang
1
@StevenJiang: Sie müssen nur ein UIImageViewzu Ihrem Etikett hinzufügen
Scott Berrevoets
1
Leider wird das Symbol nach dem Text platziert. Gibt es eine Chance, dass wir dies vor dem Text verschieben können, weil ich keinen Weg finde?!
reVerse
4
@reVerse Anstatt das Bild (Anhangszeichenfolge) an Ihre Textzeichenfolge anzuhängen, können Sie dies auch anders herum versuchen, indem Sie die Textzeichenfolge an die Anhangszeichenfolge anhängen.
Scott Berrevoets
11
Hab das schon gestern versucht. Scheint etwas verpasst zu haben, weil es jetzt funktioniert. Vielen Dank. Nur für alle, die versuchen, dasselbe zu erreichen (da es etwas anders ist): NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment]; NSMutableAttributedString *myString = [[NSMutableAttributedString alloc] initWithAttributedString:attachmentString]; NSAttributedString *myText = [[NSMutableAttributedString alloc] initWithString:text]; [myString appendAttributedString:myText];
ReVerse
152

Hier ist die Möglichkeit, ein Symbol in UILabel einzubetten.

Auch auf Richten Sie das Icon Verwendung attachment.bounds


Swift 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

Objective-C-Version

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;

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Tarun Seera
quelle
22
Stimmen Sie für Anhang.Bounds
Peter Zhao
3
Toller Aufruf zur Verwendung von attach.bounds. Genau das habe ich gesucht.
Geoherna
2
Tatsächlich kann imageOffsetY berechnet werden, anstatt einen festen Wert von -5,0 zu verwenden. let imageOffsetY: CGFloat = - (imageAttachment.image! .size.height - self.mobileLabel.font.pointSize) / 2.0;
JonSlowCN
Hinweis: Es verlangsamt die Kompilierungszeit
Jack
Ich kann es auf Storyboard machen?
Augusto
53

Swift 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
André Dos Santos
quelle
23

Ihr Referenzbild sieht aus wie eine Schaltfläche. Versuchen Sie es (kann auch im Interface Builder durchgeführt werden):

Geben Sie hier die Bildbeschreibung ein

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];
Irgendein Typ
quelle
Gut erklärt, ich mag die Tatsache, dass Sie sich die Zeit genommen haben, einen Schiedsrichter zur Verfügung zu stellen. Es hat mir sehr geholfen! Danke
Shinnyx
Dies half mir, mein Trophäensymbol in einen Knopf zu bekommen. Vielen Dank!
Harish
23

Swift 3 Version

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

UILabel-Erweiterung

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
    }
}
RajeshKumar R.
quelle
17

Ich habe diese Funktion in Kürze hier implementiert: https://github.com/anatoliyv/SMIconLabel

Code ist so einfach wie möglich:

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)

So sieht es aus:

SMIconLabel-Bild

anatoliy_v
quelle
12

Swift 4- UIlabel Erweiterung zum Hinzufügen von Bildern zum Etikett unter Bezugnahme auf die obigen Antworten

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
  }
}
Agent Smith
quelle
NSAttributedString(string: " " + text, attributes: [.font: self.font])
Farzad
@grizzly ist das, um Platz zwischen Symbol und Text zu schaffen?
Agent Smith
Ja. ist ein anderer Weg für den Abstand zwischen Symbol und Text?
Farzad
4

Swift 2.0 Version:

//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
Phil
quelle
3

Versuchen Sie, ein UIViewin IB auf den Bildschirm zu ziehen. Von dort aus können Sie ein UIImageViewund UILabelin die gerade erstellte Ansicht ziehen. Legen Sie das Bild UIImageViewim im Eigenschafteninspektor als benutzerdefiniertes Aufzählungsbild fest (das Sie Ihrem Projekt hinzufügen müssen, indem Sie es in den Navigationsbereich ziehen), und Sie können Text in die Beschriftung schreiben.

Nanothread59
quelle
2

versuche es so ...

  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];
user1673099
quelle
Ist das hilfreich für dich?
user1673099
Dieser Ansatz verfehlt Textversatz für Bild (Text liegt hinter Bild)
Brigadir
2

Swift 5 Easy Way Kopieren Sie einfach Paste und ändern Sie, was Sie wollen

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

Geben Sie hier die Bildbeschreibung ein

Shakeel Ahmed
quelle
1

Sie können ein UITextField mit der Eigenschaft leftView verwenden und dann die enabledEigenschaft auf festlegenNO

Oder verwenden Sie einen UIButton undsetImage:forControlState

Liamnichole
quelle
1

In Swift 2.0

Meine Lösung für das Problem ist eine Kombination aus einigen Antworten auf diese Frage. Das Problem, mit dem ich in @ Phils Antwort konfrontiert war, war, dass ich die Position des Symbols nicht ändern konnte und es immer in der rechten Ecke erschien. Und die einzige Antwort von @anatoliy_v war, dass ich die Größe des Symbols, das ich an die Zeichenfolge anhängen möchte, nicht ändern konnte.

Damit es für mich funktioniert, habe ich zuerst eine pod 'SMIconLabel'und dann diese Funktion erstellt:

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
    }

Diese Lösung hilft Ihnen nicht nur beim Platzieren des Bildes, sondern ermöglicht Ihnen auch, die erforderlichen Änderungen an der Symbolgröße und anderen Attributen vorzunehmen.

Danke.

Fennec
quelle
1

Swift 3 UILabel-Erweiterung

Tipp: Wenn Sie zwischen dem Bild und dem Text etwas Platz benötigen, verwenden Sie einfach ein oder zwei Leerzeichen vor dem labelText.

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
    }
}
Gary Mansted
quelle
1
Ich habe das benutzt und es hat perfekt funktioniert. Die anderen oben haben das Bild tatsächlich an das Ende der Zeichenfolge gespiegelt.
Mondousage
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
} 

Mit dieser Funktion können Sie dem Etikett Bilder oder kleine Symbole hinzufügen

Ayush Dixit
quelle
Nennen Sie dies in viewdidload ()
Ayush Dixit
let emojisCollection = [UIImage (benannt: "ic_place"), UIImage (benannt: "ic_group"), UIImage (benannt: "ic_analytics")] lbl1.attributedText = atributedLabel (str: "Howath, Dublin", img: emojisCollection [0 ]!) lbl2.attributedText = atributedLabel (str: "Schwierigkeitsgrad: 18+", img: emojisCollection [2]!) lbl3.attributedText = atributedLabel (str: "Maximale Gruppengröße: 10", img: emojisCollection [1]!)
Ayush Dixit
Sie können Ihre ursprüngliche Antwort bearbeiten, um die obigen Kommentare aufzunehmen.
Moondra
0

Sie müssen ein benutzerdefiniertes Objekt erstellen, UIViewin dem Sie ein UIImageViewund ein a und ein verwendet habenUILabel

Mirko Catalano
quelle