如何用圆形图像和圆形文本制作 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

iphone

ui-design

ios

ios5

ios7