ios 10 开发－使用 Extension创建iMessage App & Sticker Pack Application

最新推荐文章于 2020-06-13 14:44:10 发布

zzzzzdddddxxxxx

最新推荐文章于 2020-06-13 14:44:10 发布

阅读量4.4k

点赞数

分类专栏： iOS

iOS 专栏收录该内容

261 篇文章 0 订阅

订阅专栏

第一. 介绍

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

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

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

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
}

然后我们需要实现MSStickerBrowserViewDataSource必须要实现的代理方法;

func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int {
    return stickers.count
}

func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker {
    return stickers[index]
}

最后, 所有的代码都已经完成, 替换viewDidLoad中的代码:

override func viewDidLoad() {    super.viewDidLoad()

    loadStickers()
    createStickerBrowser()
}

像之前那样运行APP, 一旦一切都完成加载, 应该会看到一个完全相同的屏幕除了蓝色背景, 除了蓝色的背景色;

在这个教程中, 我们只是加载了应用程序中的图片,但好的是我们可以自定义标签应用程序了, 然而, 你可否加载网络服务器呢? 在展示你的MSStickerBrowserViewController之前,可以通过使用别的view controllers来实现的; 再继续一步吧!

自定义APP

在最后一节, 我们将创建一个非常基本的iMessage应用程序来创建一个独特的消息。;

如果你愿意一块继续完成这个目标, 打开xcode创建一个MessageApp, 打开MainInterface.storyboard,删除默认的label, 添加一个stepper和一个button, 如下图:

请注意,为了让你的iMessage APP的视图位置正确展示在所有的设备中, 你需要添加布局约束, 在这个例子中我已经设置了stepper在视图中间, 这个button在视图的下侧;

然后, 选择stepper打开Attributes inspector, 改变最小最大值为0和10:

接着在 Assistant editor 中打开MessagesViewController.swift并链接起来;

@IBOutlet weak var stepper: UIStepper!@IBAction func didPress(button sender: AnyObject) {

}

接下来, 写代码的时刻到啦, 第一步我介绍一些用到的类:

1. MSConversation: 代表了当前打开的对话。可以使用这个类来操作一些步骤,例如通过插入消息或当前选择的信息;
2. MSMessage: 代表单个消息,判断是否由你插入对话或已经存在的对话;
3. MSMessageTemplateLayout: 创建一个消息气泡,如下图, 里边有许多属性和空间来提供给你来自定义message;

特别提醒, 左上角的空间是展示你的icon, 所有的属性都是可选的, 提供任何标题字符串将摆脱底部部分的布局。

在MessagesViewController.swift中修改如下代码:

在这个方法中, 我们将当前的stepper的数值显示到圆形的label中, 然后将label放在UIImage对象中, 以便于我们可以在message中捕获到;

