Vẽ vòng kết nối có chữ cái trong iOS 7

Question

Ứng dụng điện thoại ios 7 mới có phần yêu thích. Trong phần đó, tên của liên hệ xuất hiện bên cạnh vòng tròn được lấp đầy với phần đầu của liên hệ bên trong vòng tròn.

Điều này được rút ra như thế nào? Với drawrect hoặc đã có và đối tượng tạo ra cho điều này?

Answer 1

Dưới đây là UIView phân lớp sẽ thực hiện những gì bạn muốn. Nó sẽ chính xác kích thước và vị trí 1 hoặc nhiều chữ cái trong vòng tròn. Đây là cách nó trông giống với 1-3 chữ với kích thước khác nhau (32, 64, 128, 256):

Với sự sẵn có của người sử dụng định nghĩa các thuộc tính thời gian chạy trong giao diện Builder, thậm chí bạn có thể cấu hình nhìn từ trong IB. Chỉ cần đặt thuộc tính text làm thuộc tính thời gian chạy và backgroundColor thành màu bạn muốn cho vòng kết nối.

Dưới đây là các mã:

@interface MELetterCircleView : UIView 

/** 
* The text to display in the view. This should be limited to 
* just a few characters. 
*/ 
@property (nonatomic, strong) NSString *text; 

@end 



@interface MELetterCircleView() 

@property (nonatomic, strong) UIColor *circleColor; 

@end 

@implementation MELetterCircleView 

- (instancetype)initWithFrame:(CGRect)frame text:(NSString *)text 
{ 
    NSParameterAssert(text); 
    self = [super initWithFrame:frame]; 
    if (self) 
    { 
     self.text = text; 
    } 

    return self; 
} 

// Override to set the circle's background color. 
// The view's background will always be clear. 
-(void)setBackgroundColor:(UIColor *)backgroundColor 
{ 
    self.circleColor = backgroundColor; 
    [super setBackgroundColor:[UIColor clearColor]]; 
} 


- (void)drawRect:(CGRect)rect 
{ 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    [self.circleColor setFill]; 
    CGContextAddArc(context, CGRectGetMidX(rect), CGRectGetMidY(rect), 
          CGRectGetWidth(rect)/2, 0, 2*M_PI, YES); 
    CGContextFillPath(context); 

    [self drawSubtractedText:self.text inRect:rect inContext:context]; 

} 

- (void)drawSubtractedText:(NSString *)text inRect:(CGRect)rect 
       inContext:(CGContextRef)context 
{ 
    CGContextSaveGState(context); 

    // Magic blend mode 
    CGContextSetBlendMode(context, kCGBlendModeDestinationOut); 


    CGFloat pointSize = 
      [self optimumFontSizeForFont:[UIFont boldSystemFontOfSize:100.f] 
           inRect:rect 
           withText:text]; 

    UIFont *font = [UIFont boldSystemFontOfSize:pointSize]; 

    // Move drawing start point for centering label. 
    CGContextTranslateCTM(context, 0, 
          (CGRectGetMidY(rect) - (font.lineHeight/2))); 

    CGRect frame = CGRectMake(0, 0, CGRectGetWidth(rect), font.lineHeight)]; 
    UILabel *label = [[UILabel alloc] initWithFrame:frame]; 
    label.font = font; 
    label.text = text; 
    label.textAlignment = NSTextAlignmentCenter; 
    label.backgroundColor = [UIColor clearColor]; 
    [label.layer drawInContext:context]; 

    // Restore the state of other drawing operations 
    CGContextRestoreGState(context); 
} 

-(CGFloat)optimumFontSizeForFont:(UIFont *)font inRect:(CGRect)rect 
         withText:(NSString *)text 
{ 
    // For current font point size, calculate points per pixel 
    CGFloat pointsPerPixel = font.lineHeight/font.pointSize; 

    // Scale up point size for the height of the label. 
    // This represents the optimum size of a single letter. 
    CGFloat desiredPointSize = rect.size.height * pointsPerPixel; 

    if ([text length] == 1) 
    { 
      // In the case of a single letter, we need to scale back a bit 
      // to take into account the circle curve. 
      // We could calculate the inner square of the circle, 
      // but this is a good approximation. 
     desiredPointSize = .80*desiredPointSize; 
    } 
    else 
    { 
     // More than a single letter. Let's make room for more. 
     desiredPointSize = desiredPointSize/[text length]; 
    } 

    return desiredPointSize; 
} 
@end