UILabel
iOS7 に小さなアイコン(カスタムの箇条書きの一種)を埋め込む必要があります。インターフェイスデザイナーでこれを行うにはどうすればよいですか?または、少なくともコードでは?
アンドロイドであるleftDrawable
とrightDrawable
ラベルのために、それはiOSの中でどのように行われますか?Androidのサンプル:
UILabel
iOS7 に小さなアイコン(カスタムの箇条書きの一種)を埋め込む必要があります。インターフェイスデザイナーでこれを行うにはどうすればよいですか?または、少なくともコードでは?
アンドロイドであるleftDrawable
とrightDrawable
ラベルのために、それはiOSの中でどのように行われますか?Androidのサンプル:
回答:
これは、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;
UIImageView
ラベルにを追加するだけです
NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment]; NSMutableAttributedString *myString = [[NSMutableAttributedString alloc] initWithAttributedString:attachmentString]; NSAttributedString *myText = [[NSMutableAttributedString alloc] initWithString:text]; [myString appendAttributedString:myText];
UILabelにアイコンを埋め込む方法は次のとおりです。
また、アイコンを整列するには、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バージョン
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;
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
参照画像はボタンのように見えます。試してください(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];
Swift 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
}
}
この機能の実装をここで迅速に行いました: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)
これがどのように見えるかです:
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])
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
UIView
をIBの画面にドラッグしてみてください。そこからドラッグすることができますUIImageView
し、UILabel
先ほど作成したビューに。UIImageView
プロパティインスペクターでの画像をカスタムの箇条書き画像(ナビゲーションウィンドウにドラッグしてプロジェクトに追加する必要があります)として設定し、ラベルにテキストを書き込むことができます。
この方法を試してください...
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];
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
あなたは使用することができますのUITextFieldをしてleftViewの設定、プロパティとenabled
プロパティにNO
または、UIButtonを使用し、setImage:forControlState
Swift 2.0では、
この問題に対する私の解決策は、この質問に対するいくつかの回答の組み合わせです。@Philの回答で直面した問題は、アイコンの位置を変更できず、常に右隅に表示されることでした。そして、@ anatoliy_vからの1つの答えとして、文字列に追加するアイコンのサイズを変更できませんでした。
それを私のために機能させるために、私は最初に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
}
このソリューションは、画像の配置に役立つだけでなく、アイコンのサイズやその他の属性に必要な変更を加えることもできます。
ありがとうございました。
Swift 3 UILabel拡張
ヒント:画像とテキストの間にスペースが必要な場合は、labelTextの前に1つまたは2つのスペースを使用してください。
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
}
この機能を使用して、ラベルに画像や小さなアイコンを追加できます