Finally I did it!!
From my one-day experience, I come to know that there is three ways to handle this situation.
Simply creating needed images as png files and just use UIImageView to show. (But remember, you should have a same image with different resolutions. This will increase your app size).
Second way of doing is, Showing the bubbles (or maybe a rectangle) by creating labels, text fields, etc.. with a arrow image. You may simply transform the image to change the pointing place of the arrow. (As, Ilker Baltaci said in the previous answer).
Third way is, by Core Graphics. You can draw whatever you want here. As of my knowledge, increasing the app's size or increasing the memory consume by initializing/allocating/retaining labels & text fields, we can try this by Core Graphics.
I've three views where I want to implement this help screen facility. For just three screen, I can use any of the three method, because, there is no much difference related to performance if we use it for little-needed situaions. But I tried with the third way, because, I really don't knew anything about Core Graphics. So its just for learning..
Problems that I faced:
The arrow should point the center of the button(or maybe top of the button). So finding this exact location is complex. I have used this feature only in 3 pages in my app. Each page contains maximum of 4 icons to describe. So I just hard coded the values (My another luck is, the app does not support landscape mode). But, if you want to use this feature for so many pages, you should define some arrays and a method that finds the center of icons by calculating its center with reference to, their origin, height & width, blah, blah..
The another problem is, you should ensure that the bubbles are not overlapping anywhere. Here also, we need a global method that finds the location for each bubble. The size of the bubble depends on, the text size that is going to be placed inside it. This is more complex problem and for just 3 screens, I'm not going to define a global method with hundreds of calculations. So I again just hard coded the origin point, height & width of each bubble with reference to the self.view
Last but not least.. The Arrow!! The height of arrow may vary with the bubble's place. The width of the bubble also may vary with height. Also, you should know the side & points of the bubble from which the arrow goes to the button. If you already fixed the places of the bubbles in your mind, these are not at all a problem for you.. :P
Now let's come the coding part,
- (void) createRect:(CGRect)rect xPoint:(float)x yPoint:(float)y ofHeight:(float)height ofWidth:(float)width toPointX:(float)toX toPointY:(float)toY withString:(NSString *)helpString inDirection:(NSString *)direction
{
float distance = 5.0;
float widthOfLine = 5.0;
float arrowLength = 15.0;
//Get current context
CGContextRef context = UIGraphicsGetCurrentContext();
//Set width of border & colors of bubble
CGContextSetLineWidth(context, widthOfLine);
CGContextSetStrokeColorWithColor(context, [[UIColor darkGrayColor] CGColor]);
CGContextSetFillColorWithColor(context, [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.9] CGColor]);
CGContextBeginPath(context);
CGContextMoveToPoint(context, x, y);
CGContextAddLineToPoint(context, x+width, y);
CGContextAddQuadCurveToPoint(context, x+width, y, x+width+distance, y+distance);
CGContextAddLineToPoint(context, x+width+distance, y+distance+height);
CGContextAddQuadCurveToPoint(context, x+width+distance, y+distance+height, x+width, y+distance+height+distance);
CGContextAddLineToPoint(context, x, y+distance+height+distance);
CGContextAddQuadCurveToPoint(context, x, y+distance+height+distance, x-distance, y+distance+height);
CGContextAddLineToPoint(context, x-distance, y+distance);
CGContextAddQuadCurveToPoint(context, x-distance, y+distance, x, y);
CGContextDrawPath(context, kCGPathFillStroke);
//Draw curvely arrow from bubble to button (but without arrow mark)
CGContextBeginPath(context);
CGContextSetLineWidth(context, 5.0);
CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGPoint startPoint = CGPointMake(x+(width/2.0), y+distance+distance+height);
CGPoint endPoint = CGPointMake(toX, toY);
CGContextMoveToPoint(context, startPoint.x, startPoint.y+5.0);
if ([direction isEqualToString:@"left"])
{
CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX-10, toY);
}
else
{
CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX+10, toY);
}
CGContextStrokePath(context);
//Draw the arrow mark
CGContextBeginPath(context);
CGContextSetLineWidth(context, 5.0);
CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
if ([direction isEqualToString:@"left"])
{
CGContextMoveToPoint(context, toX-10.0, toY-arrowLength);
CGContextAddLineToPoint(context, toX-10.0, toY);
CGContextAddLineToPoint(context, toX-10.0+arrowLength, toY);
}
else
{
CGContextMoveToPoint(context, toX+10.0, toY-arrowLength);
CGContextAddLineToPoint(context, toX+10.0, toY);
CGContextAddLineToPoint(context, toX+10.0-arrowLength, toY);
}
CGContextStrokePath(context);
.......
.......
}
You can call this method from the drawRect: method like this..
[self createRect:rect xPoint:30.0 yPoint:250.0 ofHeight:100.0 ofWidth:100.0 toPointX:48.0 toPointY:430.0 withString:@"xxxxxxx" inDirection:@"left"];
[self createRect:rect xPoint:160.0 yPoint:100.0 ofHeight:100.0 ofWidth:100.0 toPointX:260.0 toPointY:420.0 withString:@"yyyyyyy" inDirection:@"right"];
And the final image will be like this..
I skipped triangle shape arrow, because this arrow type gives a handwriting effect.
Thanks to @djromero and Ilker Baltaci for your valuable answers.
My next confusion is about Drawing Texts!!!!! :P
