TabelView Cells are shaking when giving corner radius?

Question

My requirement is to display circular images in table view cells. For that purpose in cell for row i gave corner radius for outlet of my imageview now image is displaying in circular format but when scrolling cells are shaking if i stop the corner radius code working fine can any one tell me the issue?

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

    NSString *cellIdentifier =@"notification";

    NotifiucationTableViewCell *cell =[tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (cell == nil) {
        cell = [[NotifiucationTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
    }

    ZSAnnotation *objArray = [personDetails objectAtIndex:indexPath.row];
    [cell.profilePic sd_setImageWithURL:[NSURL URLWithString:objArray.personImage]
                       placeholderImage:[UIImage imageNamed:@"profile-pic-big.png"]];

    cell.personDescription.text = objArray.personDescription;
    cell.personTitle.text = objArray.personTitle;
    myString =  [[NSNumber numberWithFloat:objArray.rating] stringValue];
    km = [NSString stringWithFormat:@"%@%@", myString, @" KM"];

    cell.personNearbyDistance.text = km;
    [cell.callButton addTarget:self action:@selector(callButtonAction:) forControlEvents:UIControlEventTouchUpInside];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    cell.backgroundColor = [UIColor whiteColor];
    cell.profilePic.layer.cornerRadius = 30;

    return cell;
}

Answer 1

try to put the cell UI settings in the cell class's "awakeFromNib" method, like:

- (void)awakeFromNib{
    self.imageView.layer.cornerRadius = 30;
}

because UITableViewCell is always reused, if you try to update cell's UI in "cellForRowAtIndexPath" method, the code is executed every time before a cell is displayed, but if you put the code in "awakeFromNib", the code may only executed a few times when the tableView is loading and won't execute again when you scroll up and down, and cells appears smoothly.

Answer 2

I think you can give the corner radius inside the cell itself. The reason why the cells are flickering is because the tableView tries to deque the cell when the table view is scrolled inside cellForItemAtIndexPath method which causes the cell to flicker.

you can do like this in awake from nib

-(void) awakwFromNib  
{
  self.yourImageView.cornerRadius = 30;
  self.yourImageView.layer.maskToBounds = YES;
}

Answer 3

Try replacing

cell.profilePic.layer.cornerRadius = 30;

with

if (cell.profilePic.layer.cornerRadius != 30){
    cell.profilePic.layer.cornerRadius = 30;
    cell.profilePic.clipsToBounds = YES;
}

that way, the radius will be applied only once when creating the cell.