▲点击上方“ CocoaChina ”关注即可免费学习iOS开发

译者：Mugworts

链接：http://www.jianshu.com/p/8d8844f621b2

原文作者：Davis Allie

原文地址：https://code.tutsplus.com/tutorials/create-an-imessage-app-in-ios-10--cms-26870

介绍

随着iOS10的发布,苹果对开发者开放了Messages应用程序,开发人员现在可以创建他们自己的各种类型 并且可以内联iMessage内容的 iMessage apps,包含简单的表情包到可以交互的复杂界面。

在这个教程中, 我将会为你介绍新的framework--Messages framework, 并且为你展示如何创建属于自己的iMessage Apps; 这个教程的前提是你在OS X El Capitan或以上版本中运行xcode8。

1. 生态系统(Ecosystem)

iMessage APP生态系统开始于一个完整的App Store,用户通过Message 应用程序都可以访问。这家App Store是完全独立于之前的应用商店,并将只显示iMessage-related应用。

iMessage apps的存在在一定程度上延展了印象中的iOS应用程序, 比如表情包(斗图岂能少了表情包)和自定义键盘;最重要的不同在于,这个iMessage App Store 只存在于系统Messages之中, 你创建iMessage APP 不需要像创建iOS APP那样显示在手机主屏幕上, iMessage应用程序创建一个扩展的有效空白和无形的iOS应用程序。然而,如果你想开发一个包含iOS和iMessage的应用,你可以创建一个像任何其他类型的扩展的iMessage扩展。

最后要说的是, 这个 iMessage apps 只有效于iOS系统, 但它的内容可以在MacOS和watchOS上显示;此外,watchOS 3的用户能够查看最近使用的表情包,并可以从苹果的手表把这些表情直接直接发给联系人。

基本的表情包

为了让开发者快速简单的创建一个iMessage 表情表, Xcode提供了一个没有任何代码的模板! 这将是一个伟大的工具,使艺术家与没有编程知识的人都可以创建一个表情包。

使用新的Messages framework 创建一个表情,你可以创建小的, 不大不小的, 大的表情, 这个尺寸,适用于所有的表情包。你只需要提供最大图像大小为每个表情在你的表情包中,如果需要缩减在某些设备上需要缩放, 系统会替你完成。

虽然没有严格限制,但是苹果建议的表情文件大小:

1. Small: 100 x 100 pt @3x scale (300 x 300 pixel image)2. Medium: 136 x 136 pt @3x scale (378 x 378 pixel image)3. Large: 206 x 206 pt @3x scale (618 x 618 pixel image)

也有其他的一些限制, 表情包的大小:

1. 文件中images不可以大于500kb;2. iamge不可以小于100 x 100 pt (300 x 300 pixels).3. iamge不可以大于206 x 206 pt (618 x 618 pixels).4. 图片格式必须是 PNG, APNG, JPEG, GIF ;

打开Xcode, 创建一个新的工程, 选择iOS > Application, 你将会看到 iMessage Application和Sticker Pack Application 的可选项, 第一个例子中, 选择Sticker Pack Application :

如果你一直照着做,并且想得到一些表情, 你可以从这里下载-- tutorial GitHub repo.

打开项目, 你会发现Xcode的左侧边栏中有个Stickers.xcstickers , 这个文件夹中包含了iMessage APP的icon 和表情, 稍后将这些表情拖拽到你的项目中的Sticker Pack 文件夹中的New Sticker Sequence;

如果你想要添加动态表情那么你添加一组图片即可, 你可以点击Sticker Pack 文件夹, 选择 Add Assets > New Sticker Sequence 这个选项, 在这个表情包中, 你可以再次设置;

注意一定要按步骤添加图片

最后, 你如果想要更改表情包得默认名称和大小, 你可以在右侧Attributes inspector 中更改;

测试你的表情包

测试表情包, CMD + R即可, 也可以点击左上角的运行按钮, 然后模拟器会弹出如下菜单:

选择Message然后点击run按钮, 模拟器展示出Message应用, 点击APP store按钮, 即靠近输入框的按钮;

你的表情包将会展示在最前边,你会发现两个表情并且可供使用和发送;

点击任何一个表情, 它将会被添加在当前的信息中,

正如你所看到的, 在iOS10中你可以快速简单的创建表情包并且不需要任何代码;

自定义标签应用

处于用户的需要,基本的表情应用程序提供的模板可能不完全满足需求;处于这个原因, 苹果也提供了一种方法来使你创建更为复杂的标签应用程序;如果你想一块做这个APP, 那么创建一个项目CustomStickerPack, 这次选择iMessage Application模板;

创建完这个空的工程, 你会看到类似iOS APP的文件列表, 但多了一个MessagesExtension文件夹, 最上边的CustomStickerPack文件夹包含Assets.xcassets和Info.plist文件,重要的是,你提供所有正确的大小的应用程序图标在这个Assets.xcassets目录,因为iOS也将使用它,例如用户的存储使用的设置。

我们集中精力在MessageExtension文件下,

1. MessagesViewController.swift : iMessage app的程序入口;
2. MainInterface.storyboard: 可视化操作;
3. Assets.xcassets: 图片集合;
4. Info.plist : 配置一些扩展信息;

在我们的例子中, 我们创建MSStickerBrowserViewController这个类;

打开MessagesViewController.swift , 你会发现它是MSMessagesAppViewController的子类, 而再往上看父类就是UIViewController, 这意味着在iMessage APP中都符合UIKit的标准;

这个MSMessagesAppViewController类提供了许多回调函数, 你可以覆盖他们, 进一步定制应用程序的功能,但是我们先不需要这些;接下来先配置MSStickerBrowserViewDataSource协议;

class MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource {

    ...

}

之前我们可以展示我们的表情, 我们需要添加文件到我们的工程并且加载他们;拖拽之前用过的图片文件夹到工程中;并且确保他们添加到MessagesExtension这个目标中,因为这个路径将会作为URL来加载他们, 当加载表情时使用使用更加简单;

接下来在MessagesViewController中创建一个MSSticker数组来存储我们的表情包, 并写一个方法来总本地加载他们;

如下代码:

var stickers = [MSSticker]()func loadStickers() {        for i in 1...2 {//语法变了
            if let url = Bundle.main.url(forResource: "Sticker \(i)", withExtension: "png") {                do {                    let sticker = try MSSticker(contentsOfFileURL: url, localizedDescription: "")
                    stickers.append(sticker)
                } catch {                    print(error)
                }
            }
        }
    }

然后在这个类中添加createStickerBrowser, 我们初始化一个MSStickerBrowserViewController作为根视图, 并设置宽高约束:

func createStickerBrowser() {    let controller = MSStickerBrowserViewController(stickerSize: .large)

    addChildViewController(controller)
    view.addSubview(controller.view)     //语法变了
    controller.stickerBrowserView.backgroundColor = UIColor.blue
    controller.stickerBrowserView.dataSource = self

    view.topAnchor.constraint(equalTo: controller.view.topAnchor).isActive = true
    view.bottomAnchor.constraint(equalTo: controller.view.bottomAnchor).isActive = true
    view.leftAnchor.constraint(equalTo: controller.view.leftAnchor).isActive = true
    view.rightAnchor.constraint(equalTo: controller.view.rightAnchor).isActive = true}