Callback for MSSticker Peels in iOS 10 iMessage sticker app

Question

I'm experimenting with sticker iMessage apps in iOS 10 and I'm running into an issue with the override func didStartSending(_ message: MSMessage, conversation: MSConversation) method in MSMessagesAppViewController. When "peeling" a sticker from an MSStickerView, I would expect to receive some sort of callback on the didStartSending method. But it appears this is not the case. Does anyone know if this is the expected behavior and/or if there's another way to subscribe to callbacks for when these stickers are peeled, dragged, and dropped into the MSConversation? I realize that didStartSending is reserved for when the user taps the send button, but surely there should be some way of knowing when users drag MSStickers without hacking together some UIView dragging/rect-reading heuristic.

Messages View Controller:

class MessagesViewController: MSMessagesAppViewController {

    var nYCStickersBroswerViewController: NYCStickersBroswerViewController!

    override func viewDidLoad() {
        super.viewDidLoad()
        nYCStickersBroswerViewController = NYCStickersBroswerViewController(stickerSize: .regular)
        nYCStickersBroswerViewController.view.frame = self.view.frame

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

        nYCStickersBroswerViewController.loadStickers()
        nYCStickersBroswerViewController.stickerBrowserView.reloadData()
    }

    ...

    override func didStartSending(_ message: MSMessage, conversation: MSConversation) {
        // Called when the user taps the send button.
        print(message) // should this not contain the sticker that is peeled, dragged, and dropped into the conversation?
    }

 }

Sticker Browser:

import Foundation
import UIKit
import Messages

class ASSticker: MSSticker {
    var identifier: String?
}

class NYCStickersBroswerViewController: MSStickerBrowserViewController {

    var stickers = [ASSticker]()

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func changeBrowswerViewBackgroundColor(color: UIColor) {
        stickerBrowserView.backgroundColor = color
    }

    func loadStickers() {
        createSticker(name: "brooklyn", localizedDescription: "Brooklyn Bridge Sticker")
        createSticker(name: "liberty", localizedDescription: "Statue of Liberty Sticker")
        createSticker(name: "love", localizedDescription: "I Love New York Sticker")
        createSticker(name: "mets", localizedDescription: "New York Mets Sticker")
        createSticker(name: "rangers", localizedDescription: "New York Rangers Sticker")
        createSticker(name: "subway", localizedDescription: "New York City MTA Subway Train Sticker")
    }

    func createSticker(name: String, localizedDescription: String) {
        guard let stickerPath = Bundle.main.pathForResource(name, ofType: "png") else {
            print("Call ae cab, you're intoxicated.")
            return
        }
        let stickerURL = URL(fileURLWithPath: stickerPath)
        let sticker: ASSticker
        do {
            try sticker = ASSticker(contentsOfFileURL: stickerURL, localizedDescription: localizedDescription)
            sticker.identifier = "something unique"
            stickers.append(sticker)
        } catch {
            print("Call a cab, you're intoxicated.")
        }
    }

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

}

Heifetz

Hey did you ever get this to work? I am having the same issue – Clansman

The answers below are great work arounds, but I've yet to come up with a solution using the stock MSStickerBrowserViewController. – Heifetz

Answer 1

Here's a subclass and delegate that will tie into the tap and long press gesture recognizers that MSStickerView is using for select and peel interactions. If the implementation of MSStickerView changes this may no longer provide events, but shouldn't crash.

import UIKit
import Messages

protocol InstrumentedStickerViewDelegate: class {
    func stickerViewDidSelect(stickerView: MSStickerView)
    func stickerViewDidPeel(stickerView: MSStickerView)
}

class InstrumentedStickerView: MSStickerView {
    weak var delegate: InstrumentedStickerViewDelegate?

    override init(frame: CGRect) {
        super.init(frame: frame)

        for gestureRecognizer in gestureRecognizers ?? [] {
            if let tapGestureRecognizer = gestureRecognizer as? UITapGestureRecognizer {
                tapGestureRecognizer.addTarget(self, action: #selector(didTap))
            } else if let longPressGestureRecognizer = gestureRecognizer as? UILongPressGestureRecognizer {
                longPressGestureRecognizer.addTarget(self, action: #selector(didLongPress))
            }
        }
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func didTap(tapGestureRecognizer: UITapGestureRecognizer) {
        if tapGestureRecognizer.state == .Recognized {
            delegate?.stickerViewDidSelect(self)
        }
    }

    func didLongPress(longPressGestureRecognizer: UILongPressGestureRecognizer) {
        if longPressGestureRecognizer.state == .Began {
            delegate?.stickerViewDidPeel(self)
        }
    }
}

Keegan

Hey, how would you use this i.e. if I have stickers, how can I use these callback functions in my class? – Clansman

A usage example would be really helpful – Clansman

Great solution! @skyguy to use, just replace your MSStickerView with InstrumentedStickerView and make sure to set the delegate property to your class that implements InstrumentedStickerViewDelegate: stickerView.delegate = self – Jacobo

If I want to "steal" the gestures only on certain conditions, where would I have to forward the gestures to to enable select and peel interaction? – Furcate

Double tap on the sticker hangs the application in expnded mode. Does any one can help? – Weightless

@Hilton Is this Appstore safe? – Alcot

I've used it in two apps on the App Store without rejection. – Keegan

@HiltonCampbell How do I replace MSStickerView with InstrumentedStickerView?. I am currently using MSStickerBrowserViewController and cannot figure out a way to replace the MSStickerView – Autostability

I created my own view controller using a UICollectionView instead of using MSStickerBrowserViewController. – Keegan

@HiltonCampbell I wanted to add in-App purchase on the sticker is this possible to add and pop up for purchase the sticker? – Kerns

Assuming you've created a custom UI, I think you could cover the sticker with a transparent button and respond to that to display the pop up. – Keegan

Answer 2

This is a workaround for sticker peeled and tapped events, it is not guaranteed that a particular sticker will be inserted but an approximation of such data points - you will have to use your subclass of MSStickerView. This solution is not futureproof, but works for the time being IMHO, therefore I welcome other ideas.

import UIKit
import Messages

class CustomStickerView : MSStickerView{
    class GestureRecognizerReceiver : NSObject, UIGestureRecognizerDelegate{
        func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
            return true
        }
    }
    let _recognizerDelegate = GestureRecognizerReceiver()

    weak var _recognizer: UITapGestureRecognizer? = nil
    func setupTapRecognizer(){
        if _recognizer == nil {
            let r = UITapGestureRecognizer(target: self, action: #selector(_customTapReceived))
            r.cancelsTouchesInView = false
            r.delegate = _recognizerDelegate
            addGestureRecognizer(r)
            _recognizer = r
    }
}

    func _customTapReceived(){
        if let s = sticker{
            Analytics.shared.reportEvent(name: "Sticker Inserted", description: s.localizedDescription)
        }
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        if let s = sticker{
            Analytics.shared.reportEvent(name: "Sticker Peeled", description: s.localizedDescription)
        }

    }
}

Usage:

let sv = CustomStickerView(frame: _stickerViewHolder.bounds, sticker: sticker)
sv.setupTapRecognizer()
_stickerViewHolder.addSubview(sv)
sv.startAnimating()

Nereidanereids