I am Nguele

My name is Jean-Dominique Nguele and this is my blog. FLVCTVAT NEC MERGITVR

Tag Archives: NSTextAttachment


Set tint color on an image in a NSAttributedString

Reading Time: 4 minutes

Introduction

Hi everyone, I have been working, for a few days now, on a project that requires to make an app fully customisable from a configuration file. I was coding and coding and coding, extracting color definitions, applying tints on images, when I ran into an issue. I could not apply tint over a mutable attributed string, nor simple attributed string for that matter. So I was there, looking at my NSAttributedString and my NSTextAttachment without any property allowing me to change only the image color.

It turns out that you actually can apply a color on your attributed string, I don’t know about the underlying magic when using attributed but it seems that you can apply your text color on an image embedded via your text attachment.

Let’s get started

Setting up the UI

First you create your single view project.

Create single view application

Create single view application

Set project name

Set project name

Then you go on your main storyboard (Main.storyboard) and add a label, that you will link to your view controller code (here as labelWithColoredImage).

Label setup

Label setup

Here is what your code should look like:

And that’s it terms of UI setup for now. Now you can run your app to be sure it’s behaving properly and that the label appears.

Simulator capture of a single label

Now the basic NSAttributedString implementation

Now let’s get our hands dirty with the coding part. First let’s update the text and change its color only using the textColor property only. Let’s add the following lines in the viewDidLoad function and run the app again.

First attempt with red color with no magic of NSAttributedString

First attempt with red color

Then we can observe that the text is red. One minor issue is that it doesn’t fit the screen so we can add contraints to the label to center it and make it responsive. Let’s add the text attachment magic now. It’s time to add an image to the project, I just added the image “swift_logo.png” in the project, drag-n-drop works as well as right clicking in the project and selecting “Add files to <ProjectName>”.

Image added to the project

Image added to the project

Let’s create our attributed string now with the text attachment, I will have the text over two lines to show how the image is now part of it and due to the image color I change the text color to blue so you can see the difference.

Another run!

Blue text, original image, thank you NSAttributedString

Blue text, original image

There you have it! Your image integrated within text. Now let’s check what happens if you render your image as a template. You need to replace this line  let image:UIImage=UIImage(named:"swift_logo")!  with  let image: UIImage = UIImage(named: "swift_logo")!.imageWithRenderingMode(.AlwaysTemplate) then run the app again.

Everything is blue now

Everything is blue now

Giving the image a color of its own different from the source one

Now the image is the same color as the text, for some of you it could be enough but we can go a little bit further by giving specifically to the image a color of its own. You can add the following lines before the assignment of the NSAttributedString to labelWithColoredImage.

Basically these lines say to color in green the character from the index matching the character after stringToDisplay for as long as the text attachment length. Now let’s run the app again.

The final step with NSAttributedString

The final step

And there you are, you know know how to apply a different color to an image through a NSAttributedString.

Conclusion

The source code is available on Github

There is one thing to keep in mind though, there must always be a space before the text attachment containing the image in you NSAttributedString otherwise it will not work. I am not quite sure wether the need to add a space is a bug or if it is actually given access to a hidden feature. Either way, happy coding !