如何用圆形图像和圆形文本制作 UI，并在同一个圆圈上添加老鼠图标。在 iOS 个申请中

Question

如何制作UI圆形图片和圆形文字，同时在同一个圆圈上添加鼠尾草图标。在 iOS 申请中

Answer 1

好吧，我没有完全理解你的问题..，如果你想要你的图像视图是一个合适的圆，那么使用图层属性。

将 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 完成这些。

Answer 2

大家可以看看WWDC2014视频："What's new in interface builder." 他们正在创造 class 类似于您需要的东西。 https://developer.apple.com/videos/wwdc/2014/

Answer 3

在您的视图中导入 roundImageView.h class class 并在您的 UIButton 上设置背景图片。请更改按钮类型 Custom.

完成这些步骤后尝试此代码。

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

注意：- 在这里你可以看到我们只设置了图像而不是背景图像..

创建一个 class 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

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

如何用圆形图像和圆形文本制作 UI，并在同一个圆圈上添加老鼠图标。在 iOS 个申请中

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

ios

iphone

ios7

ios5

ui-design