如何使用圆形图像和圆形文本制作UI，在同一圆上添加鼠标图标。 在iOS应用程序中
如何使用圆形图像和圆形文本制作UI，在同一圆上添加鼠标图标。 在iOS应用程序中
在你的视图类中导入roundImageView.h类，并在你的UIButton上设置背景图片。 请更改buttontypes自定义 。
以下这些步骤后尝试此代码。
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]; 注意： – 在这个你可以看到我们只设置图像不背景图像..
创build一个类roundImageView UIImagetypes并粘贴这段代码
在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: %fx %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: %fx %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: %fx %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
试试这个代码其工作正常…
那么，我没有完全得到你的问题..，如果你想你的图像视图是一个适当的圆形，然后使用图层属性。
将QuartzCore框架添加到您的项目中
#import <QuartzCore/QuartzCore.h>
然后，在viewDidLoad中添加下面的代码。
myImageView.layer.cornerRadius = (myImageView.bounds.size.height/2); myImageView.layer.masksToBounds = YES;
其余的由你决定，用你的逻辑去做剩下的事情。
您可以查看WWDC2014video：“界面生成器中有什么新function”。 他们正在创造类似你需要的类。 https://developer.apple.com/videos/wwdc/2014/