iOS - Create custom UILabel and add them to UIView

Question

I want to achieve something like this inside a UIView:

I have created a custom UILabel with a custom init method:

@implementation TagLabel
- (id)init {
    self = [super initWithFrame:CGRectMake(0, 0, 100, 40)];
    if (self) {
        self.layer.borderColor = [UIColor whiteColor].CGColor;
        self.layer.borderWidth = 4.0;
        self.layer.cornerRadius = 4;
        self.backgroundColor = [UIColor greenColor];
        self.textColor = [UIColor whiteColor];
        self.textAlignment = UITextAlignmentCenter;
    }
    return self;
}
@end

And I create and add each label to the view like so:

for (NSDictionary *tag in [self.voicenote objectForKey:@"Tag"]) {
        TagLabel *tagLabel = [[TagLabel alloc] init];
        tagLabel.text = [tag objectForKey:@"tag"];
        [self.tagsView addSubview:tagLabel];
    }

Yet all I get is a blank UIView, am I missing something? Would there be a better way to achieve this?

EDIT: one problem solved, modified the UILabel code to set the background color directly to the background, and now they show, now how can I make them be one beside the other and not overlapped?

Answer 1

In your for loop, you need to make custom frames for your labels and arrange them the way you want. something like this maybe:

CGRect frame = label.frame;
frame.size.height = masterFrame.height;
frame.origin.y = masterFrame.origin.y + masterFrame.size.height + 40;
label.frame = frame;

This is a longer way to do it. You could also just initialize the frame with [CGRect initWithFrame ...]

Answer 2

They are all added to the same position of the parent view