iOS Swift Wrapping Text Around Image - ios

I have a UILabel that will contain various lengths of text. I need to place an image in the upper left corner of the text and have the text wrap around it. How can I do this? All I could find was using a UITextView which I don't want to use since it's static text.

This is a perfectly reasonable use of a UITextView. Your reasons for hesitation to use it are unclear. You can make the UITextView non-editable and non-selectable; the user will not know that it is a UITextView as opposed to to a UILabel.
If you don't like that solution, then what I would do is use, instead of a UILabel, a custom view that draws the text. You can draw the text with Text Kit and thus you can take complete charge of how the text draws. In particular, you can cause it to wrap however you like, including not drawing the text in the corner (exclusion path on the text container).

You can achieve this using NSTextAttachment and attributed text.
NSMutableAttributedString *myText = [[NSMutableAttributedString alloc] initWithString:labelStr];
NSTextAttachment *attachment = [[NSTextAttachment alloc] init]
attachment.image = yourImage;
NSAttributedString *attachmentLock = [NSAttributedString attributedStringWithAttachment:attachment];
NSMutableAttributedString *lockString = [[NSMutableAttributedString alloc] initWithAttributedString:myText];
//set your image range within the text. modify it till you get it right.
NSRange range = NSMakeRange(0,[labelStr length]);
[lockString replaceCharactersInRange:NSMakeRange(range.location, 1) withAttributedString:attachmentLock];
yourLabel.attributedText = lockString;

Related

How can I add a custom view to an attributed string or text view?

I'm trying to get a custom view in an attributed string to be displayed on a textView. I am able to add an image with an NSTextAttachment, but it isn't what I want. I have a custom view that supports Gif's and Animated PNGs that I'd like to display between text.
Example:
text text text [customView] text [customView] text. <- In text view, preferably in attributed string
I would love some guidance as to where I should search specifically. So far I've seen related issues...
Subclass NSTextAttachment: How to subclass NSTextAttachment?
Use NSTextAttachmentContainer..?
NSTextAttachmentCell - Only OSX
Do manipulation in the text view
First, use NSAttributedString or NSMutableAttributedString to show your RichText in subviews (such as UITextView/UILabel)
Then, use NSTextAttachment to replace your image-script in text.
NSString *egText = #"hello [this_is_an_img_script]";
NSMutableAttributedString * destStr = [[NSMutableAttributedString alloc] initWithString:egText];
NSTextAttachment *attachment = [[NSTextAttachment alloc] initWithData:nil ofType:nil];
attachment.image = [UIImage imageNamed:[this_is_an_img_script]];
NSAttributedString *textAttachmentString = [NSAttributedString attributedStringWithAttachment:attachment]; //make your image to an attributedString
[destStr replaceCharactersInRange:range withAttributedString:textAttachmentString];
at last: [YourLabel(or YourTextView) setAttributedString:destStr];
BTW: if you use the YYkit for the RichText, you cannot use the YYAttachMentString to replace NSAttachMentString, these are different things, the UITextView(UILabel) cannot load the YYAttachMentString.
I'm looking for some way to show my gifs with the UITextView (because YYKit cannot load and preview netimage with a url, YYKit always show empty which should be a netImage, cripes!)

iOS Setting text background color in UILabel (with rounded rectangle shape)

I need to create something like this.
One of the way is to create like this. I can append image (for "PDF").
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;
But I not sure whether it is good. Is there any alternative way? Can I highlight 'PDF' word with rounded background? I can easily set text background color with attributed string but it won't have rounded corner.
myLabel.backgroundColor = [UIColor redColor];
myLabel.layer.cornerRedius = 5.0;
myLabel.laayer.maskToBounds = YES;
I would embed the UILabel for PDF in another UIView with the desired background color, and round the corners using view.layer.cornerRadius. This way you can adjust the UILabel how you want within the rounded view.
If you round the corners on the UILabel, you risk having your text overlap the rounded edges.
Use RTLabel library to convert the HTML text. I have used it several times. It works. Here is link to the library and a sample code.
https://github.com/honcheng/RTLabel.
and then apply the css style you need
Hope I helped.

Adding images to a UITextView

