如何制作带有圆形图像和圆形文本的 UI，以及在同一个圆圈上添加评级图标。在 iOS 应用程序中

Posted 2023-03-16

【中文标题】如何制作带有圆形图像和圆形文本的 UI，以及在同一个圆圈上添加评级图标。在 iOS 应用程序中

【英文标题】：How to make UI with round image and round text, also add ratting icon on same circle. in iOS application

【发布时间】：2015-04-09 07:41:26

【问题描述】：

如何制作圆形图片和圆形文字的 UI，同时在同一个圆圈上添加鼠标图标。在 ios 应用中

【参考方案1】：

在视图类中导入 roundImageView.h 类并在 UIButton 上设置背景图像。请更改按钮类型自定义。

按照这些步骤尝试此代码后。

    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];

注意：- 在此您可以看到我们只设置图像而不是背景图像..

创建一个类 roundImageView UIImage 类型并粘贴此代码

在roundImageView.h文件代码

#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;

将代码粘贴到 roundImageView.m 文件中

#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

试试这段代码，它工作正常...

【参考方案2】：

好吧，我没有完全得到你的问题..，如果你希望你的图像视图是一个正确的圆圈，那么使用图层属性。

将 QuartzCore 框架添加到您的项目中

#import <QuartzCore/QuartzCore.h> 

然后，在 viewDidLoad 中，添加以下代码。

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

剩下的由你决定，用你的逻辑来做剩下的。

编辑 https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CALayer_class/index.html通过这些。

【讨论】：

好的，但是标签文本和评级图标的主要问题我该如何管理这个

【参考方案3】：

您可以观看 WWDC2014 视频：“界面生成器的新功能”。 他们正在创建类似于您需要的课程。 https://developer.apple.com/videos/wwdc/2014/