How do I make UITableViewCell s ImageView a fixed size even when the image is smaller

Question

I have a bunch of images I am using for cell s image views  they are all no bigger than 50x50    e g   40x50  50x32  20x37        When I load the table view  the text doesn t line up because the width of the images varies   Also I would like small images to appear in the centre as opposed to on the left   Here is the code I am trying inside my  cellForRowAtIndexPath  method  cell imageView autoresizingMask     UIViewAutoresizingNone    cell imageView autoresizesSubviews   NO  cell imageView contentMode   UIViewContentModeCenter  cell imageView bounds   CGRectMake 0  0  50  50   cell imageView frame   CGRectMake 0  0  50  50   cell imageView image    UIImage imageWithData  imageData     As you can see I have tried a few things  but none of them work

User · Answer

The solution we ended up with is similar to many of the others  But to get the correct position of the separator we had to set it before calling super layoutSubviews    Simplified example   class ImageTableViewCell  UITableViewCell        override func layoutSubviews             separatorInset left   70         super layoutSubviews            imageView  frame   CGRect x  0  y  0  width  50  height  50          textLabel  frame   CGRect x  70  y  0  width  200  height  50

User · Answer

For those of you who don t have a subclass of UITableViewCell   -  UITableViewCell   tableView  UITableView   tableView cellForRowAtIndexPath  NSIndexPath   indexPath                 CGSize itemSize   CGSizeMake 40  40         UIGraphicsBeginImageContextWithOptions itemSize  NO  UIScreen mainScreen scale         CGRect imageRect   CGRectMake 0 0  0 0  itemSize width  itemSize height          cell imageView image drawInRect imageRect         cell imageView image   UIGraphicsGetImageFromCurrentImageContext          UIGraphicsEndImageContext                 return cell      The code above sets the size to be 40x40   Swift 2      let itemSize   CGSizeMake 25  25       UIGraphicsBeginImageContextWithOptions itemSize  false  UIScreen mainScreen   scale       let imageRect   CGRectMake 0 0  0 0  itemSize width  itemSize height       cell imageView  image  drawInRect imageRect      cell imageView  image    UIGraphicsGetImageFromCurrentImageContext        UIGraphicsEndImageContext      Or you can use another not tested  approach suggested by  Tommy   -  UITableViewCell   tableView  UITableView   tableView cellForRowAtIndexPath  NSIndexPath   indexPath                 CGSize itemSize   CGSizeMake 40  40         UIGraphicsBeginImageContextWithOptions itemSize  NO  0 0                        return cell      Swift 3   let itemSize   CGSize init width  25  height  25  UIGraphicsBeginImageContextWithOptions itemSize  false  UIScreen main scale   let imageRect   CGRect init origin  CGPoint zero  size  itemSize  cell  imageView  image  draw in  imageRect  cell  imageView  image    UIGraphicsGetImageFromCurrentImageContext     UIGraphicsEndImageContext      The code above is the Swift 3  version of the above

User · Answer

The whole cell doesn t need to be remade  You could use the indentationLevel and indentationWidth property of tableViewCells to shift the content of your cell  Then you add your custom imageView to the left side of the cell

User · Answer

UIImage  image   cell imageView image   UIGraphicsBeginImageContext CGSizeMake 35 35       draw scaled image into thumbnail context   image drawInRect CGRectMake 5  5  35  35       UIImage  newThumbnail   UIGraphicsGetImageFromCurrentImageContext       pop the context UIGraphicsEndImageContext    if newThumbnail    nil        NSLog   could not scale image        cell imageView image   image    else       cell imageView image   newThumbnail

User · Answer

Here s how i did it  This technique takes care of moving the text and detail text labels appropriately to the left    interface SizableImageCell   UITableViewCell     end  implementation SizableImageCell -  void layoutSubviews        super layoutSubviews        float desiredWidth   80      float w self imageView frame size width      if  w gt desiredWidth            float widthSub   w - desiredWidth          self imageView frame   CGRectMake self imageView frame origin x self imageView frame origin y desiredWidth self imageView frame size height           self textLabel frame   CGRectMake self textLabel frame origin x-widthSub self textLabel frame origin y self textLabel frame size width widthSub self textLabel frame size height           self detailTextLabel frame   CGRectMake self detailTextLabel frame origin x-widthSub self detailTextLabel frame origin y self detailTextLabel frame size width widthSub self detailTextLabel frame size height           self imageView contentMode   UIViewContentModeScaleAspectFit           end       -  UITableViewCell   tableView  UITableView   tableView cellForRowAtIndexPath  NSIndexPath   indexPath       static NSString  CellIdentifier     Cell        UITableViewCell  cell    tableView dequeueReusableCellWithIdentifier CellIdentifier       if  cell    nil            cell      SizableImageCell alloc  initWithStyle UITableViewCellStyleSubtitle reuseIdentifier CellIdentifier  autorelease           cell accessoryType   UITableViewCellAccessoryDisclosureIndicator             cell textLabel text           cell detailTextLabel text           cell imageView image           return cell

