Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

iOS vs Android - How to Draw: Drawing

DZone's Guide to

iOS vs Android - How to Draw: Drawing

Part three of this series look at the drawing commands on Android and iOS.

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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 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, let's 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 that's a quick tutorial on drawing. In the final article, I'll talk about drawing text!

Written by Stephen Zaharuk at Infragistics

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
ios ,android

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}