SDWebImage fixed width cell images

- (void)layoutSubviews {  
    [super layoutSubviews];  
    self.imageView.frame = CGRectMake(5,5,40,32.5);  
    float limgW =  self.imageView.image.size.width;  
    if(limgW > 0) {  
        self.textLabel.frame = CGRectMake(55,self.textLabel.frame.origin.y,self.textLabel.frame.size.width,self.textLabel.frame.size.height);  
        self.detailTextLabel.frame = CGRectMake(55,self.detailTextLabel.frame.origin.y,self.detailTextLabel.frame.size.width,self.detailTextLabel.frame.size.height);  
    }  
}  

SDWebImage fixed width cell images

by Bill on NOVEMBER 20, 2011 inIPHONE

While looking for a easy solution to load uitableview images remotely, I came across a great library calledSDWebImage. It’s very simple to use and provides a lot of flexibility for loading and caching images in your iOS project.

As I started to use it, I ran into a issue when loading inconsistant thumbnail image sizes from the web. Ideally, you would have a fixed width on all the images you load into your UITableViewCell, but in my case, I had no control over the width of the remote images so it produced strange results. What I would like to happen is have all images (regardless of size) be uniform or fixed width in my uitableview. To achieve this, we’ll need to subclass our uitableviewcell and customize thelayoutSubviews function in order to set a fixed width.

I’m going to assume you already have a project setup with the SDWebImage files and a UITableView added with a datasource + delegate in place.

1. First thing you’ll need to do is subclass UITableViewCell by creating a new “Objective-c” class by going to File->New->New File. You can call it whatever you’d like, I’m going to call mine “MyCustomCell”.

2. Open your custom cell’s implementation “MyCustomCell.m” and add the following method:

view plaincopy to clipboardprint? 

The code is pretty easy to understand but I think the second part deserves a quick explanation. We first check if there is a image and if we find one, shift the text labels over to the correct location which in our example is 15 pixels to the right of our image. You can change the values of CGRectMake() to specify your own image dimensions.

3. Jump over to your UITableView implementation and change your cellForRowAtIndexPath method to use your custom cell. Example follows:

view plaincopy to clipboardprint?

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath  
{  
    static NSString *CellIdentifier = @"Cell";  
      
    MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];  
    if (cell == nil) {  
        cell = [[MyCustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];  
    }  
      
    // Configure the cell...  
    [cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]  
                   placeholderImage:[UIImage imageNamed:@"placeholder.png"]];  
    return cell;  
}