ios - guia - Cómo incrustar ícono pequeño en UILabel

guia qgis

Question

Necesito insertar iconos 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 etiquetas, pero ¿cómo se hace en iOS? Muestra en Android:

Answer 1

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.

Answer 2

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;

Answer 3

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:

Answer 4

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.

Answer 5

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

O use un UIButton y setImage:forControlState

Answer 6

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;

Answer 7

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

Answer 8

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

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

 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 iconos a la etiqueta