Here, Using this post, I am going to describe the basics for creating an interface which looks like Circular Menu. You can have the sample code & modify according to your requirement. Without saying to much I will describe about it.

Here is the snap-shot of expected output.

Circular Menu iPhone

1) Create UserInterface of your viewController’s XIB as follows.


 

2) Place all this images into a 280×280 View. Align this view center horizontally & vertically.

3) Declare & connect object as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@interface RotationDemoViewController : UIViewController
@property (nonatomic, strong) IBOutlet UIView *aView;
@property (nonatomic, strong) IBOutlet UIImageView *imgV1;
@property (nonatomic, strong) IBOutlet UIImageView *imgV2;
@property (nonatomic, strong) IBOutlet UIImageView *imgV3;
@property (nonatomic, strong) IBOutlet UIImageView *imgV4;
@property (nonatomic, strong) IBOutlet UIImageView *imgV5;
@property (nonatomic, strong) IBOutlet UIImageView *imgV6;
@property (nonatomic, strong) IBOutlet UIImageView *imgV7;
- (void) rotateTo:(CGFloat)x andY:(CGFloat)y ;
- (void)applyBorder:(UIImageView*)imageView;
- (void)clearBorder:(UIImageView*)imageView;
@end

4) Change the angle of images in viewDidLoad as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- (void)viewDidLoad
{
    [super viewDidLoad];
    [self clearBorder:self.imgV1];
    [self clearBorder:self.imgV2];
    [self clearBorder:self.imgV3];
    [self clearBorder:self.imgV4];
    [self clearBorder:self.imgV5];
    [self clearBorder:self.imgV6];
    [self clearBorder:self.imgV7];
    self.imgV1.transform=CGAffineTransformMakeRotation(radians(-90));
    self.imgV2.transform=CGAffineTransformMakeRotation(radians(-60));
    self.imgV3.transform=CGAffineTransformMakeRotation(radians(-30));
    self.imgV4.transform=CGAffineTransformMakeRotation(radians(0));
    self.imgV5.transform=CGAffineTransformMakeRotation(radians(30));
    self.imgV6.transform=CGAffineTransformMakeRotation(radians(60));
    self.imgV7.transform=CGAffineTransformMakeRotation(radians(90));
    [self applyBorder:self.imgV4];
}

5) Make sure, you have disabled user interaction to all images & 280×280 View.

Now place following functions in your view controller’s file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
- (void)clearBorder:(UIImageView*)imageView
{
    CALayer *l=imageView.layer;
    [l setCornerRadius:15];
    [l setBorderWidth:0];
    [l setBorderColor:[[UIColor clearColor] CGColor]];
}
- (void)applyBorder:(UIImageView*)imageView
{
    CALayer *l=imageView.layer;
    [l setBorderWidth:15];
    [l setCornerRadius:5];
    [l setBorderColor:[[UIColor redColor] CGColor]];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint LasttouchPoint =  [touch locationInView:self.view];
    CGFloat LasttouchX = LasttouchPoint.x;
    CGFloat LasttouchY = LasttouchPoint.y;
    CGPoint centerPoint=self.view.center;
    CGFloat x = LasttouchX - centerPoint.x;
    CGFloat y = LasttouchY - centerPoint.y;
    if ( LasttouchY >= centerPoint.y ) return;
    [self rotateTo:x andY:y];
}
- (void) rotateTo:(CGFloat)x andY:(CGFloat)y {
    CGFloat angle = x/y;
    angle = atan(angle);
    angle = angle * 180/M_PI;
    [self clearBorder:self.imgV1];
    [self clearBorder:self.imgV2];
    [self clearBorder:self.imgV3];
    [self clearBorder:self.imgV4];
    [self clearBorder:self.imgV5];
    [self clearBorder:self.imgV6];
    [self clearBorder:self.imgV7];
    if(angle>=60 && angle<90) {
        // image 7
        [self applyBorder:self.imgV7];
    } else if ( angle>=30 && angle <60 ) {
        // image 6
        [self applyBorder:self.imgV6];
    } else if ( angle>=0 && angle <30 ) {
        // image 5
        [self applyBorder:self.imgV5];
    } else if ( angle>=-30 && angle <0 ) {
        // image 4
        [self applyBorder:self.imgV4];
    } else if ( angle>=-60 && angle <-30 ) {
        // image 3
        [self applyBorder:self.imgV3];
    } else if ( angle>=-85 && angle <-60 ) {
        // image 2
        [self applyBorder:self.imgV2];
    } else if (angle>=-90 && angle<-85){
        // image 1
        [self applyBorder:self.imgV1];
    }
    angle = 0.0174532925 * angle;
    self.aView.transform=CGAffineTransformMakeRotation(-angle);
}

6) Run the project. You will get following output.

Circular Menu iPhone Output

7) Grab the sample code from here. I have developed this sample code in XCode4.2 SDK5.

Thanks & Regards,
Sagar Kothari.

Advertisements