ScrollingCardView is an iOS card view widget that:
- Hugs its content, dynamically expanding the height when the content height expands
- Will scroll its content if the content is taller than the card
In the following example, the card view height is constrained to be less than or equal to the screen size. First, the content does not fill the screen and neither does the card view:
As the content grows, the card view will expand until the screen size, at which point scrolling is enabled, as demonstrated below:
The card's corner radius, background color, and shadow are customizable.
As far as we could find, no existing library met the requirements for the card view we describe above.
We could repurpose an existing card view library and build the growing/scrolling functionality on top of it, but this be hard-to-extend and fragile.
ScrollingCardView was originally created for use in Mozilla's Project Prox.
// 1. Create your view, enable autolayout, and add it to the view hierarchy. let cardView = ScrollingCardView() cardView.translatesAutoresizingMaskIntoConstraints = false parentView.addSubview(cardView) // e.g. parent could be the ViewController's view // 2. Constrain the card view as you would any other view. NSLayoutConstraint.activate([ cardView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: 16), cardView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16), cardView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16), // If you don't constrain the height, the card will grow to match its // intrinsic content size. // Or use lessThanOrEqualTo to allow your card view to grow only until a // certain size, e.g. the size of the screen. cardView.bottomAnchor.constraint(lessThanOrEqualTo: bottomLayoutGuide.topAnchor, constant: -16), // Or you can constrain it to a particular height: // cardView.bottomAnchor.constraint(equalTo: bottomLayoutGuide.topAnchor, constant: -16), // cardView.heightAnchor.constraint(equalToConstant: 300), ]) // 3. Set your card view's content. let content = UILabel() content.text = "Hello world!" content.numberOfLines = 0 cardView.contentView = content
The content can be any view with intrinsic height, or, if you supply a
heightAnchor, any view.
You can also customize your card view's appearance:
cardView.backgroundColor = .white cardView.cornerRadius = 2 cardView.layer.shadowOffset = CGSize(width: 0, height: 2) cardView.layer.shadowRadius = 2 cardView.layer.shadowOpacity = 0.4
To see this in action, run the example project!
- iOS 9.0+
- Swift 3
ScrollingCardView is available through CocoaPods. Add the following to your Podfile:
ScrollingCardView is also available through Carthage. Add the following to your Cartfile:
github "mozilla-mobile/ScrollingCardView" >= 0.1.2
Carthage/Build/iOS/ScrollingCardView.framework into your
"Linked Frameworks and Libraries" section and add the
as specified in the Carthage github
- This project is not tested with Interface Builder
- This project is unlikely to work with non-constraint based layouts
To run the example project:
Xcode will open: run from there.
To run the Carthage example project:
cd Example_Carthage carthage update open Example_Carthage.xcodeproj
Xcode will open: run from there.
Follow the instructions above to open the example project. The library files can be found in:
Pods -> Development Pods -> ScrollingCardView -> ScrollingCardView -> Classes
Testing against external applications
If you're developing against an external application, you can specify a relative path from the application's podfile to your fork of this library:
pod "ScrollingCardView", :path => "../ScrollingCardView"
pod install in the external application's directory.