How to make UI with round image and round text, al

2楼-- · 2019-09-22 09:56

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 ...

0人赞添加讨论(0) 举报

男人必须洒脱

3楼-- · 2019-09-22 09:57

Well,i didnt got your question completely..,if u want ur image view to be a proper circle,then use layer property.

Add QuartzCore framework to your project

#import <QuartzCore/QuartzCore.h>

then,in viewDidLoad ,add the following code.

myImageView.layer.cornerRadius = (myImageView.bounds.size.height/2);
myImageView.layer.masksToBounds = YES;

The rest is upto you,use your logic to do the remaining.

EDIT https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CALayer_class/index.html go through these.

0人赞添加讨论(0) 举报

乱世女痞

4楼-- · 2019-09-22 10:10

You can take a look on WWDC2014 videos: "What's new in interface builder." They are creating class similar to what you need. https://developer.apple.com/videos/wwdc/2014/

0人赞添加讨论(0) 举报

How to make UI with round image and round text, al

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间