User · Answer

Better create an image view and add it as a sub view to the cell Then you can get the desired frame size

User · Answer

The regular UITableViewCell works well to position things but the cell imageView doesn t seem to behave like you want it to   I found that it s simple enough to get the UITableViewCell to lay out properly by first giving the cell imageView a properly sized image like     Putting in a blank image to make sure text always pushed to the side  UIGraphicsBeginImageContextWithOptions CGSizeMake kGroupImageDimension  kGroupImageDimension   NO  0 0   UIImage  blank   UIGraphicsGetImageFromCurrentImageContext    UIGraphicsEndImageContext    cell imageView image   blank    Then you can just connect up your own properly working UIImageView with     The cell imageView increases in size to accomodate the image given it     We don t want this behaviour so we just attached a view on top of cell imageView     This gives us the positioning of the cell imageView without the sizing    behaviour  UIImageView  anImageView   nil  NSArray  subviews    cell imageView subviews   if   subviews count     0        anImageView     UIImageView alloc  init       anImageView translatesAutoresizingMaskIntoConstraints   NO       cell imageView addSubview anImageView        NSLayoutConstraint  aConstraint    NSLayoutConstraint constraintWithItem anImageView attribute NSLayoutAttributeCenterX relatedBy NSLayoutRelationEqual toItem cell imageView attribute NSLayoutAttributeCenterX multiplier 1 0 constant 0 0        cell imageView addConstraint aConstraint        aConstraint    NSLayoutConstraint constraintWithItem anImageView attribute NSLayoutAttributeCenterY relatedBy NSLayoutRelationEqual toItem cell imageView attribute NSLayoutAttributeCenterY multiplier 1 0 constant 0 0        cell imageView addConstraint aConstraint        aConstraint    NSLayoutConstraint constraintWithItem anImageView attribute NSLayoutAttributeWidth relatedBy NSLayoutRelationEqual toItem nil attribute NSLayoutAttributeNotAnAttribute multiplier 0 0 constant kGroupImageDimension        cell imageView addConstraint aConstraint        aConstraint    NSLayoutConstraint constraintWithItem anImageView attribute NSLayoutAttributeHeight relatedBy NSLayoutRelationEqual toItem nil attribute NSLayoutAttributeNotAnAttribute multiplier 0 0 constant kGroupImageDimension        cell imageView addConstraint aConstraint     else       anImageView    subviews firstObject       Set the image on anImageView and it will do what you expect a UIImageView to do   Be the size you want it regardless of the image you give it   This should go in tableView cellForRowAtIndexPath

User · Answer

image view  add  as a sub view to the tableview cell  UIImageView  imgView   UIImageView alloc  initWithFrame CGRectMake 20  5  90  70    imgView backgroundColor  UIColor clearColor    imgView layer setCornerRadius 8 0f    imgView layer setMasksToBounds YES    imgView setImage  UIImage imageWithData  imageData     cell contentView addSubview imgView

User · Answer

This solution essentially draws the image as  aspect fit  within the given rect   CGSize itemSize   CGSizeMake 80  80   UIGraphicsBeginImageContextWithOptions itemSize  NO  UIScreen mainScreen scale   UIImage  image   cell imageView image   CGRect imageRect  if image size height  gt  image size width        CGFloat width   itemSize height   image size width   image size height      imageRect   CGRectMake  itemSize width - width    2  0  width  itemSize height     else       CGFloat height   itemSize width   image size height   image size width      imageRect   CGRectMake 0   itemSize height - height    2  itemSize width  height       cell imageView image drawInRect imageRect   cell imageView image   UIGraphicsGetImageFromCurrentImageContext    UIGraphicsEndImageContext

User · Answer

