Introducing ScrollingCardView for iOS

Michael Comella
Mozilla Mobile Engineering
1 min readJan 17, 2018

For Project Prox, we were asked to implement a design¹ like this:

Specifically, this is a card view that:

  • Hugs its content, dynamically expanding the height when the content does
  • Will scroll its content if the content is taller than the card

After some searching, we discovered that no such widgets existed! Hoping our efforts could be useful to others, we created the ScrollingCardView library.

Usage

ScrollingCardView is used much like any other view.

First, create your view, enable autolayout, and add it to the view hierarchy:

Then constrain the card view as you would any other view:

Finally, specify the card view’s content:

The card view comes with smart visual defaults (including a shadow), but you can also customize them:

Want it? ScrollingCardView is available on CocoaPods: you can find installation instructions and the source on GitHub.

Questions? Feature requests? File an issue or find us on #mobile.

Notes

1: This particular design was not actually used because we felt we could provide a better user experience if we also moved the card itself, which lets the user fill the screen with the long-form content they were trying to read. Further discussion in prox#372.

Originally published at mcomella.xyz.

--

--