iOS Vs Android - How To Draw - Part 3 - Drawing

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 3 - Drawing

So now that we've learned all the basics, lets get to the fun part!

In most platforms, drawing boils down to similar commands: Move, Line, Arc, and Curve. There are also some general helper methods, like drawing a Rectangle, but the 4 commands above are the most important.

So the focus on this post, will be looking at those commands and showing how they work in iOS and Android.

One thing to note. in IOS we draw directly into the CGContext. But in Android we must first create a Path object, and call our commands off of that.

Move

This command basically moves the point to where the next command should start.

iOS

CGContextMoveToPoint(ctx, x, y);

Android

path.moveTo(x ,y);

Line

This draws from the previous point to the next specified point. So if our first command was a move to, this command would draw the line between the Move Point to the Line Point.

iOS

CGContextAddLineToPoint(ctx, x, y);

Android

path.lineTo(x, y);

Arc

The perfect method for drawing circle or pie slices. Not in iOS this is radians, and in Android its degrees

iOS

CGContextAddArc(canvas, x, y, radius, startRadians, endRadians, 0);

Android

path.addArc(new Rect(x, y, x + radius*2, 100), startDegrees, endDegrees);

Curve

The most complicated of all the commands. It's made up of control points and an end point. I won't go into too much detail here other than showing the command, but you can check out another article where i told you how to use this command to do some more advanced things.

iOS

CGContextAddCurveToPoint(ctx, cp1X, cp1Y, cp2X, cp2Y, x, y);

Android

path.cubicTo(cp1X, cp1Y, cp2X, cp2Y, x, y);

Now that we've built our shape, we need to draw them. To do a full example of that, i'll show some code that shows how to draw a circle with a stroke and a fill so that you can see all of the code come into play together.

iOS

-(void)drawRect:(CGRect)rect
{
   CGContextRef ctx = UIGraphicsGetCurrentContext();
   CGContextSetFillColorWithColor(ctx, [UIColor greenColor].CGColor);
   CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
   CGContextSetLineWidth(ctx, 2);
   CGContextSetAllowsAntialiasing(ctx, YES);
   CGContextAddArc(ctx, 0, 0, 50, 0, 2*M_PI, 0);
   CGContextClosePath(ctx);
   CGContextDrawPath(ctx, kCGPathFillStroke);
}

Android

@Override
public void draw(Canvas canvas) 
{
   super.draw(canvas);
   Paint fill = new Paint();
   fill.setColor(Color.GREEN);
   fill.setAntiAlias(true);
   fill.setStyle(Paint.Style.FILL);
   Paint stroke = new Paint();
   stroke.setStrokeWidth(2);
   stroke.setColor(Color.BLACK);
   stroke.setAntiAlias(true);
   stroke.setStyle(Paint.Style.SROKE);
   Path path = new Path();
   path.addArc(new RectF(0, 0, 100, 100), 0, 360);
   path.close(); 
  canvas.drawPath(path, fill);
  canvas.drawPath(path, stroke);
}

And thats a quick tutorial on drawing. In the final article, i'll talk about drawing text!

By Stephen Zaharuk (SteveZ)