Input Letter in rectangle drawing ios

Question

I'm drawing three rectangles in order to show the loading, however I want to input Alphabets in those rectangles, how can I put letters in that.

My Function:

- (void)configUI {
    self.backgroundColor = [UIColor clearColor];

    UIView *rect1 = [self drawRectAtPosition:CGPointMake(0, 0)];
    UIView *rect2 = [self drawRectAtPosition:CGPointMake(20, 0)];
    UIView *rect3 = [self drawRectAtPosition:CGPointMake(40, 0)];

    [self addSubview:rect1];
    [self addSubview:rect2];
    [self addSubview:rect3];

    [self doAnimateCycleWithRects:@[rect1, rect2, rect3]];
}

I want to insert the letter "A" in rect1, "B" in rect2 and "C" in rect3.

Answer 1

Use UILabel instead of UIView. Set the label text. (Note that a UILabel has a background color just like a UIView.)

Answer 2

To draw a string on view, you need to create a subclass of UIView. Import this view in your view controller and create above views as object of custom view.

In custom view there is a view override method -

- (void)drawRect:(CGRect)rect;

This is the place where you can draw string and set attributes for drawing.

For example: Custom view class

CustomView.h

#import <UIKit/UIKit.h>

@interface CustomView : UIView

@property (nonatomic, strong) NSString  *drawString;

@end

CustomView.m

#import "CustomView.h"

@implementation CustomView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
    }
    return self;
}

- (void)drawRect:(CGRect)rect {

    NSMutableParagraphStyle *textStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
    textStyle.lineBreakMode = NSLineBreakByClipping;
    textStyle.alignment = NSTextAlignmentCenter;

    NSDictionary *attributes = @{
                                    NSParagraphStyleAttributeName: textStyle,
                                    // Text font
                                    NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue" size:20.0],
                                    // Text color
                                    NSForegroundColorAttributeName : [UIColor orangeColor]
                                };

    [self.drawString drawInRect:rect withAttributes:attributes];
}

@end

Now in your code create view object type of this custom class:

- (void)configUI {
    self.backgroundColor = [UIColor clearColor];

    CustomView *rect1 = [self drawRectAtPosition:CGPointMake(0, 0)];
    CustomView *rect2 = [self drawRectAtPosition:CGPointMake(20, 0)];
    CustomView *rect3 = [self drawRectAtPosition:CGPointMake(40, 0)];

    // This will draw text to view
    [rect1 setDrawString:@"A"];
    [rect2 setDrawString:@"B"];
    [rect3 setDrawString:@"C"];

    [rect1 setBackgroundColor:[UIColor whiteColor]];
    [rect2 setBackgroundColor:[UIColor whiteColor]];
    [rect3 setBackgroundColor:[UIColor whiteColor]];

    [self addSubview:rect1];
    [self addSubview:rect2];
    [self addSubview:rect3];

    [self doAnimateCycleWithRects:@[rect1, rect2, rect3]];
}