Custom UITableViewCell with Image and Label

Question

I have some TableView using a basic or subtitle UITableViewCell and displaying an image/icon. The separator line is automatically indented and starts where the labels are displayed. So far so good. (see correct behavior)

Now I need a couple more labels and an image. Therefore, I created a custom TableViewCell with 4 labels. Without the image they work as expected. But when I add an image to the existing standard ImageView, the image is displayed, the separator line is indented but the custom labels are not. They overlay the image. (see wrong behavior)

Do I have to create a custom ImageView as well to get it working correctly and how is the separator line indented on that way or is there another possibility / state of the art to do something like that?

You can set Autoresizing constraints like : http://stackoverflow.com/questions/34669208/how-to-resize-custom-uitableviewcell-nib-file-to-fit-tableview/34670166#34670166 — Jigar Tarsariya, May 27 '16 at 09:06
How you have added the labels and image view ?? in code itself or in .xib file ?? — Aneesh, May 27 '16 at 09:06

score 0 · Answer 1 · answered May 27 '16 at 10:36

1. First off create an outlet of all the four custom elements like label and image view as :- lblOne, lblTwo, lblThree, imageView, respectively.

2. Then go to view Viewdidload and create a dictionary :-

NSDictionary *viewsDictionary = @{@" @"superview":self.view,
                                      @"lblOne":self.lblOne,
                                      @"lblTwo":self.lblTwo,
                                      @"lblThree":self.lblThree,
                                      @"imageView":self.imageView
                                      };

3. Now add the Autolayout constraint programmatically :-

 NSArray *lblOutletCenterConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[superView]-(<=1)-[lblOne]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:viewsDictionary];

    [self.view addConstraints:lblOutletCenterConstraint];

NSArray *lblOutletCenterConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[superView]-(<=1)-[lblTwo]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:viewsDictionary];

    [self.view addConstraints:lblOutletCenterConstraint];

NSArray *captionTopConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[lblOne]-25-[imageView]" options:0 metrics:nil views:viewsDictionary];

    [self.view addConstraints:captionTopConstraint];

NSArray *captionTopConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[lblTwo]-25-[lblThree]" options:0 metrics:nil views:viewsDictionary];

    [self.view addConstraints:captionTopConstraint];

4. Or you can do that by storyboard also.

score 0 · Accepted Answer · answered Jun 07 '16 at 06:38

I finally ended with the solution that I created an empty Interface Builder document, added a TableViewCell, put the Label and ImageView on it, set the constraints, connected everything to the corresponding *.swift file. Finish. I hoped to reuse the ImageView from the default TableViewCell but obviously that did not work correctly (or I was too stupid).

Custom UITableViewCell with Image and Label

2 Answers2