Monday, October 21, 2013

How to display circled options in Objective C?

If in your iOS project if you have an ordered list with options and if you want to display the options in a circled style some thing like this  
programmatically rather than using a circular image, then here is a simple way to achieve this by two different approach.

Approach 1:  By using a Unicode character for each option.
Approach 2:  By drawing a circle shape layer from UIBezierPath class

Approach 1:  By using a Unicode character for each option.

Here we need to know the circled X Unicode value, where X = your option value(A,B,C…etc or 1,2,3…)
Here is a link , where we can get a complete reference for all available Unicode characters, 

suppose we want to display circled A, then “u24B6” is the Unicode value for circled A and just assign this as a your label text with a prefix ‘\’(backslash character) as below
optionLabel1.text = @"\u24B6"//circled A
optionLabel2.text = @"\u24B7"; //circled B
optionLabel3.text = @"\u24B8"; //circled C
optionLabel4.text = @"\u24B9"; //circled D

and we are done with approach 1.

Approach 2:  By drawing a circle shape layer from UIBezierPath class.

In this approach we need to draw a circular layer from UIBezierPath object and we need to add this circular layer as a subLayer to your UILabel’s layer.
For this approach you need to add QuartzCore framework in to your XCode Project build phases and import QuartzCore.h to your class file. (#import <QuartzCore/QuartzCore.h>)

// Drawing circlular path from UIBezierPath object
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(352525)];
CAShapeLayer *circleLayer = [[CAShapeLayer alloc]init];
circleLayer.fillColor = [UIColor clearColor].CGColor;
circleLayer.strokeColor = [UIColor whiteColor].CGColor;
circleLayer.path = bezierPath.CGPath;
circleLayer.lineWidth = 2;
// Adding circle shape layer as a subLayer to UILabel's layer
[optionLabel1.layer addSublayer:circleLayer];
optionLabel1.text = @”A”;

and we are done with approach 2.

For more information about UIBezierPath Class reference here is a link for Apple's Documentation

Hope this post was helpful, any comments or suggestions is acceptable.