Card interface (similar to Snapchat or Duolingo), Incorrect behavior on iPhone X-series

[richardtop]

Is it possible to use Family to create a card-like interface, similar to Snapchat or Duolingo with multiple rounded cards that scroll infinetely?

So far I was able to achieve a very similar effect, but with some flaws using this code:

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let family = FamilyViewController()
    family.view.backgroundColor = .white
    let vc1 = TableViewController1()
    let vc2 = TableViewController2()

    family.addChild(vc1)
    family.addChild(vc2)
    window = UIWindow(frame: UIScreen.main.bounds)
    window?.rootViewController = family
    window?.makeKeyAndVisible()

    return true
  }

The result looks like this:

So, the problem is really with the outer corners which should not be visible if there is some content further down (or up) the table.

What would be ideal is to add some padding where the views could extend before being recycled.

I.e. currently the tableviews are limited by the FamilyController's alignment rect, or at least, respects the top and bottom safe area insets. Because of that, the layout looks weird on the X-series phones.

Having some parameter (i.e. margins to extend) would give an option to both achieve the card-like looks and fix the x-series bug.

Video Description

[zenangst]

Hey @richardtop, I might be a bit of a dummy here but I'm unsure of what the issue is, or how to fix it :)
Mind adding a mockup of what the end result should look like?

[richardtop]

BTW, those two examples are meant to be only examples... Of course, they're way easier to achieve with the UICollectionView. However, this idea (and this library) becomes relevant when the "cards" are of different content and load data from different sources.
It becomes very easy to reuse the same code, let's say for the Siri Shortcuts UI (the TableView gets wrapped in the "Siri" card) and for the main screen (the TableView gets wrapped in Family's view)

[zenangst]

Yeah I'm with you that far but what are the features that you are missing in Family ? :)

[richardtop]

@zenangst .... sketching some examples...

[richardtop]

The bug:

Let's consider red and blue tableviews and compare them against the default "Settings" app. In "Settings" the content scrolls past the margins freely, so it seems like the content goes "off-screen".

If we consider the double table view controller example with Family, both of the controllers are trimmed by the framework before their content goes off-screen. To fix this issue, the two child controllers should extend beyond the visible area a bit. This would allow for the cells to go off-screen and only then recycled.

If you run the demo I've attached, there is a noticeable jitter in the edge parts of the both tableviews.

Family-master.zip

[richardtop]

Feature - rounded "cards"

Adding some margins, so the tableviews' frames extend beyond the visible range would allow for an effect - rounding corners of the tableview. The resulting tableviews look like infinitely scrollable cards, an effect similar to the example attached by the Snap Inc and Duolingo.

in the example graphics, the filled rectangles are the actual frames of the tableviews and the bordered rectangles define the content of the tableviews.

If the user scrolls to the beginning of the tableview, it would appear as a rounded card. When the user scrolls past it, the table would become a standard list (as shown on the centered image).

This UI is used in many apps and it would be very easy to reproduce it with the Family.
On the other hand, currently I use a custom UICollectionViewLayout with multiple DataSources for each section. Also, I convert the indexpaths back end forth the
collection view and the datasource (an approach similar to "Advanced Interfaces withUICollectionView" WWDC 2014 talk).

With Family it would be extremely straightforward and solved by just adding two tableviews.
Also, a unified background shadow is easy to configure just by adding a shadow to the whole tableview.

Of course, I didn't even mention the fact that it would be possible to combine table and collection views in one screen.

The controllers would be completely independent of each other and manage data loading, display and navigation.

[zenangst]

Hey @richardtop, sorry for the delay. Life has been hectic this fall, I've started investigating this issue and I'm working on a PR that might help you along the way. I've optimized the layout algorithm to be even faster for iOS and tvOS. macOS already got the implementation here - #52
That should fix slowdowns when scrolling... what I did notice when testing was that the iPhone X > simulators are very slow when it comes to scrolling when trying it on an older simulator the performance was way faster. I've yet to test it out on an actual device as I'm still using an iPhone 8 :)

The develop branch that I'm tinkering with, you can now set what type of constraints that you want to set for your family controller.

Reference: 836b29b

And last but not least, instead of adding support for custom spacing (which was initially inspired by UIStackView. You can now set insets instead, which means that you can apply it to the top and bottom, as well as leading and trailing which is pretty neat.

If you are feeling adventurous, you can try develop and see what you think.
I'm guessing it will be merged soon as I'm eager to include the new performance improvements on iOS and tvOS.

As for your points in having decoupled controllers, combining table views and collection views in on controller... I couldn't agree more, it is kinda what I wanted to solve with the framework, to begin with.
Glad you like the idea :)

Again, sorry for the lack of response on this issue, I wanted to solve it for a while now.

[zenangst]

I just went total #yolo and merge it into master. Pushing to cocoapods now :)

[richardtop]

Cool, I think that's what I requested. A nice feature to have for this library.

[zenangst]

@richardtop I also investigated the UI stutter, that should be fixed in 0.9.1 :)