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.
Step 2: Adding Stickers
Now open Stickers.xcstickers asset catalog in your project.
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.
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.
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.
Tapping on either of these stickers will add it to the current message, and from here you can press send.
It is very quick and easy to create sticker packs for iMessage in iOS 10 without needing to use any code at all.
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.
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.
extension MessagesViewController :
MSStickerBrowserViewDataSource{
...
}
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.
Once you have added these fles, add the following code to your
MessagesViewController class:
var arrSticker :[MSSticker] = []
func getStickers(){
for i in 1...4 {
if let url = Bundle.main.url(forResource:
"\(i)", withExtension: "gif") {
do {
let sticker = try
MSSticker(contentsOfFileURL: url,
localizedDescription: "")
arrSticker.append(sticker)
} catch {
print(error.localizedDescription)
}
} }
for i in 1...10 {
if let url = Bundle.main.url(forResource:
"Sticker_\(i)", withExtension: "png") {
do {
let sticker = try
MSSticker(contentsOfFileURL: url,
localizedDescription: "")
arrSticker.append(sticker)
} catch {
print(error.localizedDescription)
} }
} }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:
func createStickerBrowser(){
let stickerBrowserVC =
MSStickerBrowserViewController(stickerSize: .small)
addChildViewController(stickerBrowserVC)
view.addSubview(stickerBrowserVC.view)
stickerBrowserVC.stickerBrowserView.backgroundColor =
UIColor.lightGray.withAlphaComponent(0.5)
stickerBrowserVC.stickerBrowserView.dataSource = self
view.topAnchor.constraint(equalTo:
stickerBrowserVC.view.topAnchor).isActive = true
view.bottomAnchor.constraint(equalTo:
stickerBrowserVC.view.bottomAnchor).isActive = true
view.leftAnchor.constraint(equalTo:
stickerBrowserVC.view.leftAnchor).isActive = true
view.rightAnchor.constraint(equalTo:
stickerBrowserVC.view.rightAnchor).isActive = true
}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:
func numberOfStickers(in stickerBrowserView:
MSStickerBrowserView) -> Int{
return arrSticker.count
}
func stickerBrowserView(_ stickerBrowserView:
MSStickerBrowserView, stickerAt index: Int) ->
MSSticker{
return arrSticker[index]
}Lastly, so that all of our code is actually executed, replace your viewDidLoad method with the following:
override func viewDidLoad() {
super.viewDidLoad()
self.getStickers()
self.createStickerBrowser()
}
Step 4: Run
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.
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:
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:
@IBAction func btnCreateImageAction(_ sender:
UIButton!){
}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.
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.
func createImageForMessage() -> UIImage? {
let bgv = UIView(frame: CGRect(x: 0, y: 0,
width: 300, height: 300))
bgv.backgroundColor =
UIColor.lightGray.withAlphaComponent(0.5)
let lbl = UILabel(frame: CGRect(x: 50, y: 50,
width: 200, height: 200))
3)
lbl.font = UIFont.systemFont(ofSize: 56.0)
lbl.backgroundColor = UIColor.clear
lbl.textColor = UIColor.white
lbl.text = "Yudiz"
lbl.shadowColor = UIColor.orange
lbl.shadowOffset = CGSize(width: 1, height:
lbl.textAlignment = .center
lbl.clipsToBounds = true
bgv.addSubview(lbl)
bgv.frame.origin = CGPoint(x:
view.frame.size.width, y: view.frame.size.height)
view.addSubview(bgv)
UIGraphicsBeginImageContextWithOptions(bgv.frame.size,
false, UIScreen.main.scale)
bgv.drawHierarchy(in: bgv.bounds,
afterScreenUpdates: true)
let img =
UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
bgv.removeFromSuperview()
return img }
- Next, replace your btnCreateImageAction(_ sender: UIButton!) method with the following code:
if let img = createImageForMessage(), let
conversation = activeConversation {
Ltd"
let layout = MSMessageTemplateLayout()
layout.image = img
layout.caption = "Yudiz Solutions Pvt
let message = MSMessage()
message.layout = layout
message.url = URL(string:
"http://www.yudiz.com")
conversation.insert(message,
completionHandler: { (error) in
print(error ?? "Inserted
successfully")
})
}
Step 3: Run
Run your application and you will see an interface similar to the following:
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:
