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 is done per “widget id”.
Download XIB’s Templates
Download the template xib files (v4.9.1) from here
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. Please note, xib file must contain exactly one top level object which must be SFTableViewCell
or descendent of SFTableViewCell
2) Horizontal item – you can override the xib file for each item in the “horizontal view” but can NOT customize the entire view. Please note, xib file must contain exactly one top level object which must be SFCollectionViewCell
or descendent of SFCollectionViewCell
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: SFSingleWithTitleTableViewCell.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 “AppSFSingleWithTitleTableViewCell”.
2) Please note, for “Single item” – the xib class for UITableViewCell has to be SFTableViewCell
or descendent of SFTableViewCell
. For “Horizontal item” – the xib class for UITableViewCell has to be SFCollectionViewCell
or descendent of SFCollectionViewCell
.
3) SFTableViewCell
has Outlets, you must make sure all Outlets are connected, see example:
4) Set the cell reusable identifier as “AppSFTableViewCell” or something similar (you’ll need to use it in the next step).
Step 3 – Code
SmartFeedManager
instance is already configured: (see setupCustomUIForSmartFeed()
in the sample app code).
Override Template For a Widget ID
let bundle = Bundle.main
let singleCellNib = UINib(nibName: "AppSFSingleWithTitleTableViewCell", bundle: bundle)
self.smartFeedManager.register(singleCellNib, withReuseIdentifier: "AppSFSingleWithTitleTableViewCell", forWidgetId: "SDK_SFD_1")
Override Template For a Template Type
let bundle = Bundle.main
let singleCellNib = UINib(nibName: "AppSFSingleTableViewCell", bundle: bundle)
self.smartFeedManager.register(singleCellNib, withReuseIdentifier: "AppSFSingleTableViewCell", 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 SFTableViewHeaderCell.xib
for manipulating the UI.
2) Change the name of the file SFTableViewHeaderCell.xib
–> AppSFTableViewHeaderCell.xib
3) Add SFTableViewHeaderCell.xib
to your app code
4) Use the following code to customize the header:
let bundle = Bundle.main
let headerCellNib = UINib(nibName: "SFTableViewHeaderCell", bundle: bundle)
self.smartFeedManager.register(headerCellNib, withReuseIdentifier: "AppSFTableViewHeaderCell", for: SFTypeSmartfeedHeader)