Layout bug with the new sidebar appearance of UICollectionView when switching between Regular and Compact modes

I'm using the new double column UISplitViewController and a UICollectionView with the new .sidebar appearance as the primary view controller.

To understand how this new API works, I created a sample project and hosted it on Github, so you can download and run it to reproduce the problem I'm facing. It was based on the sample code from Implementing Modern Collection Views, specifically, on the OutlineViewController class of the project.

Everything is working fine, the primary and secondary views are shown and I can switch between the views on the sidebar by tapping on them. The problem happens when I open a second app with Split View and adjust the size of the second app by dragging the app divider, so my app stays on the Regular mode, and the second app on Compact mode.

This somehow breaks the layout of the sidebar (and no errors are printed out to the console). Here's a screenshot that shows what happens.

If I restart the app, turn the iPad to portrait mode (which changes the layout to Compact), and then turn it to landscape (which changes the layout back to Regular), this is what happens to the sidebar. And also, the following auto layout error is printed on the console:

Console


I noticed that if I do not specify a .flexibleWidth for the autoresizingMask of the collection view, this problem stops. But then the style of the selected items on the sidebar no longer works as expected, as we can see on this screenshot.

So, is this a bug with the new .sidebar appearance of the collection view, or did I do something wrong when configuring my views?
Up vote post of marcosatanaka Down vote post of marcosatanaka
1k views
Posted by
marcosatanaka
Reply
Add a Comment

Replies

Just a few more details: I found that disabling autoresizing mask and setting individual constraints on the collection view fixes the problem:

Code Block 
private func configureHierarchy() {
		collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: createLayout())
		collectionView.delegate = self
		collectionView.translatesAutoresizingMaskIntoConstraints = false
		view.addSubview(collectionView)
		NSLayoutConstraint.activate([
				collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
				collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
				collectionView.topAnchor.constraint(equalTo: view.topAnchor),
				collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
		])
}


Not sure thought if this is how it was supposed to work, or if it's a bug with the .flexibleWidth autoresize mask.

The only thing that still bothers me is that it takes a while for the collection view to assume the .sidebar appearance. When opening the app for the first time, it seems that the collection view has the .sidebarPlain appearance, and then it changes to .sidebar. But I am initializing the layout list configuration with the .sidebar, so not sure why this happens.
Posted by
marcosatanaka
Up vote reply of marcosatanaka Down vote reply of marcosatanaka
Add a Comment