This worked for me in swift   Create a subclass of UITableViewCell  make sure you link up your cell in the storyboard   class MyTableCell UITableViewCell      override func layoutSubviews             super layoutSubviews            if self imageView  image    nil                let cellFrame   self frame             let textLabelFrame   self textLabel  frame             let detailTextLabelFrame   self detailTextLabel  frame             let imageViewFrame   self imageView  frame              self imageView  contentMode    ScaleAspectFill             self imageView  clipsToBounds   true             self imageView  frame   CGRectMake  imageViewFrame  origin x    imageViewFrame  origin y     1 40 40              self textLabel  frame   CGRectMake 50    imageViewFrame  origin x      textLabelFrame  origin y    cellFrame width- 70    imageViewFrame  origin x     textLabelFrame  height              self detailTextLabel  frame   CGRectMake 50    imageViewFrame  origin x     detailTextLabelFrame  origin y    cellFrame width- 70    imageViewFrame  origin x     detailTextLabelFrame  height                      In    cellForRowAtIndexPath   dequeue the cell as your new cell type       let cell   tableView dequeueReusableCellWithIdentifier  MyCell   forIndexPath  indexPath  as  MyTableCell   Obviously change number values to suit your layout

User · Answer

A Simply Swift   Step 1  Create One SubClass of UITableViewCell Step 2  Add this method to SubClass of UITableViewCell  override func layoutSubviews         super layoutSubviews       self imageView  frame   CGRectMake 0  0  10  10      Step 3  Create cell object using that SubClass in cellForRowAtIndexPath   Ex  let customCell CustomCell   CustomCell style  UITableViewCellStyle Default  reuseIdentifier   Cell     Step 4  Enjoy

User · Answer

I had the same problem  Thank you to everyone else who answered - I was able to get a solution together using parts of several of these answers    My solution is using swift 5  The problem that we are trying to solve is that we may have images with different aspect ratios in our TableViewCells but we want them to render with consistent widths  The images should  of course  render with no distortion and fill the entire space  In my case  I was fine with some  cropping  of tall  skinny images  so I used the content mode  scaleAspectFill  To do this  I created a custom subclass of UITableViewCell  In my case  I named it StoryTableViewCell  The entire class is pasted below  with comments inline    This approach worked for me when also using a custom Accessory View and long text labels  Here s an image of the final result   Rendered Table View with consistent image width  class StoryTableViewCell  UITableViewCell        override func layoutSubviews             super layoutSubviews                    Step 1                 ensure we have an image         guard let imageView   self imageView else  return              create a variable for the desired image width         let desiredWidth CGFloat   70              get the width of the image currently rendered in the cell         let currentImageWidth   imageView frame size width              grab the width of the entire cell s contents  to be used later         let contentWidth   self contentView bounds width                  Step 2                 only update the image s width if the current image width isn t what we want it to be         if  currentImageWidth    desiredWidth                  calculate the difference in width             let widthDifference   currentImageWidth - desiredWidth                       Step 3                     Update the image s frame                 maintaining it s original x and y values  but with a new width             self imageView  frame   CGRect imageView frame origin x                                             imageView frame origin y                                             desiredWidth                                             imageView frame size height                        Step 4                     If there is a texst label  we want to move it s x position to                ensure it isn t overlapping with the image  and that it has proper spacing with the image             if let textLabel   self textLabel                               let originalFrame   self textLabel  frame                     the new X position for the label is just the original position                     minus the difference in the image s width                 let newX   textLabel frame origin x - widthDifference                 self textLabel  frame   CGRect newX                                                 textLabel frame origin y                                                 contentWidth - newX                                                 textLabel frame size height                   print  textLabel info  Original    originalFrame      updated   self textLabel  frame                                       Step 4                     If there is a detail text label  do the same as step 3             if let detailTextLabel   self detailTextLabel                   let originalFrame   self detailTextLabel  frame                 let newX   detailTextLabel frame origin x-widthDifference                 self detailTextLabel  frame   CGRect x  newX                                                       y  detailTextLabel frame origin y                                                       width  contentWidth - newX                                                       height  detailTextLabel frame size height                   print  detailLabel info  Original    originalFrame      updated   self detailTextLabel  frame                                       Step 5                     Set the image s content modoe to scaleAspectFill so it takes up the entire view  but doesn t get distorted             self imageView  contentMode    scaleAspectFill

User · Answer

