Download XIB’s Templates Single Item \ Horizontal Item Smartfeed Header Cell

App developers integrating with Smartfeed can override the default UI and use their own custom UI template or “layout files”. The override can be done per “widget id” or per “template type”

.

Download XIB’s Templates

Download the template xib files (v4.9.1) from here

Single Item \ Horizontal Item

Items in the feed can be divided into 2 types:

1) Single item – one item in a line, example:

2) Horizontal item – multiple horizontal items in a line, example:

Here is how custom UI works for Smartfeed:

1) Single item – you can override the xib file for the entire item.

2) Horizontal item – you can override the xib file for each item in the “horizontal view” but can NOT customize the entire view.

Step 1 – Download XIB Files As Base For Override

The first step to setup custom UI is to start working with the default xib layout template Outbrain use in the Smartfeed for the specific layout you plan to override. Use the relevant custom layout xib file according to the item “widget id”. For example, in order to add custom layout for single recommendation, use the template file: SFSingleWithTitleCollectionViewCell.xib. Please contact your TAM for more information.

You will probably find iOS Smartfeed UI Templates page useful.

Step 2 – Edit xib File

1) Use one of the template files you just downloaded as the base file for override and change the file name to have “App” in the prefix, for example “AppSFCollectionViewCell”.

2) Please note, in the xib the class for UICollectionViewCell has to be SFCollectionViewCell or descendent of SFCollectionViewCell.

3) SFCollectionViewCell has Outlets, you must make sure all Outlets are connected, see example:

4) Set the cell reusable identifier as “AppSFCollectionViewCell” or something similar (you’ll need to use it in the next step).

Step 3 – Code

Override Template For a Widget ID

let bundle = Bundle.main
let singleCellNib = UINib(nibName: "AppSFCollectionViewCell", bundle: bundle)
self.smartFeedManager.register(singleCellNib, withReuseIdentifier: "AppSFSingleWithTitleCollectionViewCell", forWidgetId: "SDK_SFD_1")

Override Template For a Template Type

let bundle = Bundle.main
let singleCellNib = UINib(nibName: "AppSFCollectionViewCell", bundle: bundle)
self.smartFeedManager.register(singleCellNib, withReuseIdentifier: "AppSFSingleWithTitleCollectionViewCell", for: SFTypeStripWithTitle)

List of SFItemType’s

typedef enum
{
    SFTypeSmartfeedHeader = 1,
    SFTypeStripNoTitle,
    SFTypeCarouselWithTitle,
    SFTypeCarouselNoTitle,
    SFTypeGridTwoInRowNoTitle,
    SFTypeGridThreeInRowNoTitle,
    SFTypeGridTwoInRowWithTitle,
    SFTypeGridThreeInRowWithTitle,
    SFTypeStripWithTitle,
    SFTypeStripWithThumbnailNoTitle,
    SFTypeStripWithThumbnailWithTitle,
    SFTypeStripVideo,
    SFTypeStripVideoWithPaidRecAndTitle,
    SFTypeStripVideoWithPaidRecNoTitle,
    SFTypeGridTwoInRowWithVideo,
    SFTypeBadType
} SFItemType;

Smartfeed Header Cell

It’s also possible to customize the Smartfeed header cell by going through a similar process as described above, see the step by step guidelines here:

1) Use the template of SFCollectionViewHeaderCell.xib for manipulating the UI.

2) Change the name of the file SFCollectionViewHeaderCell.xib –> AppSFCollectionViewHeaderCell.xib

3) Add AppSFCollectionViewHeaderCell.xib to your app code

4) Use the following code to customize the header:

let bundle = Bundle.main
let headerCellNib = UINib(nibName: "AppSFCollectionViewHeaderCell", bundle: bundle)
self.smartFeedManager.register(headerCellNib, withReuseIdentifier: "AppSFCollectionViewHeaderCell", for: SFTypeSmartfeedHeader)