1

I'm trying to make a recipe search app. I am trying to get results from the API and also an image associated with these results and display them in a table view, using the basic table view cell.

When I download the image, the image frame is set to its instrinsic size, so it'll be the dimensions of the download image. When I set constraints on this image, it's smaller but you can still see the frame is effecting the text placement.

Here's what it looks like before constraints are set: https://i.stack.imgur.com/xHVQJ.jpg

Here's what it looks like after constraints are set: https://i.stack.imgur.com/IRsZy.jpg

This is my code I'm using to set the cell up:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "recipe", for: indexPath)
         
    cell.imageView?.translatesAutoresizingMaskIntoConstraints = false
    cell.imageView?.heightAnchor.constraint(equalToConstant: 100).isActive = true
    cell.imageView?.widthAnchor.constraint(equalToConstant: 100).isActive = true
    cell.imageView?.image = recipeResults[indexPath.row].image
  
    cell.textLabel?.numberOfLines = 0
    cell.textLabel?.text = "\(recipeResults[indexPath.row].title)"
            
    return cell
}

Does anyone know how I can keep the image to be 100x100 and have the text in each row lined up nicely?

I also notice I have an issue with dequeue the cell, as when I click on the row or scroll up/down, the image then turns back to it's normal big size without keeping it small. How can I fix this?

Community
  • 1
  • 1
SmallGrammer
  • 893
  • 9
  • 19
  • its your custom cell ? – Jawad Ali May 28 '20 at 07:43
  • what are the other constraint you are using on these table view cell ? – Moumen Alisawe May 28 '20 at 07:50
  • Width and height not enought, you need to give x and y position as well. And adding constraint on dequeue not a good idea, because you just keep adding constraint every time `cellForRowAt` gets called – vpoltave May 28 '20 at 07:57
  • @jawadAli It's not a custom cell. I'm using storyboard's "basic" style cell – SmallGrammer May 28 '20 at 08:38
  • @MoumenAlisawe I'm not using any constraints on my storyboard since I'm using a "basic" style cell. The constraints you see in the code are the only constraints I've added via code – SmallGrammer May 28 '20 at 08:39
  • @SmallGrammer use custom cell instead of `basic` cell. In this way you'll able to customize what component you want. Then add horizontal `UIStackView` into your cell and constraint it's `leading`, `trailing`, `top` and `bottom`. Then add an `imageView` and `label` to the `stackView`. You should give a `width` constraint to your `imageView`. – emrcftci May 28 '20 at 09:10
  • @emrcftci Thanks this solved my problem! After the comments I had the inkling I should have used a custom cell so I did and followed your instructions to make the custom cell more robust. – SmallGrammer May 28 '20 at 09:21

2 Answers2

0

Setting the width and height constraints for your UIImage is not enough.

Try setting it to center vertical within the cell, and add constraint with your label too. I think it's easier for you to set it in storyboard.

sats
  • 647
  • 6
  • 17
King.lbt
  • 843
  • 5
  • 15
0

Use custom cell instead of basic cell.

In this way you'll be able to customize what component you want.

  • Create your own custom cell via .xib or in Interface Builder

  • Add horizontal UIStackView into your cell and constraint it's leading, trailing, top and bottom.

  • Add an imageView and label to the stackView. You should give a width constraint to your imageView. In your case it is hard-coded 100.

emrcftci
  • 3,355
  • 3
  • 21
  • 35
  • @SmallGrammer I've posted my comment as an answer because of others benefits. If it is works please mark as an accepted. – emrcftci May 28 '20 at 11:34