Pregunta Dibujar círculos llenos con letras en iOS 7


La nueva aplicación del teléfono ios 7 tiene una sección de favoritos. En esa sección, los nombres del contacto aparecen junto a un círculo relleno con el inicio del contacto dentro del círculo.

¿Cómo se dibuja esto? ¿Con drawrect o ya existe un objeto creado para esto?


5
2017-10-29 06:59


origen


Respuestas:


A continuación hay un UIView subclase que hará lo que quieras. Tamaño y posición correcta de 1 o más letras en el círculo. Así es como se ve con 1-3 letras en varios tamaños (32, 64, 128, 256):

Screenshot

Con la disponibilidad de atributos de tiempo de ejecución definidos por el usuario en Interface Builder, incluso puede configurar la vista desde IB. Solo configura el text propiedad como un atributo de tiempo de ejecución y el backgroundColor al color que quieres para el círculo.

User Defined Runtime Attributes

Aquí está el código:

@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

9
2018-05-12 16:32