It appears that this has been asked and not answered before, but the question is ancient and there have been many Xcode / iOS updates since then, so I am going to give this a shot.
I have a simple view controller laid out. There is a single View that contains a read-only Text View with some instructions on how to use the app. I would like to intersperse some images in the scrolling text view to refer to the buttons and other elements that I am referring to in the instructions.
Here is the view:
So for instance, when the instructions refer to the green start button, I would like to insert an image of that button inline with the rest of the text.
I am using Xcode 5.1.1 and of course storyboards. Thanks in advance for any suggestions.
You can use the NSAttributedString with NSTextAttachment to attach an image to the text
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:#"press to start"];
NSTextAttachment *imageAttachment = [NSTextAttachment new];
imageAttachment.image = [UIImage imageNamed:#"AnyImage.png"];
NSAttributedString *stringWithImage = [NSAttributedString attributedStringWithAttachment:imageAttachment];
[attributedString replaceCharactersInRange:NSMakeRange(5, 1) withAttributedString:stringWithImage];
self.textView.attributedText = attributedString;

How to wrap text around attachments using iOS7 Text Kit?

I am using the new Text Kit API to add attachments to some attributed text:
// create an attachment for each image
NSTextAttachment* ta = [NSTextAttachment new];
ta.image = [UIImage imageNamed:#"imageName"];
// add to the attributed text string
NSAttributedString* rep = [NSAttributedString attributedStringWithAttachment:ta];
[myAttributedTextString appendAttributedString:rep];
This works fine, I can see my image rendered in the output. However, I cannot find any way to specify the image alignment, or wrap text around the image.
Any ideas?
NOTE: Text attachments are different from exclusions paths - a text attachment is part of the 'model', i.e. it is part of the attributed text string that the layout manager performs text layout on. Whereas an exclusion path is part of the view.
NSTextAttachments are treated as a single character by NSAttributedString. So, in order to adjust their alignment you must do so as you would for text. It took me hours of fiddling with attachment.bounds (which I never could get to work properly) to finally figure this out. Here's an example of how to horizontally align an NSTextAttachment.
#def BETWEEN_SECTION_SPACING 10
// creates a text attachment with an image
NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = [UIImage imageNamed:#"sample_image.jpg"];
NSMutableAttributedString *imageAttrString = [[NSAttributedString attributedStringWithAttachment:attachment] mutableCopy];
// sets the paragraph styling of the text attachment
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init] ;
[paragraphStyle setAlignment:NSTextAlignmentCenter]; // centers image horizontally
[paragraphStyle setParagraphSpacing:BETWEEN_SECTION_SPACING]; // adds some padding between the image and the following section
[imageAttrString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [imageAttrString length])];
After this, you would append imageAttrString to an existing attributed string and perhaps append another after it. One quirk is that because the attachment is a character it is not treated as its own paragraph. In order for that to be the case you will need to surround it with \n (newline characters). Just append these to both sides of the attachment's attributed string.
Hope that helps, it took me ages to figure out.
Try setting the bounds property to the image size.
Defines the layout bounds of the receiver's graphical representation in the text coordinate system.
So it should be:
ta.bounds = (CGRect) { 0, 0, ta.image.size };
ta.bounds = (CGRect) { 0, yPadding, ta.image.size };
change yPadding you need.
It can be negative when image's height is large than line height.

UITextView clear attributedText before setting new text

Hi I am trying to replace the attributedText of a UITextView subclass. I want to change the coloring of the text. to do so the following code is used:
AMR_ANSIEscapeHelper *ansiEscapeHelper = [[AMR_ANSIEscapeHelper alloc] init];
[ansiEscapeHelper setDefaultStringColor:[receiveView.highlightColor objectForKey:#"text"]];
NSMutableAttributedString *resultString = [receiveView.attributedText copy];
[receiveView setAttributedText:[ansiEscapeHelper attributedStringWithANSIEscapedString:[ansiEscapeHelper ansiEscapedStringWithAttributedString:resultString]]];
Problem is: The text does not get replaced; it just seem to add another layer of text, making the text color very strange. Do i need to assert some clearing before i set the Attributed Text the second time?
Here is how it looks: (The text should not be black, dark green and red)
)
The subclass RegexHighlightView contains another method of coloring the text, therefore multiple colors are painted to the fonts!

Resources