How to provide different sizes for iMessage Sticke

Question

I have created an iOS iMessage sticker app, and according to apple documentation, I should be able to display the stickers in one of three different sizes.

However, no matter what size I make the sticker images (300px by 300px, 408px by 408px, 618px by 618px) they only show up as the middle grid option, with three stickers per row. Does anyone know how to fix this issue, maybe I am missing something simple?

Documentation on this topic is scarce because it is fairly new. Thanks for the help.

Link to documentation: https://developer.apple.com/ios/human-interface-guidelines/extensions/messaging/

Answer 1

Importing the images at 300x300, 408x408, or 618x618 will ONLY affect the size the sticker appears in the conversation(when sent as initial message or dragged onto an existing message bubble. Changing the dimensions of your images will NOT affect it's orientation in the grid layout.

To change the grid layout in the StickerBrowserView you can do it one of two ways:

• InterfaceBuilder

Click on the StickerPack folder so it is highlighted(or select any sticker from your pack) and then you can change the "Sticker Size" option from the dropdown menu in the attributes inspector on the right-hand side to your preferred presentation style: small(2 columns), medium(3 columns), or large(4 columns). That's all! This will change every sticker to display this way in the layout. No matter what size you import your images at, your app will scale it down/up to the correct dimensions for use in the chosen layout.

• Programmatically

First, set up a new project as a "messages application", then create a new file to subclass MSStickerBrowserViewController, create array to store stickers, load/create stickers(while storing each into stickers array), and make sure to implement the 2 required datasource methods of MSStickerBrowserViewController. For this, you can just drag your images into the Extensions directory.

SubclassFile.Swift

import UIKit
import Messages

class MyBrowserVC: MSStickerBrowserViewController {

    //create stickers array
    var stickers = [MSSticker]()

    //load assets into stickers array
    func loadStickers() {
        createSticker(asset: "boycott", localizedDescription: "boycottSticker")
        createSticker(asset: "alluminaughty", localizedDescription: "alluminaughtySticker")
        createSticker(asset: "beer", localizedDescription: "beerSticker")
    }

    //func to create sticker
    func createSticker(asset: String, localizedDescription: String) {

        //create url from assets in main bundle
        guard let stickerPath = Bundle.main.path(forResource: asset, ofType: "png") else {
            print("Couldn't create sticker path for", asset)
            return
        }
        let stickerURL = URL(fileURLWithPath: stickerPath)
        let sticker: MSSticker

        //create sticker from path(and localized description) and add to array
        do {
            try sticker = MSSticker(contentsOfFileURL: stickerURL,
                                 localizedDescription: localizedDescription)
            stickers.append(sticker)
        } catch {
            print(error)
            return
        }
    }

    //datasource methods
    override func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int {
        return stickers.count
    }
    override func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView,
                                          stickerAt index: Int) -> MSSticker {
        return stickers[index]
    }
}

In your MessagesViewController(should be there automatically when beginning a new project), create instance of your BrowserVC from your subclass, set sticker size, browserVC frame, add subview to front, and load stickers to the browser view.

MessageViewController.swift

import UIKit
import Messages

class MessagesViewController: MSMessagesAppViewController {

    //create BrowserVC instance of Subclass
    var browserVC: MyBrowserVC!

    override func viewDidLoad() {
        super.viewDidLoad()

    //the next line of code is where you can adjust the "grid layout"
    //your options are: .small(2 columns), .regular(3 columns), or .large(4 columns)

        //instantiate browserVC with sticker size and set frame
        browserVC = MyBrowserVC(stickerSize: .regular)
        browserVC.view.frame = self.view.frame

        //send browserVC to front
        self.addChildViewController(browserVC)
        browserVC.didMove(toParentViewController: self)
        self.view.addSubview(browserVC.view)

        //load stickers onto the browser view
        browserVC.loadStickers()
        browserVC.stickerBrowserView.reloadData()
    }
}

For better info, check out the WWDC video released last year on Stickers! This is where I started learning to build stickers, then hit up the documentation!