func createImageForMessage() -> UIImage? {
        let background = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
        background.backgroundColor = UIColor.white

        let label = UILabel(frame: CGRect(x: 75, y: 75, width: 150, height: 150))
        label.font = UIFont.systemFont(ofSize: 56.0)
        label.backgroundColor = UIColor.red
        label.textColor = UIColor.white
        label.text = "\(Int(stepper.value))"
        label.textAlignment = .center
        label.layer.cornerRadius = label.frame.size.width/2.0
        label.clipsToBounds = true

        background.addSubview(label)
        background.frame.origin = CGPoint(x: view.frame.size.width, y: view.frame.size.height)
        view.addSubview(background)

        UIGraphicsBeginImageContextWithOptions(background.frame.size, false, UIScreen.main.scale)
        background.drawHierarchy(in: background.bounds, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        background.removeFromSuperview()

        return image
    }

接下来在didPress(button:) 中修改为如下代码:

首先创建message的布局, 并且设置image和caption, 接着我们创建MSMessage对象并插入到会话中;

@IBAction func didPress(button sender: AnyObject) {
        if let image = createImageForMessage(), let conversation = activeConversation {
            let layout = MSMessageTemplateLayout()
            layout.image = image
            layout.caption = "Stepper Value"

            let message = MSMessage()
            message.layout = layout
            message.url = URL(string: "emptyURL")

            conversation.insert(message, completionHandler: { (error) in
                print(error)
            })
        }
    }

要注意, 在iMessage中自定义message必须要设置layout和URL, 这个URL是链接某个web页面的一些内容, 进而MacOS用户可以看到iMessage的内容, 在这个例子中, 我们只是创建了简单的字符URL;

最后我们将这个message插入到当前活动的会话中, 调用这个方法不会发送信息, 相反,它把你的信息在用户的输入字段,以便他们可以发送。

再次运行APP, 你会看到如下界面:

14.png

你点击Create Message按钮, 你会发现message的位置在输入框中间, 并且可以被发送;

总结

在这个教程中, 我将你介绍了iOS10中新的Messages framework, 允许你创建表情包和iMessage应用程序, 我们重写了基础的类, 包括:MSStickerBroeserViewcontroller, MSConversation, MSMessage, MStemplateMessageLayout;

这个框架许多API来开发自己的iMessage APP, 更进一步, 我会推荐你查看苹果的文档-- Messages Framework Reference.

文章转自 Mugworts的简书

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

iMessage app API详细解读：

iMessage app使用完整的框架和Message app进行交互。使用iMessage app能够

在消息应用内呈现一个自定义的用户交互界面。使用 MSMessagesAppViewController
创建一个自定义或者动态的表情包浏览器。使用 MSStickerBrowserViewController
添加文本、表情、或者媒体文件到消息应用的文本输入框。使用 MSConversation
创建带有特定的应用数据交互的消息。使用 MSMessage
更新可以相互影响的消息(例如，创建游戏或者可以合作的应用)。使用 MSSession

我们可以通过iMessage完成以上五种事情，下面分别来说：

新建一个空白应用后，会有一个MessagesViewController，继承自MSMessagesAppViewController，这个是我们看到啊的主页，在这里进行自定义界面的创建。

同时还有几个方法

//当拓展从不活动进入到活动状态时会被调用，这个会发生在呈现UI的时候。使用这个方法来配置拓展和恢复之前的状态。
-(void)willResignActiveWithConversation:(MSConversation *)conversation 
//当拓展从活动进入到不活动时会被调用。这个会发生在界面消失、改变会话或者退出Message应用时。使用这个方法来释放共有的资源、存储用户数据、注销timer和存贮足够的状态信息来当它崩溃时可以来恢复你的拓展的状态.
-(void)didBecomeActiveWithConversation:(MSConversation *)conversation

//这个方法当接收到一个从对方发送并且是通过此拓展发送的消息时会被调用。用这个方法来触发UI更新来相应这个消息.
-(void)didReceiveMessage:(MSMessage *)message conversation:(MSConversation *)conversation 
//点击发送按钮时会被调用
-(void)didStartSendingMessage:(MSMessage *)message conversation:(MSConversation *)conversation 
//当用户删除而不发送消息时调用.使用这个方法来清理相关删除消息状态。
-(void)didCancelSendingMessage:(MSMessage *)message conversation:(MSConversation *)conversation

//在拓展从一个过渡到一个新的外观状态前会被调用.使用这个方法来为改变外观状态做准备
-(void)willTransitionToPresentationStyle:(MSMessagesAppPresentationStyle)presentationStyle 
//在拓展已经过度到新的外观状态后会被调用。使用这个方法来完成与外观风格变化有关的任何行为.
-(void)didTransitionToPresentationStyle:(MSMessagesAppPresentationStyle)presentationStyle

MSStickerBrowserViewController自带拖动添加、长按预览、点击添加。使用这个类来自定义表情浏览器的话，可定制性会更高，她可以根据data source来动态改变数据，也可以自定义每个贴纸的大小。创建后需要实现它的两个代理 numberOfStickersInStickerBrowserView: 和 stickerBrowserView:stickerAtIndex: 来返回相应的内容。

需要注意的是1.内容要是本地图片 2.表情的大小是可以调整的，但是还是只支持是三种样式
MSConversation

如果想要发送其他内容可以使用MSConversation来进行操作.

当前MessagesViewController中包含了一个当前的conversation->activeConversation

发送消息时可以通过如下方法

//文件
-insertAttachment:withAlternateFilename:completionHandler:
//消息
-insertMessage:localizedChangeDescription:completionHandler:
//表情
-insertSticker:completionHandler:
//文本
-insetText:completionHandler:

这些方法在发送相应内容的时候进行调用，需要注意的是，这里进行的不是发送消息，而是将消息添加到文本框，用户还需要自己点击发送按钮进行发送.

除了文本和贴纸外，还要说下MSMessage对象，他可以包含特有的数据、持有一个会话、让参与者更新消息，但是这个对象的呈现需要layout属性.

其中有一个URL属性，这个属性要求是一个HTTP(S)链接或者是一个数据URL。要是一个有效的链接，如果是一个网址，那么会在浏览器中加载。

layout属性必须是MSMessTemplateLay，并且你不能在创建子类或者新建MSMessageLayout。消息模板包含消息扩展的图标，图像，视频或音频文件，以及一些文本元素（标题，副标题，标题，subcaption，尾随标题和尾随subcaption）。如下图

需要注意的是，发送的内容必须是本地内容，而且MSMessageTempLayout的mediaFileURL属性会在设置image属性后被忽略.

selectedMessage

想要实现具备特殊交互的，除了发送类型是MSMessage消息外，还需要处理点击事件.

*. 如果用户点击了拓展消息中的一个，这个属性会被设置成当前消息，否则会被设置成nil。

*. 如果你的拓展因用户点击消息而启动，那么这个属性会被设置成拓展启动时的消息。可以在 didBecomeActiveWithConversation 中监听

*. 如果用户在你的拓展运行时点击消息，这个属性的值会改变。可以在 willTransitionToPresentationStyle 中监听

*. 页使用KVO来监听这个属性来响应相应的变化. (其实说实话，这个我没能实现)

应用的数据可以在message的url属性来解析。

如果消息与会话关联，你可以使用用一个会话实力一个新的消息来更新消息。使用conversation的 insertMessage:localizedChangeDescription:completionHandler: 方法来发送新消息。当用户发送消息时，系统将其移动到底部，并更新其内容。

你还可以保存相应内容.

zzzzzdddddxxxxx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ios 10 开发－使用 Extension创建iMessage App & Sticker Pack Application

第一. 介绍随着iOS10的发布,苹果对开发者开放了Messages应用程序,开发人员现在可以创建他们自己的各种类型并且可以内联iMessage内容的 iMessage apps,包含简单的表情包到可以交互的复杂界面。在这个教程中, 我将会为你介绍新的framework--Messages framework, 并且为你展示如何创建属于自己的iMessage Apps;
复制链接

扫一扫