CODEWITHSUNDEEP
iosobjective-cuitableviewuiimageviewuiimage
Greg Barbosa
Greg Barbosa

Reputation: 347

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;
}

Upvotes: 3

Views: 1505

Answers (4)

Bug
Bug

Reputation: 2562

In the place of this 2 line of code 

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

Put this to line of code 

[cell.imageView.layer setCornerRadius:cell.imageView.frame.size.width/2];
 [cell.imageView setClipsToBounds:YES];

Upvotes: 1

Vaisakh
Vaisakh

Reputation: 2927

try this.

cell.imageView.layer.masksToBounds = YES;

cell.imageView.layer.cornerRadius = cell.imageView.frame.size.height/2;

Upvotes: 0

Dermot
Dermot

Reputation: 1743

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);

Upvotes: 6

hukir
hukir

Reputation: 1743

You need to set the corner radius to be half the height of the image, not the table cell.

Upvotes: 0

Related Questions