Kodeco Forums

iOS 10 Screencast: Dynamic Sticker Packs in iMessage Apps

Learn how you can build your own custom sticker pack app for Messages, enabling you to fully control the behavior and appearance of the sticker browser.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/4969-ios-10-dynamic-sticker-packs-in-imessage-apps

Nice tutorial on how to build a custom sticker app for Messages. Thanks Sam!

1 Like

glad you enjoyed it :slight_smile:

Great tutorial.

Has anyone had any luck using animated PNGā€™s?

I havenā€™t tried, so canā€™t help you Iā€™m afraid.

Natasha The Robot has written something about how you can create an animated sticker with multiple images, which isnā€™t quite the same thing, but might be of interest:

https://www.natashatherobot.com/xcode-8-create-an-animated-imessage-sticker/

sam

They do work. Animated GIFs too, IIRC. I wouldnā€™t be surprised if XCode combines assets into an APNG under the hood when you create them in the editor.

1 Like

@samdavies, I am getting an error trying to get the code as provided to run in Xcode:

for loadStickers() I get ā€œuse of unresolved identifierā€ and for let url = Bundle.main().urlForResource(name, withExtension: ā€œpngā€)! I get ā€œCannot call value of non-function type ā€˜Bundleā€™ā€. How do I resolve this? Iā€™m quite new to all of this, so any help is appreciated.

  1. Is it possible to localise the stickers, with a local version of the image? Itā€™s possible to localise the App Store resources, but Iā€™m not sure how to handle the thorough localisation in the actual application.

Yes, @jasonnewell is right, you can add single images and stack them together, then Xcode provides the actual sequence as an animated version.

Hi @schmid,

  1. These issues are caused by changes in the API and the language in progressive Xcode betas. I recorded the messaging screencasts with some of the very first betas, and unfortunately things change. In Ī²6, Swift changed quite significantly. You now need something like:
let url = Bundle.main.url(forResource: name, withExtension: "png")

I think that Xcode should be able to suggest the fix required for this particular error - itā€™s generally quite good at getting things updated.
The code for the equivalent chapter in the accompanying iOS 10 by Tutorials book will be up to date with the latest version of Xcode and Swift at the point that it is published, so you can check back there for working code.

Iā€™m not sure whether itā€™s possible to localise sticker images - sorry. I would think you could do it if you build your own custom sticker app, but that it might be more difficult if youā€™re just building a super-simple sticker pack app.

sam

1 Like

Good tutorial on building Message app!

1 Like

@shafi - glad you like it!

Iā€™m still trying to figure out the ā€œUse of unresolved identifier ā€œloadStickersā€.ā€ error that Xcode is throwing at me. Which way do I need to look? Thanks @samdavies :slight_smile:

Change the access specifier on the loadStickers() function definition from private to fileprivate.

This was a change in the latest version of Swift 3 - which introduced two new levels - open and fileprivate.

sam

1 Like

It worked after I changed to fileprivate. Thank you!

1 Like

@samdavies, Sam, I have one last question for you regarding this tutorial. Which way do I need to look if I want to make the filter/stackview in the storyboard slide out of view as you slide down the stickers? In addition, how do I add elements below the stickerview at the very bottom, to, for instance say ā€œThis is the end, expect new stickers soon. Here is my site {link}.ā€

Thanks truly appreciated.

Hi @schmid

This is challenging because the sticker browser view already has some kind of scroll view behaviour. I would recommend using a collection view to hold your stickers instead (you can still use StickerView to display the stickers) and then you can add section headers and footers.

If I remember correctly, this is the approach that they took in one of the WWDC sessions on messaging apps - so I recommend you check them out.

sam

Great tutorial Sam! Thanks for making this!

1 Like

Glad you like it @ngressle2014!

Hi Sam, how do I implement in-app purchasing for the sticker packs?

Hi @cato,

You would need to create your own sticker pack app - like the one in this video (as opposed to a really simple sticker pack). Then you can use the same IAP APIs that you use in a full iOS app - itā€™s all pretty much exactly the same.

Hope that helps

sam

Hi Sam, how do I set the size of the stickers (ie. small, regular or large)?