iphone - How to make UI with round image and round text, also add ratting icon on same circle. in iOS application

Question

How to make UI with round image and round text, also add ratting icon on same circle. in iOS application

Answer 1

Import roundImageView.h class in your view class and set background image on your UIButton. Please change button type Custom.

After Following these steps try this code .

    CGRect frame = CGRectMake(0, 0, 200, 200);
roundImageView *roudImage = [[roundImageView alloc]init];

   UIImage *image1 = [roudImage createMenuRingWithFrame:frame :@"Your Title" labelBgColor:[UIColor colorWithRed:(191/255.f) green:(251/255.f) blue:(158/255.f) alpha:1] ringBgColor:[UIColor colorWithRed:(214/255.f) green:(214/255.f) blue:(214/255.f) alpha:1] levelUnlockShow:1 buttonObj:yourButtonObj];
  [yourButtonObj setImage:image1 forState:UIControlStateNormal];

Note :- In this you can see we set only Image not background image ..

Create a class roundImageView UIImage Type and paste this code

in roundImageView.h file code

#import <UIKit/UIKit.h>

@interface roundImageView : UIImage
- (UIImage*) createMenuRingWithFrame:(CGRect)frame : (NSString*) sectionTitle labelBgColor : (UIColor*)labelBgColor ringBgColor : (UIColor *)ringBgColor levelUnlockShow: (NSInteger) levelUnloackNm  buttonObj : (UIButton *)buttonObj;

Paste code in roundImageView.m file

#import "roundImageView.h"

@implementation roundImageView
#define DegreesToRadians(x) (M_PI * x / 180.0)

