UILabel에 작은 아이콘을 포함시키는 방법


153

UILabeliOS7에서 작은 아이콘 (맞춤형 글 머리 기호)을 포함시켜야합니다 . 인터페이스 디자이너에서 어떻게해야합니까? 아니면 적어도 코드에서?

안드로이드에있다 leftDrawablerightDrawable라벨 있지만 아이폰 OS에서 수행하는 방법? 안드로이드 샘플 :

안드로이드 샘플


Android에 익숙하지 않은데 참조 할 이미지를 게시 할 수 있습니까?
user1673099

2
작은 이미지 뷰를 만들고 라벨의 객체에 하위 뷰로 추가
Saurabh Passolia에게

답변:


292

TextKit의 일부인 iOS 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;

iOS6은 어떻습니까? 당신은 어떤 제안이 있습니까 ?? Thx
Steven Jiang

1
@StevenJiang : UIImageView라벨 에 A 만 추가하면 됩니다
Scott Berrevoets

1
불행히도 이것은 텍스트 뒤에 아이콘을 배치합니다. 방법을 찾을 수 없기 때문에 텍스트보다 먼저 이동할 수 있습니까?!
reverse

4
@reVerse 이미지 (첨부 문자열)를 텍스트 문자열에 추가하는 대신 다른 방법으로 시도하여 텍스트 문자열을 첨부 문자열에 추가 할 수 있습니다.
Scott Berrevoets

11
어제 이미 시도했습니다. 이제 작동하기 때문에 놓친 것 같습니다. 감사. 그냥 (이 약간 다른 이후) 같은 작업을 수행하려고 모든 사람을위한 경우 : NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment]; NSMutableAttributedString *myString = [[NSMutableAttributedString alloc] initWithAttributedString:attachmentString]; NSAttributedString *myText = [[NSMutableAttributedString alloc] initWithString:text]; [myString appendAttributedString:myText];

153

UILabel에 아이콘을 포함시키는 방법은 다음과 같습니다.

또한 아이콘정렬 하려면 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

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

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오


22
attachment.bounds에 투표
Peter Zhao

3
attachment.bounds를 사용하는 것이 좋습니다. 바로 내가 찾던 것입니다.
Geoherna

2
실제로 고정 값 -5.0을 사용하는 대신 imageOffsetY를 계산할 수 있습니다. let imageOffsetY : CGFloat =-(imageAttachment.image! .size.height-self.mobileLabel.font.pointSize) / 2.0;
JonSlowCN

참고 : 컴파일 시간이 느려짐
Jack

스토리 보드에서 할 수 있습니까?
Augusto

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

잘 설명했다. 나는 당신이 심판을 제공하기 위해 시간이 걸린 사실을 좋아한다. 그것은 많은 도움이되었습니다! 감사합니다
Shinnyx

이것은 트로피 아이콘을 버튼에 넣는 데 도움이되었습니다. 고마워요!
Harish

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

UILabel 확장

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위의 답변을 참조하여 레이블에 이미지를 추가하는 Swift 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])
Farzad

@grizzly는 아이콘과 텍스트 사이에 공간을 만드는 것입니까?
스미스 요원

예. 아이콘과 텍스트 사이에 공간을 두는 또 다른 방법입니까?
Farzad

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

UIViewIB에서 화면으로 a 를 드래그하십시오 . 거기에서 당신은 드래그 할 수 UIImageViewUILabel보기에 당신은 방금 만든. 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];

도움이 되셨습니까?
user1673099

이 접근법은 이미지에 대한 텍스트 오프셋을 그리워합니다 (텍스트가 이미지 뒤에 있음)
brigadir

2

Swift 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

Swift 2.0에서는

문제에 대한 나의 해결책은이 질문에 대한 몇 가지 답변의 조합입니다. @ 필의 대답에서 직면 한 문제는 아이콘의 위치를 ​​변경할 수 없으며 항상 모서리에 나타납니다. 그리고 @anatoliy_v의 답변 중 하나는 문자열에 추가하려는 아이콘 크기를 조정할 수 없었습니다.

나를 위해 일하기 위해 먼저 a 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 UI

팁 : 이미지와 텍스트 사이에 약간의 공백이 필요한 경우 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
    }
}

1
나는 이것을 사용했고 완벽하게 작동했습니다. 위의 다른 것들은 실제로 이미지를 문자열의 끝으로 뒤집 었습니다.
mondousage 2018 년

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
} 

이 기능을 사용하여 레이블에 이미지 또는 작은 아이콘을 추가 할 수 있습니다


viewdidload ()에서 호출
Ayush Dixit

let emojisCollection = [UIImage (이름 : "ic_place"), UIImage (이름 : "ic_group"), UIImage (이름 : "ic_analytics")] lbl1.attributedText = atributedLabel (str : "Howath, Dublin", img : emojisCollection [0 ]!) lbl2.attributedText = atributedLabel (str : "어려움 : 18+", img : emojisCollection [2]!) lbl3.attributedText = atributedLabel (str : "최대 그룹 크기 : 10", img : emojisCollection [1]!)
Ayush Dixit

위의 주석을 포함하도록 원래 답변을 편집 할 수 있습니다.
Moondra

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.