iPhone SE Visual Bug on Badges

[tn-tran]

On the iPhone SE when you first run the app, the section of Badges on the home tab, some of the badges is cut off. But when you go to the Learn tab and earn some points, this visual bug disappears. Also you cannot navigate through the rest of the badges. You can see this bug again by closing the app and earn a few points.

[caiozullo]

I had this problem before. Apparently, when any UIView is instantiated from a nib, it starts with whatever frame was set in the nib (Including reusable UITableViewCell instantiated with dequeueReusableCell – you can test this by printing the frame in awakeFromNib).

So, it works fine on big iPhone simulators because in the storyboard the frame matches the device size. However, the iPhone SE has a smaller screen, so elements end up off bounds.

In a normal view hierarchy, this frame would be fixed in runtime. But UITableView + UICollectionView + Autolayout + Auto sizing cells can be a special case 😄

In HomeDataSource.makeBadges() the cell is instantiated with dequeueReusableCell. At that time, the frame is wrong still (in this case the wrong width will break the layout!). So, when the cell's collection view data source is set via cell.collectionView.dataSource = badgeDataSource, the collection view triggers a reload using the wrong frame!

So later on, when BadgesView is asked to return its intrinsicContentSize, it returns the wrong size because collectionView.collectionViewLayout.collectionViewContentSize was calculated with the wrong width. (Auto layout/UITableView/UICollectionView will cache values and avoid layouts for performance reasons.)

One (hacky?) way to solve it is to set a frame to the cell and trigger a layout before setting the data source.

    /// Shows all the badges the user has earned.
    func makeBadges(in tableView: UITableView, indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "Badges", for: indexPath) as? BadgeTableViewCell else {
            fatalError("Failed to dequeue a BadgeTableViewCell.")
        }
	
	// give it the table frame so the real device width is used (needs to trigger a layoutIfNeeded to layout the subviews)
	cell.frame = tableView.bounds
	cell.layoutIfNeeded()

        cell.collectionView.dataSource = badgeDataSource
        cell.collectionView.delegate = badgeDataSource

	// tell the badgesView to layout again
	cell.badgesView.layoutIfNeeded()
		
        return cell
    }

• Another way is to override layoutSubviews in the BadgeTableViewCell class and force the collection view and badge view to layout but I think that will have performance issues.

• And yet another way is not to use auto sizing cells and calculate the frames programmatically.