Search code examples
iosobjective-cuitableviewuiimageviewuiimage

Attempting a circular image, outputs a diamond shape?


I have a weird issue coming up. I am parsing data and pulling out a URL for an image, then setting it to a cell's 'imageView'. From what I can understand, I should set the size of the 'cornerRadius' to half the image's height. Because I am pulling the data into a table view cell with a height of 100, I am setting the corner radius to 50.

Yet when the view load's on the first initial load of the images, they are coming out as small diamonds. When I rotate the device (which rotates the table view too), it automatically brings back the full size image, with the roundness too.

Here's an example image of the initial load,

enter image description here

Does anybody know why this occurs?

Here is my tableView code

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    NSDictionary *generatedUsers = [self.randomlyGeneratedUsersArray objectAtIndex:indexPath.row];
    NSURL *url = [NSURL URLWithString:[generatedUsers valueForKeyPath:@"user.picture"]];
    cell.textLabel.text = [NSString stringWithFormat:@"%@ %@", [generatedUsers valueForKeyPath:@"user.name.first"], [generatedUsers valueForKeyPath:@"user.name.last"]];
    cell.detailTextLabel.text = [generatedUsers valueForKeyPath:@"user.location.street"];
    [cell.imageView setImageWithURL:url placeholderImage:[UIImage imageNamed:@"placeholder"]];

    cell.imageView.layer.cornerRadius = 50.0f;
    cell.imageView.layer.masksToBounds = YES;

    return cell;
}

Solution

  • Are you sure something like Auto-Layout isn't changing your imageView height at runtime? try setting the corner radius like this:

    cell.imageView.layer.corderRadius = (cell.imageView.bounds.size.height /2);
    //And to try figure out what's going on...
    NSLog(@"Cell imageview height: %f",cell.imageView.bounds.size.height);