Image Alignment NSTextAttachment

Question

I follow this cool tutorial Implementing Rich Text with images on OS X and iOS by @Duncan Groenewald and was able to display images in my UITextView . However, these images are not centered as desired. See Image

As you can see, I would like my image to be centered on the X axis.

I tried to return a rect with the appropriate values ​​in -attachmentBoundsForTextContainer:proposedLineFragment:glyphPosition:characterIndex , but that didn't help.

I also tried setting NSKernAttributeName for the NSTextAttachment line. But all he did was hide the image in some way.

Answer 1

Try setting the paragraph style on your attachment centered.

If your images are embedded in the attribute string as attachments, you can access them by listing the attribute attributes of the attached string. For instance:

  attributedContent.enumerateAttribute(NSAttachmentAttributeName, inRange: NSRange(location: 0, length: attributedContent.length), options: nil) { (attribute, range, stop) -> Void in if let attachment = attribute as? NSTextAttachment { // this example assumes you want to center all attachments. You can provide additional logic here. For example, check for attachment.image. let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.alignment = .Center attributedContent.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: range) } } 

Answer 2

This is Swift 3.1 using the extension:

 extension NSMutableAttributedString { func setAttachmentsAlignment(_ alignment: NSTextAlignment) { self.enumerateAttribute(NSAttachmentAttributeName, in: NSRange(location: 0, length: self.length), options: .longestEffectiveRangeNotRequired) { (attribute, range, stop) -> Void in if attribute is NSTextAttachment { let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.alignment = alignment self.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: range) } } } } 

This way you can easily apply alignment for attachments in the attribute string:

 let attributeString = NSMutableAttributedString(string: "") // add attachments attributeString.setAttachmentsAlignment(.center) 

Answer 3

Here's another way to set the alignment for an NSTextAttachment image. Hope this also helps someone deal with this. I use the following code in func tableView (_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

 var buttonText = "My Button"; let align = NSMutableParagraphStyle(); align.alignment = NSTextAlignment.center; align.firstLineHeadIndent = 10.0; align.headIndent = 10.0; align.tailIndent = -10.0; let para = NSMutableAttributedString(); // top padding para.append(NSAttributedString(string: "\n", attributes: [NSParagraphStyleAttributeName: align, NSFontAttributeName: UIFont(name: "Helvetica", size: 10.0)!, NSForegroundColorAttributeName: UIColor.white])); // image let img = NSTextAttachment(); img.image = UIImage(named: "MyIcon"); img.bounds = CGRect(x: 0, y: UIFont(name: "Helvetica", size: 18.0)!.descender, width: img.image!.size.width, height: img.image!.size.height); let nas = NSAttributedString(attachment: img).mutableCopy() as! NSMutableAttributedString; nas.addAttribute(NSParagraphStyleAttributeName, value: align, range: NSRange(location: 0, length: nas.length)); para.append(nas); // space to text buttonText = " " + buttonText; // text para.append(NSAttributedString( string: buttonText, attributes: [NSParagraphStyleAttributeName: align, NSFontAttributeName: UIFont(name: "Helvetica", size: 18.0)!, NSForegroundColorAttributeName: UIColor.black])); // bottom padding para.append(NSAttributedString(string: "\n", attributes: [NSParagraphStyleAttributeName: align, NSFontAttributeName: UIFont(name: "Helvetica", size: 10.0)!, NSForegroundColorAttributeName: UIColor.white])); // set cell label let label = cell.textLabel!; label.numberOfLines = 0; label.layer.borderWidth = 0; label.layer.masksToBounds = false; label.backgroundColor = UIColor.clear; label.layer.backgroundColor = UIColor.green; label.attributedText = para;