MSStickerBrowserView stickers going out of frame

Question

I am attempting to dynamically load stickers for a Messages Extension for iOS 10. I have successfully loaded these icons; however, they fail to properly constrain to the proportions of a message app.

In the compact view of a message extension, it has a footer. This can be seen here:

In the expanded view of a message extension, it has a header.

I am loading these stickers through a MSStickerBrowserView a subview of MSStickerBrowserView. I'm overriding the superclass methods of numberOfStickers and stickerBrowserView to load my images.

From what I can tell, the MSStickerBrowserView is just a wrapper for a UICollectionView.

Anyhow, after the stickers are loaded they are not being constrained to the header and footer. I've attached a gif of what I mean below:

As you can see, in the compact view the last row of stickers go under the footer. Accordingly, in the expanded view the top row of stickers go under the header.

As an experiment, I implemented the same dynamic sticker system but with an actual UICollectionViewController and UICollectionView (instead of the MSStickerBrowser wrappers) and the same effect was achieved. Further more, I attempted to create a custom layout for this but it produced the same result.

I would prefer to stick to the MSStickerBrowserView, since it was already made for this purpose; however, if you see the UICollectionView more fitting I would be willing to change.

Note that with the use of the MSStickerBrowserViewController and View, the UICollectionView seems to be created programatically, so storyboard constraints are not available and I have not been able to apply any programatic constrants to the cells of the views.

I'm not really sure how to fix this, and would love any suggestions.

Answer 1

Try Uncheck below options for your view controller:

• Under Top Bars

Hope it will work....

Answer 2

The way I fixed this was to use a UICollectionViewController with a state variable to represent the current presentation style (.expanded or .compact) which I set at presentation time.

Then in viewWillAppear for my UICollectionViewController, I set the collectionView's contentInset depending on the presentation style

if let style = self.presentationStyle, style == .expanded { 
    collectionView?.contentInset =  UIEdgeInsets(top: 95, left: cellPadding, bottom: cellPadding, right: cellPadding)
} 

cellPadding is a number I've computed after setting the itemSize in my collectionViewLayout but the value of 95 is just a guesstimate/kludge as I haven't yet found out how to get the size of the containing iMessage top nav bar.

Answer 3

You can try using storyboard to layout view and add a empty view under the browserView to solve