IMessage MSSticker view created from UIView incorrect sizing

Question

Hey I have been struggling with this for a couple of days now and can't seem to find any documentation out side of the standard grid views for MSStickerView sizes

I am working on an app that creates MSStickerViews dynamically - it does this via converting a UIView into an UIImage saving this to disk then passing the URL to MSSticker before creating the MSStickerView the frame of this is then set to the size of the original view.

The problem I have is that when I drag the MSStickerView into the messages window, the MSStickerView shrinks while being dragged - then when dropped in the messages window, changes to a larger size. I have no idea how to control the size when dragged or the final image size

Heres my code to create an image from a view

extension UIView {
    func imageFromView() -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.isOpaque, 0.0)
           defer { UIGraphicsEndImageContext() }
           if let context = UIGraphicsGetCurrentContext() {
               self.layer.render(in: context)
               let image = UIGraphicsGetImageFromCurrentImageContext()

               return image
           }
           return nil
       }
}

And here's the code to save this to disk

extension UIImage {
    func savedPath(name: String) -> URL{
        let paths = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)
        let filePath = "\(paths[0])/name.png"
        let url = URL(fileURLWithPath: filePath)
        // Save image.
        if let data = self.pngData() {
            do {
                try data.write(to: url)
            } catch let error as NSError {

            }
        }
        return url
    }
}

finally here is the code that converts the data path to a Sticker

if let stickerImage = backgroundBox.imageFromView() {
        let url = stickerImage.savedPath(name: textBox.text ?? "StickerMCSticker")
        if let msSticker = try? MSSticker(contentsOfFileURL: url, localizedDescription: "") {

            var newFrame = self.backgroundBox.frame
            newFrame.size.width = newFrame.size.width
            newFrame.size.height = newFrame.size.height

            let stickerView = MSStickerView(frame: newFrame, sticker: msSticker)

            self.view.addSubview(stickerView)
            print("** sticker frame \(stickerView.frame)")
            self.sticker = stickerView
        }
    }

I wondered first off if there was something I need to do regarding retina sizes, but adding @2x in the file just breaks the image - so am stuck on this - the WWDC sessions seem to show stickers being created from file paths and not altering in size in the transition between drag and drop - any help would be appreciated!

user499846 user499846 · Accepted Answer · 2020-06-15T10:16:15

I fixed this issue eventually by getting the frame from the view I was copying's frame then calling sizeToFit()-

  init(sticker: MSSticker, size: CGSize) {
        let stickerFrame = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        self.sticker = MSStickerView(frame: stickerFrame, sticker: sticker)
        self.sticker.sizeToFit()
        super.init(nibName: nil, bund

as the StickerView was not setting the correct size. Essentially the experience I was seeing was that the sticker size on my view was not accurate with the size of the MSSticker - so the moment the drag was initialized, the real sticker size was implemented (which was different to the frame size / autoLayout I was applying in my view)

IMessage MSSticker view created from UIView incorrect sizing

1 Answers