आईओएस 7

Question

में अक्षरों के साथ भरी हुई सर्कल ड्रॉइंग नया आईओएस 7 फोन ऐप एक पसंदीदा अनुभाग है। उस खंड में संपर्क के नाम सर्कल के अंदर संपर्क के आंतरिक के साथ एक भरे सर्कल के बगल में दिखाई देते हैं।

यह कैसे खींचा जाता है? सही के साथ या इसके लिए पहले से ही बनाई गई वस्तु है?

Answer 1

नीचे UIView सबक्लास है जो आप चाहते हैं जो करेंगे। यह सही ढंग से आकार और सर्कल में 1 या अधिक अक्षरों को स्थिति देगा। यह इस प्रकार से विभिन्न आकारों में 1-3 पत्र (32, 64, 128, 256) के साथ दिखाई देता है:

उपयोगकर्ता परिभाषित क्रम की उपलब्धता के साथ

इंटरफ़ेस बिल्डर में जिम्मेदार बताते हैं, आप भी से दृश्य कॉन्फ़िगर कर सकते आईबी के भीतर बस text प्रॉपर्टी को रनटाइम विशेषता के रूप में सेट करें और backgroundColor उस मंडल के लिए इच्छित रंग पर सेट करें।

@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