- (void) drawStringAtContext:(CGContextRef) context string:(NSString*) text atAngle:(float) angle withRadius:(float) radius
{
CGSize textSize = [text sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Helvetica" size:18]}];

float perimeter = 2 * M_PI * radius;
float textAngle = textSize.width / perimeter * 2 * M_PI;

angle += textAngle / 2;

for (int index = 0; index < [text length]; index++)
{
    NSRange range = {index, 1};
    NSString* letter = [text substringWithRange:range];
    char* c = (char*)[letter cStringUsingEncoding:NSASCIIStringEncoding];
    CGSize charSize = [letter sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Helvetica" size:18]}];

    NSLog(@"Char %@ with size: %f x %f", letter, charSize.width, charSize.height);

    float x = radius * cos(angle);
    float y = radius * sin(angle);

    float letterAngle = (charSize.width / perimeter * -2 * M_PI);

    CGContextSaveGState(context);
    CGContextTranslateCTM(context, x, y);
    CGContextRotateCTM(context, (angle - 0.5 * M_PI));
    CGContextShowTextAtPoint(context, 0, 0, c, strlen(c));

    CGContextRestoreGState(context);

    angle += letterAngle;
}

}


- (void)drawRect:(CGRect)rect contextData:(CGContextRef) context {

CGContextSetLineWidth(context, 30);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextBeginPath(context);
CGContextMoveToPoint(context, 0, 50);
CGContextAddCurveToPoint(context, 0, 180, 0, 0, -80, 0);
CGContextStrokePath(context);
}

 - (UIImage*) createMenuRingWithFrame:(CGRect)frame : (NSString*) sectionTitle labelBgColor : (UIColor*)labelBgColor ringBgColor : (UIColor *)ringBgColor levelUnlockShow: (NSInteger) levelUnloackNm  buttonObj : (UIButton *)buttonObj
{

CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
UIBezierPath *circularPath=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, buttonObj.frame.size.width, buttonObj.frame.size.height) cornerRadius:MAX(buttonObj.frame.size.width, buttonObj.frame.size.height)];

circle.path = circularPath.CGPath;

// Configure the apperence of the circle
circle.fillColor = [UIColor blackColor].CGColor;
circle.strokeColor = [UIColor blackColor].CGColor;
circle.lineWidth = 0;

buttonObj.layer.mask = circle;
CGPoint centerPoint = CGPointMake(frame.size.width / 2, frame.size.height / 2);
char* fontName = (char*)[[UIFont fontWithName:@"Helvetica" size:18].fontName cStringUsingEncoding:NSASCIIStringEncoding];

const CGFloat* ringColorComponents = CGColorGetComponents([ringBgColor CGColor]);
//    const CGFloat* textBGColorComponents = CGColorGetComponents([[UIColor colorWithRed:80/255.0 green:160/255.0 blue:15/255.0 alpha:1] CGColor]) ;
const CGFloat* textColorComponents =  CGColorGetComponents([[UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:1] CGColor]);


CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();


CGContextRef context = CGBitmapContextCreate(NULL, frame.size.width, frame.size.height, 8, 4 * frame.size.width, colorSpace, kCGImageAlphaPremultipliedFirst);

CGContextSetTextMatrix(context, CGAffineTransformIdentity);

CGContextSelectFont(context, fontName, 18, kCGEncodingMacRoman);

CGContextSetRGBStrokeColor(context, ringColorComponents[0], ringColorComponents[1], ringColorComponents[2], 1.0);
CGContextSetLineWidth(context, 25);


CGContextStrokeEllipseInRect(context, CGRectMake(10, 10, frame.size.width - (10 * 2), frame.size.height - (10 * 2)));

CGContextSetRGBFillColor(context, textColorComponents[0], textColorComponents[1], textColorComponents[2], 1.0);



CGContextSaveGState(context);
CGContextTranslateCTM(context, centerPoint.x, centerPoint.y);

//    float angleStep = 2 * M_PI ;
float angle = DegreesToRadians(135);

float textRadius = 95;

textRadius = textRadius - 12;

// [self drawImageAtContext:context string:text atAngle:angle withRadius:textRadius];
[self drawLblBackGroundAtContext:context string:sectionTitle atAngle:angle withRadius:textRadius withLabelBackgroudColor:labelBgColor  ];
//angle -= angleStep;


CGContextSetRGBStrokeColor(context, ringColorComponents[0], ringColorComponents[1], ringColorComponents[2], 1.0);
CGContextSetLineWidth(context, 25);


[self drawStringAtContext:context string:sectionTitle atAngle:angle withRadius:textRadius];
//angle -= angleStep;

angle = DegreesToRadians(315);
// [self drawImageAtContext:context string:text atAngle:angle withRadius:textRadius];
[self drawImageAtContext:context atAngle:angle withRadius:textRadius levelUnlock:  levelUnloackNm];
//angle -= angleStep;

CGContextRestoreGState(context);

CGImageRef contextImage = CGBitmapContextCreateImage(context);


CGContextRelease(context);
CGColorSpaceRelease(colorSpace);

//[self saveImage:[UIImage imageWithCGImage:contextImage] withName:@"test.png"];
return [UIImage imageWithCGImage:contextImage];

}
- (void) drawImageAtContext:(CGContextRef) context atAngle:(float) angle withRadius:(float) radius levelUnlock:(NSInteger )levelUnlock
{
CGSize textSize =  [@"MMMMMM" sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Helvetica" size:18]}];
float perimeter = 2 * M_PI * radius;
float textAngle = (textSize.width+1) / perimeter * 2 * M_PI;

angle += textAngle / 2;

//    UIImageView *image = [[UIImageView alloc]initWithFrame:CGRectMake(angle, 0, 20, 20)];
if (levelUnlock != 0) {
    for (int index = 0; index < 6; index++)
    {
        NSRange range = {index, 1};
        NSString* letter = [@"MMMMMM" substringWithRange:range];
        CGSize charSize = [letter sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Helvetica" size:18]}];

        NSLog(@"Char %@ with size: %f x %f", letter, charSize.width, charSize.height);

        float x = radius * cos(angle);
        float y = radius * sin(angle);

        float letterAngle = ((charSize.width+1) / perimeter * -2 * M_PI);


        CGContextSaveGState(context);
        CGContextTranslateCTM(context, x, y);
        CGContextRotateCTM(context, (angle - 0.5 * M_PI));
        // CGContextShowTextAtPoint(context, 0, 0, c, strlen(c));
        const CGFloat* ringColorComponents;
        NSInteger raiting = 6 - levelUnlock ;
        if (index + 1 > raiting) {
            ringColorComponents = CGColorGetComponents([[UIColor colorWithRed:0/255.0 green:170/255.0 blue:216/255.0 alpha:1] CGColor]);
        }else{
            ringColorComponents =  CGColorGetComponents([[UIColor colorWithRed:150/255.0 green:150/255.0 blue:150/255.0 alpha:1] CGColor]);
        }

        CGContextSetRGBStrokeColor(context, ringColorComponents[0], ringColorComponents[1], ringColorComponents[2], 1.0);
        CGContextSetRGBFillColor(context, ringColorComponents[0], ringColorComponents[1], ringColorComponents[2], 1.0);
        CGContextSetLineWidth(context, 8);

      //Line Changed for border 
        CGContextStrokeEllipseInRect(context, CGRectMake(2, 1, 8, 8));

        CGContextRestoreGState(context);

        angle += letterAngle;
    }
 }


 }
- (void) drawLblBackGroundAtContext:(CGContextRef) context string:(NSString*) text atAngle:(float) angle withRadius:(float) radius  withLabelBackgroudColor: (UIColor *)labelBgColor
{
// text = [NSString stringWithFormat:@"%@sdsad",text];
CGSize textSize =  [text sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Helvetica" size:20]}];//[text sizeWithFont:[UIFont fontWithName:@"Helvetica" size:20]];

float perimeter = 2 * M_PI * radius;
float textAngle = textSize.width / perimeter * 2 * M_PI;

angle += textAngle / 2;

for (int index = 0; index < [text length]; index++)
{
    NSRange range = {index, 1};
    NSString* letter = [text substringWithRange:range];
    //        char* c = (char*)[letter cStringUsingEncoding:NSASCIIStringEncoding];
    CGSize charSize = [letter sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Helvetica" size:18]}];

    NSLog(@"Char %@ with size: %f x %f", letter, charSize.width, charSize.height);

    float x = radius * cos(angle);
    float y = radius * sin(angle);

    float letterAngle = ((charSize.width+1) / perimeter * -2 * M_PI);


    CGContextSaveGState(context);
    CGContextTranslateCTM(context, x, y);
    CGContextRotateCTM(context, (angle - 0.5 * M_PI));

    const CGFloat* ringColorComponents = CGColorGetComponents([ labelBgColor CGColor]);

    CGContextSetRGBStrokeColor(context, ringColorComponents[0], ringColorComponents[1], ringColorComponents[2], 1.0);
    CGContextSetRGBFillColor(context, ringColorComponents[0], ringColorComponents[1], ringColorComponents[2], 1.0);

    if (index + 1 == [text length]){
        CGContextSetLineWidth(context, 15);
        CGContextStrokeRect(context, CGRectMake(0, 2, 15, 15));
    }else{
        CGContextSetLineWidth(context, 15);
        CGContextStrokeRect(context, CGRectMake(0, 2, 15, 15));
    }

    CGContextRestoreGState(context);
    if (index +1 == [text length]) {
        angle += letterAngle  ;
    }else{
        angle += letterAngle;
    }

}

}


@end

Try this code its working fine ...