I ve created an extension using  GermanAttanasio  s answer   It provides a method to resize an image to a desired size  and another method to do the same while adding a transparent margin to the image  this can be useful for table views where you want the image to have a margin as well    import UIKit  extension UIImage            Resizes an image to the specified size                  - Parameters              - size  the size we desire to resize the image to                  - Returns  the resized image              func imageWithSize size  CGSize  - gt  UIImage            UIGraphicsBeginImageContextWithOptions size  false  UIScreen mainScreen   scale           let rect   CGRectMake 0 0  0 0  size width  size height           drawInRect rect           let resultingImage   UIGraphicsGetImageFromCurrentImageContext            UIGraphicsEndImageContext             return resultingImage                Resizes an image to the specified size and adds an extra transparent margin at all sides of         the image                  - Parameters              - size  the size we desire to resize the image to              - extraMargin  the extra transparent margin to add to all sides of the image                  - Returns  the resized image   The extra margin is added to the input image size   So that                 the final image s size will be equal to                   CGSize width  size width   extraMargin   2  height  size height   extraMargin   2               func imageWithSize size  CGSize  extraMargin  CGFloat  - gt  UIImage            let imageSize   CGSize width  size width   extraMargin   2  height  size height   extraMargin   2           UIGraphicsBeginImageContextWithOptions imageSize  false  UIScreen mainScreen   scale           let drawingRect   CGRect x  extraMargin  y  extraMargin  width  size width  height  size height          drawInRect drawingRect           let resultingImage   UIGraphicsGetImageFromCurrentImageContext            UIGraphicsEndImageContext             return resultingImage

User · Answer

If you use cell imageView  translatesAutoresizingMaskIntoConstraints   false you can set constraints on the imageView   Here s a working example I used in a project   I avoided subclassing and didn t need to create storyboard with prototype cells but did take me quite a while to get running  so probably best to only use if there isn t a simpler or more concise way available to you     override func tableView   tableView  UITableView  heightForRowAt indexPath  IndexPath  - gt  CGFloat       return 80          override func tableView   tableView  UITableView  cellForRowAt indexPath  IndexPath  - gt  UITableViewCell       let cell   UITableViewCell style   subtitle  reuseIdentifier  String describing  ChangesRequiringApprovalTableViewController self        let record   records indexPath row       cell textLabel  text    Title text       if let thumb   record  thumbnail   as  CKAsset  let image   UIImage contentsOfFile  thumb fileURL path            cell imageView  contentMode    scaleAspectFill         cell imageView  image   image         cell imageView  translatesAutoresizingMaskIntoConstraints   false         cell imageView  leadingAnchor constraint equalTo  cell contentView leadingAnchor  isActive   true         cell imageView  widthAnchor constraint equalToConstant  80  rowHeight  isActive   true         cell imageView  heightAnchor constraint equalToConstant  80  isActive   true         if let textLabel   cell textLabel               let margins   cell contentView layoutMarginsGuide             textLabel translatesAutoresizingMaskIntoConstraints   false             cell imageView  trailingAnchor constraint equalTo  textLabel leadingAnchor  constant  -8  isActive   true             textLabel topAnchor constraint equalTo  margins topAnchor  isActive   true             textLabel trailingAnchor constraint equalTo  margins trailingAnchor  isActive   true             let bottomConstraint   textLabel bottomAnchor constraint equalTo  margins bottomAnchor              bottomConstraint priority   UILayoutPriorityDefaultHigh             bottomConstraint isActive   true             if let description   cell detailTextLabel                   description translatesAutoresizingMaskIntoConstraints   false                 description bottomAnchor constraint equalTo  margins bottomAnchor  isActive   true                 description trailingAnchor constraint equalTo  margins trailingAnchor  isActive   true                 cell imageView  trailingAnchor constraint equalTo  description leadingAnchor  constant  -8  isActive   true                 textLabel bottomAnchor constraint equalTo  description topAnchor  isActive   true                                 cell imageView  clipsToBounds   true            cell detailTextLabel  text    Detail Text       return cell

User · Answer

Here is  germanattanasio  s working method  written for Swift 3   func tableView   tableView  UITableView  cellForRowAt indexPath  IndexPath  - gt  UITableViewCell               cell imageView  image   myImage     let itemSize   CGSize width 42 0  height 42 0      UIGraphicsBeginImageContextWithOptions itemSize  false  0 0      let imageRect   CGRect x 0 0  y 0 0  width itemSize width  height itemSize height      cell imageView  image  draw in imageRect      cell imageView  image    UIGraphicsGetImageFromCurrentImageContext            UIGraphicsEndImageContext

User · Answer

It s not necessary to rewrite everything  I recommend doing this instead   Post this inside your  m file of your custom cell   -  void layoutSubviews        super layoutSubviews       self imageView frame   CGRectMake 0 0 32 32       This should do the trick nicely

[iphone] How do I make UITableViewCell's ImageView a fixed size even when the image is smaller

Examples related to iphone

Examples related to objective-c

Examples related to uitableview

Examples related to uiimageview

Examples related to uikit