iOS vs Android - How To Draw - Part 4 - Text

Stephen Zaharuk / Tuesday, January 12, 2016

My blog posts until this point have mainly revolved around programming for iOS in Objective-C. There have been some posts around C#, however they're more about switching from C# to Objective-C.

However, the past year, i've been splitting my time equally between iOS and and Android development.

Since more and more mobile app developers are supporting both platforms simultaneously, i figured why not blog about both platforms!

This series of posts will revolve around drawing various things in both platforms. You'll be pleasantly surprised to see that both are actually very similar!

Part 1 - Intro

Part 2 - Styling

Part 3 - Drawing

Part 4 - Text

Part 4 - Text

Finally, lets learn how to draw Text!

This is where iOS and Android differ the most. They used to be closer together, but iOS moved to a different way in drawing text. And in fact, they have a much more lower level of drawing text that we're not going to dive into using their TextKit frameworks. For the purpose of this article, we're going to cover the basic way to draw text.

The first thing to note is that Android and iOS use two different types of objects for Fonts. In iOS you create a UIFont object that takes a font name and size. And in android we create a Typeface object, that does not take a size. Instead we're setting the font size on the paint object.

iOS

UIFont* font = [UIFont fontWithName:@"Avenir" size:12];
 [@"Hello World" drawAtPoint:CGPointMake(0, 0) withAttributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName: [UIColor blackColor]}];

Android

Paint paint = new Paint();
 Typeface font = Typeface.create("Avenir", Typeface.NORMAL);
 paint.setColor(Color.BLACK);
 paint.setStyle(Paint.Style.FILL);
 paint.setTextSize(12);
 paint.setTypeface(font);
 paint.setAntiAlias(true);
 canvas.drawText("Hello World", 0, 0, paint);

So lets look at this a little more closely.

In iOS. we're actually calling a method off of the NSString. That method takes 2 parameters.

1. The location where to draw the text.

2. A dictionary that describes how to draw the text.

In the dictionary, we're setting the text color and the font. Its important to note that this call still needs to be done with an active CGContext. You just don't need to reference it, as it will find the context itself.

In Android, it basically works the same as drawing anything else. We first create a paint object. And set the color and font and text size, then call draw off the canvas.

The drawText method takes the the string, the point to draw the text at, and the paint.

And thats it!

Hope this was helpful.

By Stephen Zaharuk (SteveZ)