When the default layout doesn't fit your design, you can provide a completely custom cell class. You control every pixel — the SDK only handles data fetching, impression tracking, and click handling.
How It Works
You provide an implementation of MCNativeAdRenderer — a protocol with some mandatory methods plus some optional ones:
Method
What it does
cellReuseIdentifier
A unique reuse identifier for your cell class
register(with:)
Registers your UICollectionViewCell subclass on the collection view
dequeueCell(collectionView:indexPath:)
Dequeues a cell using the reuse identifier
configure(cell:campaign:at:)
Binds campaign data to your cell — you decide what to show. Always called on the main thread.
itemSize(in:)
Returns the size of a single card
itemSize(in:for:)(optional)
Per-campaign size override. Default returns itemSize(in:). Override when cells need different heights based on content (e.g. an "In Progress" badge that changes the card height).
lineSpacing(optional)
Spacing between consecutive items along the scroll axis. Default: 12pt.
The SDK handles everything else: fetching, scrolling, impression tracking, click handling.
Here we present three different custom layout examples that you can use as inspiration for your implementation. These are just examples — you can customize the layout however you'd like.
Example A: Circular Thumbnails
This example creates a horizontal scroll of campaigns with circular images, promo badges, in-progress indicators, and a currency icon.
Step A.1: Create the cell class
Step A.2: Set the renderer
Implement MCNativeAdRenderer and hand it to the ad view.
Remember to replace https://my-cdn/my-coin-image.png with your actual icon.
Example B: Vertical Layout (small cards)
This example renders a vertical list of compact row cards. Each item shows a rounded thumbnail on the left, the title and an "In Progress" badge in the center, and the reward with currency icon on the right. The promo badge floats above the top-right corner of the card.
Step B.1: Create the cell class
Step B.2: Wire the renderer
Set the orientation to vertical and provide an MCNativeAdRenderer that returns the cell above. Because the promo badge overlaps the top edge, override lineSpacing to add breathing room.
Also remember to replace https://your.cdn/currency.png with your actual currency icon.
Example C: Vertical Layout (big cards)
This example creates a vertical list of large cover cards. Each item shows a wide cover image at the top, and a full-width green reward pill at the bottom.
Step C.1: Create the cell class
Step C.2: Wire the renderer
The cell height changes depending on whether the "In Progress" badge is shown, so override itemSize(in:for:) to return a per-campaign size.
Also remember to replace https://your.cdn/currency.png with your actual currency icon.
Key Points for Custom Layouts
Click Handling
The SDK wires click handlers automatically — tapping any item opens the campaign's detail page. You can override this with adView.onCampaignClick.
Image Loading
Use the SDK's built-in image loader in your renderer:
It handles background downloading, UIImage decoding, and cell recycling. No external library needed.
Cell Recycling Tip
Always reset images and hidden-state views in prepareForReuse(). The SDK does not restrict your cell class in any way — it just dequeues and calls configure(cell:campaign:at:).
