iMessage – Basic sticker App

Introduction

With latest iOS 10,Apple added new feature for third party developer called iMessage apps.Using that developer can make their own apps.

Apple has added new section [iMessage apps] at iTunes. This is only related to iMessage. iMessage apps will only be available on iOS, their content will still be viewable on macOS and watchOS devices.

iMessage extension has similar functionalities like photos, keyboard etc. extension. Only difference is that iMessage App Store exists on its own inside the Messages app, you can create an iMessage app without having to create an iOS app that goes on the user’s home screen.

Basic Sticker Packs

For people who just want to create a quick and easy iMessage sticker pack, Xcode provides a template to do so without having to write any code at all! This will be a great tool to enable graphic artists with no programming knowledge at all to create a sticker pack.

Messages framework supports three sticker sizes, which are displayed in a grid-based browser. In the Xcode Attributes inspector, pick one of the following sizes for your sticker pack:

Small. 100 x 100 points @3x (300 x 300 pixels).
Medium. 136 x 136 points @3x (408 x 408 pixels).
Large. 206 x 206 points @3x (618 x 618 pixels).

For optimal quality and performance, it provides sticker images of the size you choose.

There are, however, some limitations to the images you can use in your sticker packs:

The image must be a PNG, APNG, GIF, or JPEG fle.

The fle must be less than 500 KB.

For the best results, the image should not be smaller than 100 x 100 points or larger than 206 x 206 points.

Note

Always provide @3x images (300 x 300 pixels to 618 x 618 pixels). The system generates the @2x and @1x versions by downscaling the @3x images at runtime.

Step 1: Create Simple Xcode Project

For this demo, first I have created a Xcode project by selecting ‘Sticker Pack Application’ template type.

Screen_1

Step 2: Adding Stickers

Now open Stickers.xcstickers asset catalog in your project.

Screen_2

This folder will contain your iMessage application icon and all of the stickers in your pack.

Adding stickers to your application is as easy as dragging them into the Sticker Pack folder of your asset catalog.

If you want to add in an animated sticker using a series of images, you can right click in your Sticker Pack folder and choose the New Sticker Sequence option. With this in your sticker pack, you can drag to reorder individual frames.

Screen_3_2

Screen_3_1

Now open Attributes inspector of asset catalog in your project. You can change the name of your sticker pack and also the sticker size you are using.

Screen_4_2

Screen_4_1

Step 3: Run

Simply press the play button in the top-left corner of Xcode or press Command-R on your keyboard. Once the simulator has launched the Messages app, press on the app store button at the bottom of the screen to access your iMessage applications.

Once your app has been loaded you should see the stickers that we added are available to use and send.

Screen_5_1

Tapping on either of these stickers will add it to the current message, and from here you can press send.

Screen_5_2

It is very quick and easy to create sticker packs for iMessage in iOS 10 without needing to use any code at all.

output_1

Custom Sticker Applications

Step 1: Create Simple Xcode Project

For this demo, frst I have created a Xcode project by selecting ‘iMessage Application’ template type.

Screen_6

Once Xcode has created your project, you will see that you now have folders similar to that of an iOS app with an additional MessagesExtension folder.

The folder we are going to focus on is the MessageExtension folder, which at the moment contains the following fles:

MessagesViewController.swift which is the root view controller for your iMessage app’s UI.

MainInterface.storyboard where you can design your app’s interface easily.

Assets.xcassets which contains your iMessage app’s icon fles as well as any other image assets you need to use in your interface.

Info.plist for confguration values of your extension.

Step 2: Create Interface

For our example custom sticker application, we are just going to create our interface programmatically using the new MSStickerBrowserViewController class.

Open up your MessagesViewController.swift fle, and you will frstly see that your MessagesViewController class is a subclass of MSMessagesAppViewController, which itself is a subclass of UIViewController. All of UIKit is available for you to use in your iMessage applications.

The MessagesViewController class provides many callback methods which you can override to further customise the functionality of your application, but we don’t need to worry about these in this tutorial.

Now add MSStickerBrowserViewDataSource protocol.

Step 3: Adding Stickers

Drag the image fles into your project, and make sure that they are added to the MessagesExtension target. The fles need to be added to the target rather than to an asset catalog because that way we can load them from a URL, which is much easier when working with custom stickers.

Screen_7

Once you have added these fles, add the following code to your
MessagesViewController class:

With this code we simply create an MSSticker array to store our stickers and a function to load them from the local storage.

Next, add the following method to your class:

With this code, we create an instance of the MSStickerBrowserViewController class and add this as a child of the root view controller in addition to constraining it to the full available height and width.

Next, we need to implement the required MSStickerBrowserViewDataSource methods to provide the necessary sticker information. To do so, add the following methods to your code:

Lastly, so that all of our code is actually executed, replace your viewDidLoad method with the following:

Step 4: Run

Screen_8

output_2

In this tutorial, we only loaded local sticker images into our custom application for simplicity. One of the main advantages to using a custom sticker application, however, is that you can load sticker images from a remote server and even, through the use of other view controllers before showing your MSStickerBrowserViewController, let your users create their own stickers.

Custom Applications

In the last part of this tutorial, we are going to create a very basic iMessage application in order to create a unique message.

Step 1: Create Simple Xcode Project

For this demo, frst I have created a Xcode project by selecting ‘iMessage Application’ template type.

Screen_6

Step 2: UI

Once Xcode has created your project, Open up your MainInterface.storyboard fle in MessageExtension folder.

Remove default label and add as shown:

Screen_9

Please note that for your iMessage app to appear correctly on all device sizes, you will need to implement auto layout in your interfaces. In this example, I have constrained the button to the centre of the view controller.

Next open up the Assistant editor with your MessagesViewController.swift fle to create and give a touch up inside action for your button:

Firstly, I need to introduce you to a few classes that are crucial when creating an iMessage app:

MSConversation: represents the currently open conversation. You can use this class in order to manipulate the conversation transcript, for example by inserting messages or getting the currently selected message.

MSMessage: represents a single message, whether created by you to insert into the conversation or already existing in the conversation.

MSMessageTemplateLayout: creates a message bubble for you to display your custom message in. As shown in the below image, this template layout has many properties and places for you to put your own content in order to customise your messages.

Screen_MSMessageTemplateLayout

It is important to note that the space in the top left of this layout will be flled by your iMessage app’s icon. Also, all of these properties are optional, and providing no caption strings at all will get rid of the bottom portion of the layout.

Add following method to your MessagesViewController class:

You will see that with this code, we frstly create the message layout and set the image and caption properties. Next, we create our MSMessage object to insert into the conversation.

Step 3: Run

Run your application and you will see an interface similar to the following:

Screen_10_1

Once you press the Create Message button, you should then also see the message layout bubble shown in the entry feld and available to send:

Screen_10_2

output_3

More Reference

Messages framework:

https://developer.apple.com/reference/messages

mm

Sandeep Joshi iOS Developer

I’m Sandeep Joshi - an iOS developer at Yudiz Solutions Pvt. Ltd. - a leading iPhone App Development company. I am ambitious and intensely interested in what I do. You'll quickly find that I do not merely develop software - I develop highly maintainable, elegant code that will save you enormous sums in the long run.

Leave a Reply

Top