Cómo incrustar ícono pequeño en UILabel

Necesito insertar icons pequeños (tipo de viñetas personalizadas) en mi UILabel en iOS7. ¿Cómo puedo hacer esto en el diseñador de interfaz? ¿O al menos en el código?

En Android hay leftDrawable y rightDrawable para las tags, pero ¿cómo se hace en iOS? Muestra en Android:

muestra de Android

Puede hacerlo con los archivos adjuntos de texto de iOS 7, que son parte de TextKit. Algunos ejemplos de código:

 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; 

Esta es la forma de insertar ícono en UILabel.

También para alinear el icono, use attachment.bounds


Versión Swift

 //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 = NSMutableAttributedString(string: "Using attachment.bounds!") completeText.append(textAfterIcon) self.mobileLabel.textAlignment = .center; self.mobileLabel.attributedText = completeText; 

Versión Objective-C

  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]; NSMutableAttributedString *textAfterIcon= [[NSMutableAttributedString alloc] initWithString:@"Using attachment.bounds!"]; [completeText appendAttributedString:textAfterIcon]; self.mobileLabel.textAlignment=NSTextAlignmentRight; self.mobileLabel.attributedText=completeText; 

enter image description here

enter image description here

Rápido:

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

Tu imagen de referencia parece un botón. Prueba (también se puede hacer en Interface Builder):

enter image description here

 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]; 

Swift 3 versión

 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 

He hecho una implementación de esta característica en breve aquí: https://github.com/anatoliyv/SMIconLabel

El código es tan simple como es posible:

 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) 

Así es como se ve:

Imagen SMIconLabel

Versión de Swift 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 

Swift 4 UIlabel Extension para agregar una imagen a la etiqueta con referencia a las respuestas anteriores

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

Intente arrastrar una UIView a la pantalla en IB. Desde allí, puede arrastrar UIImageView y UILabel a la vista que acaba de crear. Establezca la imagen de UIImageView en el inspector de propiedades como la imagen de viñeta personalizada (que deberá agregar a su proyecto arrastrándola al panel de navegación) y puede escribir texto en la etiqueta.

intente de esta manera …

  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]; 

Podría usar un UITextField con la propiedad leftView y luego establecer la propiedad enabled en NO

O use un UIButton y setImage:forControlState

En Swift 2.0,

Mi solución al problema es una combinación de un par de respuestas sobre esta pregunta. El problema al que me enfrenté en la respuesta de @ Phil fue que no pude cambiar la posición del ícono, y siempre apareció a la derecha de la esquina. Y la única respuesta de @anatoliy_v, no pude cambiar el tamaño del tamaño del icono que quiero adjuntar a la cadena.

Para hacerlo funcionar, primero hice un pod 'SMIconLabel' y luego creé esta función:

 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 } 

Esta solución no solo le ayudará a colocar la imagen, sino que también le permitirá realizar los cambios necesarios en el tamaño del icono y otros atributos.

Gracias.

Extensión Swift 3 UILabel

Consejo: Si necesita espacio entre la imagen y el texto, solo use un espacio o dos antes de la etiqueta Texto.

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

Puede usar esta función para agregar imágenes o pequeños icons a la etiqueta

tienes que hacer un objeto personalizado donde UIView un UIView y dentro de ti pusiste un UIImageView y un UILabel