Draw triangle as subview to right corner of table cell

Question

I would like to draw a triangle using CGRect instead of UIImageView and add it as subview to the right corner of some particular table cells similar to how it's done on the WWDC app.

Any advice is welcomed. :)

Answer 1

An easy way can be to have different UIImageView's containing a colored-triangle, then selecting the different image to display according to certain values/preference that you setup. Taken from here:Drawing a triangle in UIView

You will need to do some math to calculate the correct points, but this is the general way of drawing a triangle. You can just create your own subclass of UIView (call it CornerTriangle) and then add it to the cell while settings its color to match your needs.

-(void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextBeginPath(ctx);
    CGContextMoveToPoint   (ctx, CGRectGetMinX(rect), CGRectGetMinY(rect));  // top left
    CGContextAddLineToPoint(ctx, CGRectGetMaxX(rect), CGRectGetMidY(rect));  // mid right
    CGContextAddLineToPoint(ctx, CGRectGetMinX(rect), CGRectGetMaxY(rect));  // bottom left
    CGContextClosePath(ctx);

    CGContextSetRGBFillColor(ctx, 1, 1, 0, 1);
    CGContextFillPath(ctx);
}

Answer 2

Add the following method to your UiTableviewCell Class . This is the right effect you are looking for :

-(void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextBeginPath(ctx);
    CGContextMoveToPoint   (ctx, CGRectGetMaxX(rect), CGRectGetMidY(rect));  
    CGContextAddLineToPoint(ctx, CGRectGetMaxX(rect), CGRectGetMinY(rect));  
    CGContextAddLineToPoint(ctx, CGRectGetMaxX(rect)-25, CGRectGetMinY(rect));  
    CGContextClosePath(ctx);

    CGContextSetRGBFillColor(ctx, 1, 1, 0, 1);
    CGContextFillPath(ctx);
}