Joined UIBezierPath stroke as a whole

Question

Being a beginner in iOS drawing I wanted to draw a small tooltip container which consists of a rectangle with an indicator arrow. I created 2 UIBezierPaths and joined them with "appendPath". I thought this was the right way to go about this, but after struggling for 1 day, I had to ask for help. Here's the screenshot of where I am right now:

As you can see the problem is simply that when I try to stroke the joined path, it doesn't gets stroked as a whole, but as separate pieces. Maybe someone could point me in the right direction to solve this ?

Here's the code:

    // Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // create indicator path
    UIBezierPath *indicator = [[UIBezierPath alloc] init];
    // corner radius
    CGFloat radius = self.cornerRadius;
    // main path
    UIBezierPath *path;
    // format frame
    rect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height - self.indicatorSize.height);
    // assign path
    path = [UIBezierPath bezierPathWithRoundedRect: rect
                                 byRoundingCorners:UIRectCornerAllCorners
                                       cornerRadii:CGSizeMake(radius, radius)];
    // x point
    CGFloat x = (rect.size.width - self.indicatorSize.width) / 2;

    [indicator moveToPoint:CGPointMake(x, rect.size.height)];
    [indicator addLineToPoint:CGPointMake(x + self.indicatorSize.width / 2, rect.size.height + self.indicatorSize.height)];
    [indicator addLineToPoint:CGPointMake(x + self.indicatorSize.width, rect.size.height)];
    // close path
    [indicator closePath];
    // append indicator to main path
    [path appendPath:indicator];

    [[UIColor redColor] setStroke];
    [path setLineWidth:2.0];
    [path stroke];
    [self.fillColor setFill];
    [path fill];
    // release indicator
    [indicator release];
}

Thanks in advance

Answer 1

You need to draw it all as one path, because at the moment you're telling it you want to draw a whole rectangle, and then a triangle, and that's what it's doing.

From the Apple UIBezierPath documentation:

[appendPath:] adds the commands used to create the path in bezierPath to the end of the receiver’s path. This method does not explicitly try to connect the subpaths in the two objects, although the operations in bezierPath might still cause that effect.

So first it will draw your rectangle, and then it will draw your triangle without attempting to join them