iMessage App I – Getting Started

4 minutes, 54 seconds

iMessages App is like a mini app that resides inside iMessage chat app. It works as an extension, it can have a cointainer which is the main iOS app, and also without a container app. It’s because iMessage App can be distributed independantly via Message App Store.

artboard-3

So without further ado lets try build one iMessage Application.

iMessage App, it’s superset of ‘Stiker Pack App’ which can do anything ‘Sticker Pack’ can do, plus more customization. So to create ‘Sticker Pack App’ it’s pretty straightforward.

Create an iMessage App

1. Create the Project

Open up Xcode, go to File > New > Project, select ‘iOS’ then ‘iMessage Application’ as below.

A

Click Next, name it as ‘My iMessage App’ and click ‘Next’.

On the newly created project we will have these folders:
* My iMessage App : Your sticker assets like ‘Sticker Pack App’
* MessagesExtension : Customization codes
* Frameworks : Pre-added with Message framework
* Products : Executables from the projects

2. Add Stickers Image into MessageExtension folder

Download from this resource to get a sample of 6 stickers. Unzip it, and drag into ‘MessagesExtension’ folder, make sure ‘Copy item’ is checked when importing.

The sticker names are : 1.png ~ 6.png.

3. Add StickerBrowserViewController Class

Add a new file inside ‘MessagesExtension’ folder, name it as StickerBrowserViewController.swift as a subclass of MSStickerBrowserViewController.

Because MSStickerBrowserViewController is conform to MSStickerBrowserViewDataSource we have to add the protocol functions.

Here is the full code for StickerBrowserViewController.swift


import UIKit
import Messages

class StickerBrowserViewController: MSStickerBrowserViewController {
  
  var stickers = [MSSticker]()
  
  func changeBrowserViewBackgroundColor(color: UIColor){
    stickerBrowserView.backgroundColor = color
  }

  func loadStickers(){
    
    createSticker(asset: "1", localizedDescription:"grinning face")
    createSticker(asset: "2", localizedDescription:"grimacing face")
    createSticker(asset: "3", localizedDescription:"grinning face with smiling eyes")
    createSticker(asset: "4", localizedDescription:"face with tears of joy")
    createSticker(asset: "5", localizedDescription:"smiling face with open mouth")
    createSticker(asset: "6", localizedDescription:"smiling face with open mouth and smiling eyes")
    
  }
  
  func createSticker(asset: String, localizedDescription: String){
    
    guard let stickerPath = Bundle.main.path(forResource:asset, ofType:"png") else {
      print("couldn't create the sticker path for", asset)
      return
    }
    
    // we use URL so, it's possible to use image from network
    let stickerURL = URL(fileURLWithPath:stickerPath)
    
    let sticker: MSSticker
    do {
      
      try sticker = MSSticker(contentsOfFileURL: stickerURL, localizedDescription: localizedDescription)
      // localizedDescription for accessibility
      
      stickers.append(sticker)
    }catch {
      print(error)
      return
    }
    
  }
  
  override func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int{
    return stickers.count
  }

  override func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker{

    return stickers[index] as MSSticker
    
  }

}

4. Setup The Main View Controller

Go back to the main view controller which is the MessagesViewController.swift.

Change entire code with this one:


import UIKit
import Messages

class MessagesViewController: MSMessagesAppViewController {

  var browserViewController: StickerBrowserViewController!
  
  override func viewDidLoad() {
    super.viewDidLoad()

    browserViewController = StickerBrowserViewController(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()
    browserViewController.changeBrowserViewBackgroundColor(color: .lightGray)

  }
  
  override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
  
    browserViewController.view.frame = self.view.frame
  
  }
  
  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }
  
}

For extra credit open ‘MainInterface.storyboard’ and remove the ‘Hello World’ label that has been added by default.

S

5. Changing The Display Name

Go to project’s target, select ‘MessagesExtension’, change Display Name to ‘Emoji’.

Handling the Presentation View

You actually can expand the view of the sticker browser to full screen then make it small back. Here is piece of codes that can handles the view changes.


// MARK: MSMessagesAppViewController
  
override func willTransition(to presentationStyle: MSMessagesAppPresentationStyle) {
  
  if (presentationStyle == .compact){
    print("compact")
  }else if (presentationStyle == .expanded){
    print("expanded")
  }
  
}

For the next progression for message we will learn how to make ‘session’ with the Message app.

Resources:
WWDC16 204
WWDC16 224
Messages by Shinobi Controls
Ice Cream Sample Code