Skip to main content
Version: 1.8.x

Card View

This option allows you to display our custom widget that display stories in an card format horizontally or on grid.

Layout​

You first need to add our card view within your ViewController:

class YourThumbViewController: UIViewController {
   let cardView = ListStoryCardViewController()
   let config = JoinStoriesStandaloneConfig(alias: "<YOUR_ALIAS>", ...)

   override func viewDidLoad() {
        ...
        cardView.startCardView(config: config)
   }
}

Display max stories on widgets​

If you want to limit the number of items to be displayed in the widget, you can add maxStories parameter to startCardView method:

cardView.startCardView(config: config, maxStories: 4)

Configuration​

You can fine tune SDK behavior and UI, by specifying optional values of the card view parameter.

Show Label​

Show/hide text below each card. The label is visible by default

cardView.withLabel = true | false

Label Typeface​

Card views label custom font (withLabel should be true)

cardView.fontName = "HelveticaNeue-Bold"

Label Color​

Card views label custom text color (withLabel should be true)

cardView.labelColor = .white

Label Size​

Card views label custom size (withLabel should be true)

cardView.labelSize = 20

Card elevation​

Card views custom elevation. 8 is default value

cardView.cardElevation = 10

Card raduis​

Card views custom radius. 8 is default value

cardView.cardRadius = 10

Show play button​

Show/hide play button below each card. The play button is visible by default

cardView.hasPlayButton = true | false

Show overlay​

Show/hide overlay below each card. The overlay is visible by default

cardView.hasOverlay = true | false

Spacing​

You can custom spacing between each card. The spacing default value is 8.

cardView.spacing = 10

Number of column​

You can custom the number of column (grid format only). The number of column default value is 2.

cardGrid.numberOfColumns = 2

Card Size​

By default, the size of the card is calculated by a ratio based on the width or height of the container.

You can custom size calling these parameters :

cardList.cardWidth = 150

The height is equal to the height of the container.

Grid edge​

We need to known the edge of card grid container to calculate correctly the card size. By default, the value of edge is 0.

cardGrid.edge = 40