时值中秋佳节,送给出门在外的程序猿们!

骚年们,自己写个表情包斗图可否!

iOS 10 创建iMessage App 1

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 1

斗-seal




1、介绍

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

在这个教程中,我将会为你介绍新的framework——Messages framework,并且为你展示如何创建属于自己的iMessage Apps。

这个教程的前提是你在OS X El Capitan或以上版本中运行Xcode8,并且有一定的iOS开发经验;如果你是刚开始学习iOS开发,你可以先学习这个课程iOS From Scratch With Swift;在这系列中,你将了解如何开始开发iOS平台的深入的文章和教程。



1.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的用户能够查看最近使用的表情包,并可以从苹果的手表把这些表情直接直接发给联系人。





2、基本的表情包

为了让开发者快速简单的创建一个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 ApplicationSticker Pack Application 的可选项,第一个例子中,选择Sticker Pack Application

iOS 10 创建iMessage App 2

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 2


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

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

iOS 10 创建iMessage App 3

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 3


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

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

iOS 10 创建iMessage App 4

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 4


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

iOS 10 创建iMessage App 5

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 5




2.1、测试你的表情包

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

iOS 10 创建iMessage App 6

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 6


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

iOS 10 创建iMessage App 7

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 7


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

iOS 10 创建iMessage App 8

iOS 10 创建iMessage App,开发表情包,卖给老美,赚美元! - 敏捷大拇指 - iOS 10 创建iMessage App 8


点击任何一个表情,它将会被添