Custom accessory-button is not visible clearly on tableview cell using autolayouts

Question

I am creating custom accessory-image on a UItableview cell. When I run the app these accessory-images are clipped (see second screen shot). When I scroll the table view the accessory-image are no longer clipped (see first screen shot).

Code:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor darkGrayColor];
    MaintableView = [[UITableView alloc]init];
    MaintableView.translatesAutoresizingMaskIntoConstraints = NO;
    MaintableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
    MaintableView.dataSource=self;
    MaintableView.delegate=self;
    MaintableView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    [MaintableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"];
    [myview addSubview:MaintableView];

    NSDictionary * views = NSDictionaryOfVariableBindings(MaintableView);

    NSArray * horizentalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[MaintableView]-5-|" options:0 metrics:nil views:views];

    NSArray * verticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[MaintableView]-50-|"options:0 metrics:nil views:views];

    [myview addConstraints:horizentalConstraint];
    [myview addConstraints:verticalConstraint];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

    return Mainarray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return 1;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 50;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{

    UIView *sectionHeaderView = [[UIView alloc]init];
    sectionHeaderView.backgroundColor = [UIColor clearColor];
    return sectionHeaderView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 5.0f;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [MaintableView cellForRowAtIndexPath:indexPath].textLabel.textColor = [UIColor whiteColor];

    [delegate processCompleted:indexPath];
}

- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [MaintableView cellForRowAtIndexPath:indexPath].textLabel.textColor = [UIColor blackColor];
}

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

    UITableViewCell *Cell = [MaintableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    if (Cell == nil)
    {
        Cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    UIView *bgview = [[UIView alloc] init];
    bgview.backgroundColor = [bg colorWithHexString:@"27AE60"];
    Cell.selectedBackgroundView = bgview;

    accessoryView =  accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"0.jpg"]];
    accessoryView.backgroundColor = [UIColor clearColor];
    accessoryView.translatesAutoresizingMaskIntoConstraints = NO;
    [Cell.contentView addSubview:accessoryView];

    NSDictionary * views = NSDictionaryOfVariableBindings(accessoryView);

    NSLayoutConstraint * constraint = [NSLayoutConstraint constraintWithItem:accessoryView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:Cell.contentView attribute:NSLayoutAttributeTop multiplier:1.0f constant:10.f];
    [Cell.contentView addConstraint:constraint];

    constraint = [NSLayoutConstraint constraintWithItem:accessoryView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem: nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:30.0f];
    [Cell.contentView addConstraint:constraint];

    constraint = [NSLayoutConstraint constraintWithItem:accessoryView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem: nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:30.0f];
    [Cell.contentView addConstraint:constraint];

    NSArray * horizentalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[accessoryView]-10-|" options:0 metrics:nil views:views];

    [Cell.contentView addConstraints:horizentalConstraint];


    Cell.textLabel.text = [Mainarray objectAtIndex:indexPath.section];
    Cell.textLabel.textColor = [UIColor blackColor];

    UIFont *CiutadellaBold = [UIFont fontWithName:@"Bitter-Regular" size:17.0f];
    [Cell.textLabel setFont:CiutadellaBold];

    Cell.textLabel.numberOfLines = 2;
    Cell.backgroundColor = [bg colorWithHexString:@"EAECEE"];

    [Cell.layer setCornerRadius:7.0f];
    [Cell.layer setMasksToBounds:YES];

    return Cell;
}

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
        [cell setSeparatorInset:UIEdgeInsetsZero];
    }
    if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
        [cell setPreservesSuperviewLayoutMargins:NO];
    }
    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
}

---

After scrolling : the table view accessory-image is clearly appearing like this:

Before scrolling : not appearing clearly:

Answer 1

You are running into a conflict between Cell.textLabel and accessoryView . Either you should use the UITableViewCell own accessoryView , or you should create both labels and images.

Here is a solution that does not require all these constraints. I tested it using your code ; it works:

Cell.accessoryView = ({
    UIImage * image = [ViewController imageWithImage:[UIImage imageNamed:@"0.jpg"] scaledToSize:CGSizeMake(30, 30)];
    UIView * icon = [[UIImageView alloc] initWithImage:image];
    icon.backgroundColor = [UIColor clearColor];
    icon;
});

Alternatively, follow the advice in my comments and create your custom UITableViewCell in your Storyboard. You will then be able to control the textLabel and the accessoryView overlap.