具有大图像和标签的自定义表格视图单元格

Question

I am trying to populate a Tableview with data from an array. I am trying to make a custom table view cell that includes a big square image, same width as the screen and the height should also be the same size as the screen's width. And under the image I want to add a text label. (You can think of it as a very bad copy of instagram)

However, the tableview only shows empty standard cells.

This is my custom cell code:

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self)
    {                
        customImageView.contentMode = UIViewContentModeScaleAspectFit;

        CGRect frame;
        frame.origin.x=0;
        frame.origin.y=0;
        frame.size.width=self.frame.size.width;
        frame.size.height=self.frame.size.width;

        customImageView.frame=frame;

        [customTextLabel sizeToFit];

        frame.origin = CGPointMake(0, (self.frame.size.width+1));
        customTextLabel.frame = frame;

        customTextLabel.numberOfLines = 0;
        customTextLabel.lineBreakMode = NSLineBreakByCharWrapping;

        [self.contentView addSubview:customImageView];
        [self.contentView addSubview:customTextLabel];

        [self.contentView sizeToFit]; } return self;}

and the code from the tableview:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *MyCellIdentifier = @"MyCellIdentifier";

//UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:MyCellIdentifier];

FeedTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:MyCellIdentifier];


if(cell == nil) {
    cell = [[FeedTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:MyCellIdentifier];
}


if(!emptyTable){

     Log *log = [self.feedPosts objectAtIndex:indexPath.section];

    cell.customImageView.image = [self loadImage:(int)log.logID];

    cell.customTextLabel.text = log.logDescription;


}
return cell;}

Answer 1

Better solution is to use constraints

1. create constraints like on image below

2. Create outlets for your height width ( control drag your constraint to cell class)

3. Change it to screen size/ height on your

cell

 override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! TableViewCell
    cell.heightConstraint.constant = UIScreen .mainScreen().bounds.height;
    cell.widthConstraint.constant = UIScreen.mainScreen().bounds.width;
    return cell
} 

Don't forget to set height for row

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return UIScreen .mainScreen().bounds.height;
}

Also, you can recreate it on your code programmatically, if you want

Hope this helps

Answer 2

Where are you allocate memory for the cell.customImageView and cell.customTextLabel? This problem should be caused by not generating customeImageView and customeTextLabel. you should according to the following code to modify:

//Setter/Getter 
//allocate memory and init customImageView/customTextLable

- (UIImageView *)customeImageView{ 
    if(!_ customImageView)_customImageView = [UIImageView new];

   return _customImageView;

}

- (UILable *)customTextLabel{
   if(!_customTextLable) _customTextLabel = [UIlable new];

    return _cusomTextLable;
}

Then invoke them when initWithStyle:reuseIdentifier: .The other thing should be noticed is that tableView should custome cell's height by implement tableView:heightForRowAtIndexPath:

Answer 3

I almost did what DarkHorse said.

I forgot to do:

customImageView = [[UIImageView alloc] init];

customTextLabel = [[UILabel alloc] init];

and then set the height in

tableView:heightForRowAtIndexPath