Rounded Corners with an arrow on a UIView with the iPhone SDK 3.0

This article is a follow-up to a previous article Rounded Corners on a UIView with the iPhone SDK 3.0.

In the previous post I included the code to create a UIView with rounded corners the easy way using the iPhone SDK 3.0. However the next challenge came when I wanted to also add an arrow to the edge of the rounded box.

In order to add the arrow I would be manually creating the path to draw the new type of box. I added a variables:

  • (CGFloat) pointY to specify where on the left hand edge the point starts.
  • (CGFloat) pointWidth to specify the width of the point.
  • (CGFloat) pointHeight for the height.
  • (UIColor) rectColor to set the color of the new rectangle (I actually copy the value of self.backgroundColor and set the background color to [UIColor clearColor]

I added these variables so they can be set on the view but I will leave these for you to implement however you like.

Once you have created the variables pointY, pointWidth, pointHeight and rectColor you can then use the following code.

- (void)drawRect:(CGRect)rect {
  // Drawing code

  CGContextRef context = UIGraphicsGetCurrentContext();
  CGFloat radius = self.layer.cornerRadius;

  // Make sure corner radius isn't larger than half the shorter side
  if (radius > self.bounds.size.width/2.0) radius = self.bounds.size.width/2.0;
  if (radius > self.bounds.size.height/2.0) radius = self.bounds.size.height/2.0;

  CGFloat minx = CGRectGetMinX(self.bounds) + self.pointWidth;
  CGFloat midx = CGRectGetMidX(self.bounds);
  CGFloat maxx = CGRectGetMaxX(self.bounds);
  CGFloat miny = CGRectGetMinY(self.bounds);
  CGFloat midy = CGRectGetMidY(self.bounds);
  CGFloat maxy = CGRectGetMaxY(self.bounds);

  /*
  CGContextMoveToPoint(context, minx, midy);
  CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
  CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
  CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
  CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
  */

  CGContextMoveToPoint(context, minx, miny + pointY);
  CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
  CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
  CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
  CGContextAddArcToPoint(context, minx, maxy, minx, miny + pointY + pointHeight, radius);
  CGContextAddLineToPoint (context, minx, miny + pointY + pointHeight);
  CGContextAddLineToPoint (context, minx - pointWidth, miny + pointY + (pointHeight / 2));

  CGContextClosePath(context);

  [self.rectColor setFill];
  CGContextDrawPath(context, kCGPathFill);
}
Advertisements

About Steve Smith
Software developer (often ruby, rails but I enjoy loads of languages), semantic tech. fanboy, skydiver, all round geek. Owner of dynamic:edge (hire us) the makers of CloudMailin.com

One Response to Rounded Corners with an arrow on a UIView with the iPhone SDK 3.0

  1. Lucent says:

    Hi could you advise what I need to do to draw a downward arrow instead?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: