SDWebImage fixed width cell images

While looking for a easy solution to load uitableview images remotely, I came across a great library called SDWebImage. 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 the layoutSubviews 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:

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:

Resources:
UITableViewCell Class Reference
SDWebImage

, , , ,

  • Chrysalist

    Hi Bill, it’s not working. 

  • Hdkhiem

    I used that, but the cell could not show the detailTextLabel for some reason

  • http://twitter.com/lostincode Bill Richards

    Hello, try changing UITableViewCellStyleDefault to UITableViewCellStyleSubtitle

  • http://twitter.com/lostincode Bill Richards

    Hi, what’s not working? Your image sizes are off?

  • Barrie

    HI Bill i have the same problem -> layoutSubviews is never called on my custom cell class

  • Barrie

    Hi Bill, i figured it out – basically I had configured a prototype cell in IB, I had to change the class of this to my custom cell class.

    All working now, thanks!

  • Tuyen Nguyen

    Hello Bill, does this library support iOS 3.x?

  • http://twitter.com/DurrantLuke Luke Durrant

    Thanks!

  • John

    It works great,but i still have a problem that when the image had been download,i want it to display an animation of fading in out. 
    How to do that?

  • Scott Faisal

    Thank You so much for this. I wasted so much time on Stack OverFlow to find a solution with my issue. I am not using SDWebImage as I am using AFNetworking. Are there any advantages to using SDWebImage? Thanks

  • http://www.facebook.com/sankaet Sankaet Pathak
  • taylornrolyat

    This is not working for me. The layoutsubviews doesn’t appear to even be called. Am I missing something here?

    Thanks for the help.

  • Topeson

    Thanks Barrie! and Thank you Bill Richards. Much appreciated. Namaste

  • Zlatka Staykova

    Hi, very useful post, but do you have some solution on autolayout and constraint imageviews in a tableview cell. I can’t get those pictures at the proper position… Thank you in advance!

Powered by WordPress. Designed by Woo Themes