CODEWITHSUNDEEP
iosobjective-cuitableviewautolayoutcustom-cell
Nuibb
Nuibb

Reputation: 1860

iPhone Custom cell with consecutive UILabels

I am trying to implement a custom cell (see below images) with 4 consecutive UILabels. Between two consecutive label a 1 px gap will be included and the 4 labels must fill the cell horizontally. I can't find any way to implement this (unique design) in storyboard. So i did it programatically. But by doing programmatically, if i orient my device, my table view cell look like below image(02) where 4 labels does not fill the whole cell horizontally. I tried with autoResizingMask, but that does not work. How can i implement auto layout feature for this custom cell programmatically ? Or is there any better idea to do it in storyboard with auto layout feature ?

In my custom cell implementation file i tried like below code - 

- (void)awakeFromNib {
    // Initialization code
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    float screenWidth = (screenBounds.size.width - 4.0f)/4;

    CGRect label1Container = CGRectMake(0, 2, screenWidth, 50);
    UILabel *label1 = [[UILabel alloc] initWithFrame:label1Container];
    label1.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
    label1.textAlignment = NSTextAlignmentCenter;
    label1.numberOfLines = 0;
    label1.text = @"Lotery\nSerial";
    label1.font = [UIFont boldSystemFontOfSize:17];
    [self.contentView addSubview:label1];

    CGRect label2Container = CGRectMake(screenWidth + 1, 2, screenWidth, 50);
    UILabel *label2 = [[UILabel alloc] initWithFrame:label2Container];
    label2.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
    label2.textAlignment = NSTextAlignmentCenter;
    label2.numberOfLines = 0;
    label2.text = @"Bank\nCode";
    label2.font = [UIFont boldSystemFontOfSize:17];
    [self.contentView addSubview:label2];

    CGRect label3Container = CGRectMake(screenWidth * 2 + 2, 2, screenWidth, 50);
    UILabel *label3 = [[UILabel alloc] initWithFrame:label3Container];
    label3.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
    label3.textAlignment = NSTextAlignmentCenter;
    label3.numberOfLines = 0;
    label3.text = @"Branch\nCode";
    label3.font = [UIFont boldSystemFontOfSize:17];
    [self.contentView addSubview:label3];

    CGRect label4Container = CGRectMake(screenWidth*3+3, 2, screenWidth+1, 50);
    UILabel *label4 = [[UILabel alloc] initWithFrame:label4Container];
    label4.backgroundColor = [UIColor colorWithRed: 107.0f/255.0f green:199.0f/255.0f blue:190.0f/255.0f alpha:1.0];
    label4.textAlignment = NSTextAlignmentCenter;
    label4.numberOfLines = 0;
    label4.text = @"Bank\nSerial";
    label4.font = [UIFont boldSystemFontOfSize:17];
    [self.contentView addSubview:label4];


    //[self.label1 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight)];
    //[self.label2 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
    //[self.label3 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
    //[self.label2 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight)];
}

01.

enter image description here

02.

enter image description here

Upvotes: 1

Views: 88

Answers (3)

Abhi
Abhi

Reputation: 603

You can do it in storyboard more easily. yo just have to give these four views 'equal width' 'equal height' constraints and also appropriate trailing and leading constraints. For providing 'equal width' 'equal height' select all views in storyboard then go to editor -> pin -> widths equally / heights equally. Hope it helps.

Upvotes: 1

Gürhan KODALAK
Gürhan KODALAK

Reputation: 580

Also you can use UITableView. Set your custom views to top and then below views add a tableview, create custom UITableViewCell and init every cell with your object.You can customize cells how you want. This way is safer than autolayout I think.

Upvotes: 0

hris.to
hris.to

Reputation: 6363

Use storyboard. Set all labels to had same width and connect them -label1-label2-label3-label4-. Also connect them to top & bottom.

Upvotes: 2

Related Questions