Why are my table view cells' heights so large on my phone, but not in the simulator?

Question

I just finished developing an app and decided to install it on my phone. Then I found that my table views look different on my phone!

This is what should be seen. (Simulator)

This is what I did see: (My Phone)

As you can see, the table view cells on my phone look "longer" on my phone, but in the simulator, it looks normal. I don't understand why is this happening. Can you tell me why?

My phone is an iPhone 6s Plus, running iOS 8.1.2. My Simulator is iPhone 6s Plus, running iOS 9.3

To reproduce this, add a table view controller to the storyboard and put this stuff in a prototype cell:

where the black border is an image view.

And then, you know, just put some cells in the table view like I did.

---

Here is the code for the table view just in case you need it:

class ColorSchemeController: UITableViewController {
    var color: UIColor!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 5
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0...2:
            return 3
        case 3:
            var h: CGFloat = 0
            color.getHue(&h, saturation: nil, brightness: nil, alpha: nil)
            if h == 0 {
                return 3
            }
            return 5
        case 4:
            return 2
        default:
            return 0
        }
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell1", forIndexPath: indexPath)
        let imageView = cell.viewWithTag(1)! as! UIImageView
        let label = cell.viewWithTag(2)! as! UILabel

        func setColor(color: UIColor) {
            imageView.backgroundColor = color
            label.text = color.hexDescription()
        }

        switch indexPath.section {
        case 0:
            switch indexPath.row {
            case 0:
                setColor(self.color)
            case 1:
                setColor(self.color.rotateHueByDegrees(120))
            case 2:
                setColor(self.color.rotateHueByDegrees(-120))
            default:
                assert(false)
            }
        case 1:
            switch indexPath.row {
            case 0:
                setColor(self.color)
            case 1:
                setColor(self.color.rotateHueByDegrees(150))
            case 2:
                setColor(self.color.rotateHueByDegrees(-150))
            default:
                assert(false)
            }
        case 2:
            switch indexPath.row {
            case 0:
                setColor(self.color)
            case 1:
                setColor(self.color.rotateHueByDegrees(30))
            case 2:
                setColor(self.color.rotateHueByDegrees(-30))
            default:
                assert(false)
            }
        case 3:
            switch indexPath.row {
            case 0:
                setColor(self.color)
            case 1:
                var h: CGFloat = 0
                color.getHue(&h, saturation: nil, brightness: nil, alpha: nil)

                if h == 0 {
                    var v: CGFloat = 0
                    self.color.getHue(nil, saturation: nil, brightness: &v, alpha: nil)
                    if v <= 0.1 {
                        setColor(self.color.incrementValueBy(0.1))
                    } else {
                        setColor(self.color.incrementValueBy(-0.1))
                    }
                    break
                }

                var s: CGFloat = 0
                self.color.getHue(nil, saturation: &s, brightness: nil, alpha: nil)
                if s <= 0.1 {
                    setColor(self.color.incrementSaturationBy(0.1))
                } else {
                    setColor(self.color.incrementSaturationBy(-0.1))
                }
            case 2:
                var h: CGFloat = 0
                color.getHue(&h, saturation: nil, brightness: nil, alpha: nil)

                if h == 0 {
                    var v: CGFloat = 0
                    self.color.getHue(nil, saturation: nil, brightness: &v, alpha: nil)
                    if v >= 0.9 {
                        setColor(self.color.incrementValueBy(-0.2))
                    } else {
                        setColor(self.color.incrementValueBy(0.2))
                    }
                    break
                }

                var s: CGFloat = 0
                self.color.getHue(nil, saturation: &s, brightness: nil, alpha: nil)
                if s >= 0.9 {
                    setColor(self.color.incrementSaturationBy(-0.2))
                } else {
                    setColor(self.color.incrementSaturationBy(0.2))
                }
            case 3:
                var v: CGFloat = 0
                self.color.getHue(nil, saturation: nil, brightness: &v, alpha: nil)
                if v <= 0.1 {
                    setColor(self.color.incrementValueBy(0.1))
                } else {
                    setColor(self.color.incrementValueBy(-0.1))
                }
            case 4:
                var v: CGFloat = 0
                self.color.getHue(nil, saturation: nil, brightness: &v, alpha: nil)
                if v >= 0.9 {
                    setColor(self.color.incrementValueBy(-0.2))
                } else {
                    setColor(self.color.incrementValueBy(0.2))
                }
            default:
                assert(false)
            }
        case 4:
            switch indexPath.row {
            case 0:
                setColor(self.color)
            case 1:
                setColor(self.color.rotateHueByDegrees(180))
            default:
                assert(false)
            }
        default:
            assert(false)
        }

        return cell
    }

    override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        switch section {
        case 0:
            return "Triadic"
        case 1:
            return "Split Complements"
        case 2:
            return "Analogous"
        case 3:
            return "Monochromatic"
        case 4:
            return "Complements"
        default:
            return nil
        }
    }
}

If you can't reproduce, here is the github link: https://github.com//Sweeper777/ColorBible

download the Xcode project and run it on your phone.

Answer 1

Try something like this before returning the cell

tableView.estimatedRowHeight = 100.0
tableView.rowHeight = UITableViewAutomaticDimension

where "100.0" is what you estimate your row height to be.

Answer 2

I can reproduce the same effect on the simulator 8.1.
I noticed that the rowHeight of the tableView is set to -1 (UITableViewAutomaticDimension), so the issue has something to do with dynamic sizing (not sure why, seems like a different behavior in iOS 8).

This seems to fix it (assuming you don't need dynamic sizing):

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.rowHeight = 44;
}