UIButton and TextLabel overlapping in UITableViewCell

Question

I have seen and checked multiple questions regarding adding an UIButton to a UITableViewCell but somehow I did not manage to find the exact problem that I am facing. When adding an UIButton to an UITableViewCell, the cell's text label overlaps with the button. The button is in the beginning of the row and it should be followed by the text label. I am most probably doing something wrong, but I can not find what. Here is my code for cellForRowAtIndex:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{  

    UITableViewCell *cell=[self._tableView dequeueReusableCellWithIdentifier:@"event"];
    Event* event =[self eventForIndexPath:indexPath];

    if(cell==nil)
        cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"event"];


    [[cell textLabel] setText:event.customer.name];

    if(event.startTime!=nil)
              [[cell detailTextLabel] setText:event.startTime];

    cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator;

    UIButton *cellButton =(UIButton*) [cell.contentView viewWithTag:CELL_BUTTON_TAG];
    if(cellButton == nil){

        UIButton *cellButton = [UIButton buttonWithType:UIButtonTypeCustom];
        cellButton.tag=CELL_BUTTON_TAG;
        [cellButton setFrame:CGRectMake(0.0f, 0.0f, 44.0f, cell.frame.size.height)];
        [cellButton setImage:[UIImage imageNamed:@"van_green.png"] forState:UIControlStateNormal];
        [cellButton setImage:[UIImage imageNamed:@"location.png"]forState:UIControlStateSelected];
        [cellButton addTarget:self action:@selector(carButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
        cellButton.layer.borderWidth = 0.0;
        [cell.contentView addSubview:cellButton];

    }




    return cell;

}

Answer 1

Sorry but your code is completely wrong..you are using an incorrect way and also you are adding a button each time.

The tableViewCell are REUSED so you have to add buttons and other UI elements just when you INIT the cell and not each time, or your app will finish in memory warning, crash, not fluid etc.

The correct way to do what you want to do is create your CustomTableViewCell subclassing the class UITableViewCell and add your labels and buttons. It is really simple:

1) Create a new file CustomSearchCell object that extends UITableViewCell:

CustomSearchCell.h

#import <UIKit/UIKit.h>

@interface CustomSearchCell : UITableViewCell

@property (strong, nonatomic) UIButton *button;
@property (strong, nonatomic) UILabel *lblDetails;

@end

CustomSearchCell.m

#import "CustomSearchCell.h"

@implementation CustomSearchCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
        _lblDetails = [[UILabel alloc] initWithFrame:CGRectMake(100, 10, 200, 45)];
        [_lblDetails setFont:[UIFont systemFontOfSize:20.0]];
        [_lblDetails setTextColor:[UIColor blackColor]];

        _button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 44, self.frame.size.height)];

        [self.contentView addSubview: _lblDetails];
        [self.contentView addSubview: _button];
    }
    return self;
}

@end

2) In your view controller:

#import "CustomSearchCell.h"

and:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    static NSString *CellIdentifier = @"ListCellIdentifier";
    CustomSearchCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (!cell) {
        cell = [[CustomSearchCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    //Settings

    return cell;
}

Another your problem is when you press the button. You will receive the sender but the tableViewCell will can be used for a different indexPath when you intercept the touch..be careful..the correct way is another..you need to save in some way the actual indexPath when you press the button...

Answer 2

Problem is in this line [cell.contentView addSubview:cellButton];. When your cell going to be reuse, the cell already contains cell button, and you try to add that button again. Just do the below step to resolve this issue.

1) Add button tag to take from base view.

UIButton *cellButton = [UIButton buttonWithType:UIButtonTypeCustom];
cellButton.tag = CELLBUTTONTAG;

2) Check condition view tag and add it to base view as below.

UIButton *cellButton = [cell.contentView viewWithTag:CELLBUTTONTAG];
if(cellButton == nil)
{
  UIButton *cellButton = [UIButton buttonWithType:UIButtonTypeCustom];
  cellButton.tag = CELLBUTTONTAG;
  ...
  [cell.contentView addSubview:cellButton];
}

Answer 3

You have given cellbutton's y position as 0.0f.That's y overlapping. try to change some value as you need.

[cellButton setFrame:CGRectMake(0.0f, 0.0f, 44.0f, cell.frame.size.height)];

to

[cellButton setFrame:CGRectMake(0.0f, some big value, 44.0f, cell.frame.size.height)];