WWDC diary – Custom stickers message app in iOS

This year on World Wide Developer Conference Apple presented the newest, 10th version of iOS for iPhones, iPad and iPods. It is a huge update which introduces many cool features and lets us – developers – better integrate our apps into the system by adding extensions and implementing newly presented frameworks.

Everything showed on this year’s WWDC deserves a separate blog post, but in this one, I’d like to focus on the new possibilities in Messages App and Stickers. Along with iOS 10 developers can create new types of apps especially for iMessage, which can provide three types of content:

– Interactive Messages (like deep links into other application)

– Stickers

– Other content – photos, videos, text, links, etc.

Besides applications, a completely new Messages App Store has been announced. Rebuilt iMessage app allows users to display installed apps in the Messages App Drawer and support inline app attribution for better sharing options and interactions between users. Messages Apps are very similar to existing iOS applications and support In-App Purchase, Apple Pay and Camera access. Right now these new apps will only run on iOS 10, but receiving content is possible on devices with macOS and watchOS. watchOS supports also sending Stickers from recent list.

All iMessages apps are built on a newly presented framework called Messages, which allow developers to create app extensions available later in Messages. In comparison to the well-known extensions newly presented, iMessage Apps do not have to be contained in an application bundle. This means that regular app is not required and Messages extension might be distributed alone.

Stickers

iOS introduced the generally known, from Facebook Messenger stickers into iMessage. This fun way to communicate is super simple and might be sent as a regular message or attached to other messages. Stickers are regular images presented as a static or animated sequence. There are two ways of creating Sticker Apps and I’ll present both approaches.

Creating Sticker Pack using Xcode

This is definitely the easiest way to create one for the iOS 10 Messages Apps. and requires no code at all.

Everything you need to do is simply drag & drop assets!

  1. Start by choosing Sticker Pack Application in New Project window inside new Xcode 8

    1
  2. Provide application name as usual
    2
  3. Drag and drop prepared images into StickerPack in „Stickers.xcstickers”.
    4
  4. Add app icon as usual. (optional)
    4.2
  5. Test app on Simulator after choosing Messages from application (it may take a moment to load applications and display this list).
    5
  6. Simply choose Sticker Pack from Drawer and have fun!
    6

We’re done here! This approach allows us to create a simple and beautiful Sticker Pack with zero code at all, only by using assets.

Animated Stickers can be created in a very similar way. First of all, you need to right-click the „Stickers.xcstickers” and choose „New Sticker sequence”. Then drag and drop the first frame into „Frame1” field and process with next frames.

And you’re done again! It’s as simple as that.

Stickers support PNG, APNG, JPEG, GIF for static images and APNG and GIF for animated ones. One file cannot be larger than 500 KB and in order to provide the highest possible quality PNG or APNG files are recommended. Stickers can be attached to other messages, therefore every provided image should have transparency channel and be without a background in any color for better results. One extra thing that can be modified in this easy approach is the size of the Stickers within the app. To change this parameter, see Attributes inspector in „Stickers.xcstickers” and simply change Sticker Size to most suitable for you. Stickers can be delivered in three different sizes:

– Small with 100 x 100 pt @ 3x

– Regular with 136 x 136 pt @ 3x

– Large with 206 x 206 pt @ 3x

Assets can be in higher resolution and if so, they’ll be automatically downsized to required sizes.

With this small modification we’re ready to ship our brand new stickers pack into the Messages App Store!

This was the easy way to create a Sticker Pack, now we’ll do the same but with some extra code!

Create a custom Sticker application using Messages framework

The more complex way of creating Stickers app allows developers to fully customize UI of the application.
Assets can be pulled from the server or dynamically created by users on top of provided content. Camera access can be granted and used within Messages App.

  1. Firstly choose Messages Application within Xcode
    7
  2. Like always we will need to provide the application with name
  3. In MessagesExtension we’re interested in MessagesViewController.swift, this is our principal class and subclass of MSMessagesAppViewController, where all the callbacks can be handled. We’re not going to use it now, so we can delete all the methods here.
    7.3
  4. Create new file called WaterStickerBrowserViewController, which subclass MSStickerBrowserViewController and import Messages at the top of the file. This ViewController will be responsible for displaying our Stickers.Create array to store our Sticker by
    var stickers = [MSSticker]()

    MSSticker are objects consist of image URL and localised description for accessibility.

  5. Add Stickers images to project by simply dragging them.
    7.7
  6. Write function to create Stickers from imported files
     func loadStickers() {
    
    

    createSticker(asset: “WaterSticker-1“, localizedDescription:

    "Surfski") 
    
    

    createSticker(asset: “WaterSticker-2“, localizedDescription:

    "Dragon boating") 
    
    

    createSticker(asset: “WaterSticker-3“, localizedDescription:

     "Sailing")
    
    

    createSticker(asset: “WaterSticker-4“, localizedDescription:

    "Kayaking")
    
    

    }

    func createSticker(asset: String, localizedDescription: String) {
    
    

    guard let stickerPath = Bundle.main().pathForResource(asset,

    ofType: "png") else {
    
    

    print(“couldn’t create the sticker path for “, asset)
    return
    }
    let stickerURL = URL(fileURLWithPath: stickerPath)

    let sticker: MSSticker
    do {

    try sticker = MSSticker(contentsOfFileURL: stickerURL,

    localizedDescription: localizedDescription) 
    
    
    

    stickers.append(sticker)

    } catch {

    
    

    print(error)

    return

    }

    }
  7. Add datasource to WaterStickerBrowserViewController
    override func numberOfStickers(in stickerBrowserView:
    MSStickerBrowserView) -> Int {
    
    

    return stickers.count

    }

    
    

    override func stickerBrowserView(_ stickerBrowserView:

    MSStickerBrowserView, stickerAt index: Int) -> MSSticker {
    
    

    return stickers[index]

    }

  8. In MessagesViewController add WaterStickersBrowserViewController variable and instantiate it in viewDidLoad.
    var browserViewController: WaterStickerBrowserViewController! 
    
    override func viewDidLoad() {

    super.viewDidLoad()

    browserViewController = WaterStickerBrowserViewController(stickerSize: .regular) browserViewController.view.frame = self.view.frame

    self.addChildViewController(browserViewController) browserViewController.didMove(toParentViewController: self) self.view.addSubview(browserViewController.view)

    browserViewController.loadStickers() browserViewController.stickerBrowserView.reloadData()

    }

    Right now we created exactly the same app as before. Now we can process and customize it a little.

  9. We can add this method to change the background colour in WaterStickerBrowserViewController
    func changeBrowserViewBackgroundColor(color: UIColor) {
    
    

    stickerBrowserView.backgroundColor = color

    }
  10. And change color in ViewDidLoad after initialisation
    browserViewController.changeBrowserViewBackgroundColor(color: UIColor(colorLiteralRed: 200/255, green: 233/255,
    blue: 254/255, alpha: 1.0))

    It’s a quick example of how we can customise our Sticker App!

    Notice that MSStickerBrowserViewController is responsible for displaying Stickers in MSStickerBrowserView and confirms to MSStickerBrowserViewDataSource protocol.

    If we want to display Stickers in different way than MSStickerBrowserViewController does, it can be done by using MSStickerView and MSSticker. Stickers can be displayed in custom UICollectionView and presented in Compact or Expended mode. I’ll show how to do this in the next articles about creating more complex iMessage Apps.https://appsto.re/pl/5EJscb.i

    You can download project from our server, StickerPack, iMessageApp. Check out also our Water Sport Emojis
    Whole article is based on WWDC session iMessage Apps and Stickers, Part 1.