WWDC 2016在发布ios10的同时,给出了一个有趣的东西iMessage App。iMessage App顾名思义,就是能在iMessage中运行的应用程序。

相关视频链接:

iMessage Apps and Stickers,Part1

iMessage Apps and Stickers,Part2

iMessage App主要可以提供三种类型的内容:Stickers;Interactive messages;其他常用的消息内容:图片,视频,文本,链接等等。iMessage App可以从iMessage App Store中获得。

iMessage App只能在ios10上运行,Mac与iWatch也可以接受并展示消息。iWatch可以做到像iPhone一样发送Stickers。

可以在现有的项目中添加iMessage App,当项目被提交App Store时,系统也会自动的把它加入到iMessage App Store。同时,也可以就像创建一个新的iOS项目一样,单独创建一个iMessage App,它甚至支持iap,Apple Pay,访问相机等。

Stickers

Stickers的作用总的来说就是一个功能很强大的表情包,里面可以存在普通的png,也可以存在动态的gif图片,可以被当作普通的消息发送,也可以附加在已发送的消息气泡上。如果把自己应用或者游戏的图片单独拿出来做一个Sticker App,当在Message中使用这个Sticker App的人多了,那么无疑是对自己应用或者游戏的一个很强大的宣传。

Sticker App支持四种格式:PNG,APNG,JPEG,GIFs。并且限制图片大小为500kb,尺寸最好不低于300px*300px并且不大于618px*618px。建议使用PNG静态图片,APNG动态图片。因为这两种格式的图片对透明度的处理非常好,而其他两种则处理的不是那么好甚至根本没有处理,就导致当图片放大时,可能会有毛边之类的影响。

有两种方式来创建一个Sticker App。第一种,你可以通过xcode来直接创建,使用这种方式的话你只需要提供资源图片以及app icons,完全不需要编码就能实现一个Sticker App。

创建工程:Xcode-->Create a new Xcode project-->ios-->Application-->Sticker Pack Application。创建项目以后,在右侧文件目录下,找到Stickers.xcstickers。如图所示就是它的文件目录了,其中点击iMessage App Icon,可以看到它所需要的icon尺寸,大概有29*29,60*45,67*50,74*55,27*20,32*24,1024*768几种。

ios系统信息app 苹果信息app_Stickers

   

而我们需要用做表情包的图片就放在Sticker Pack下了

ios系统信息app 苹果信息app_ios系统信息app_02

右侧是整个Sticker Pack的属性,如图所示,可以选择小图(100*100@3x),中图(136*136@3x),大图(206*206@3x),这里的尺寸表示在选择表情时展示的尺寸,并不是发出去的表情尺寸!!!

如它提示所说的,可以把静态图片一一拖到右侧空白处即可加入。如果要加入gif图片,则右键-->Add Assets-->New Sticker Sequence,这样就创建一个空的帧动画,选中,此时可以在下部一帧帧加入图片,同时,右侧属性栏可以更改gif属性:名字,频率什么的,gif动画可以不需要运行项目直接点击播放查看

ios系统信息app 苹果信息app_Stickers_03

        

ios系统信息app 苹果信息app_iMessage App_04

此时,需要做的就已经完成了,不需要任何编码,在模拟器上选择运行,直接可以看到运行效果。一个Sticker App即开发完成。

Custom Stickers

Custom Stickers相比Stickers有几个优势:自定义UI;动态更新stickers;使用相机;IAP(比如说解锁stickers啥的)。


使用Custom Stickers的时候需要创建一个iMessage Application(Xcode-->Create a new Xcode project-->ios-->Application-->iMessage Application)。

如果想在已有项目中添加Sticker,需要经过File->New->Target->Application Extension->iMessage Extension来添加扩展,通过Custom Stickers的方式来添加。在ios10以后Message扩展可独立于宿主App创建,即File->New->Target->Application->iMessage Aplication(未验证)

新建的项目存在两个文件目录是开发者需要注意的:一个是以项目名称命名的目录,其下Assets.xcassets主要是设置应用icon(App Store使用)的。主要的是使用另外一个目录:MessagesExtension。可以看到,新项目已经为我们自动创建了一个继承自MSMessagesAppViewController的视图MessagesViewController,这个就是iMessage App的显示界面。但如果想要自定义Stickers的话,还需要MSStickerBrowserViewController.这个才是自定义的sticker真正显示的那个视图。

新建一个继承自MSStickerBrowserViewController的新view,命名为NatureStickerBrowserViewController,并把它添加到MessagesViewController,那么我们只需要在前者之上实现,即可。

在NatureStickerBrowserViewController里需要重写两个方法:

public protocol MSStickerBrowserViewDataSource : NSObjectProtocol {

    
    /*!
     * @abstract Returns the number of Stickers that the sticker browser should show.
     * @param stickerBrowserView The sticker browser view .
     * @result The number of stickers.
     */
    public func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int

    
    /*!
     * @abstract Returns the sticker that the sticker browser should show in the browser.
     * @param stickerBrowserView The sticker browser view.
     * @param index The index of the sticker to show.
     * @result A MSSticker object.
     */
    public func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker
}

在这个类里首先声明一个数组,把需要显示的图片都通过MSSticker方法做成sticker扔进数组里,在这两个方法里分别返回数组的长度与第index位置的sticker即可。在 MessagesViewController显示时候在viewDidLoad()中调用即可


browserViewController = NatureStickerBrowserViewController(stickerSize: .regular)
        browserViewController.view.frame = self.view.frame
        
        self.addChildViewController(browserViewController)
        browserViewController.didMove(toParentViewController: self)
        self.view.addSubview(browserViewController.view)
        
        browserViewController.loadStickers()
        browserViewController.stickerBrowserView.reloadData()
        browserViewController.changeBrowserViewBackgroundColor(color: UIColor.init(red: 1.0, green: 0.58, blue: 0.68, alpha: 1))



第一行定义了sticker的大小,名称为MSStickerSize的枚举类型,分别为:small,regular,large.倒数第三行即  需要显示的图片都通过MSSticker方法做成sticker扔进数组里 的过程,倒数第二行是刷新数据的方法,最后一行是自定义的更改视图背景颜色的方法。

可以看出,这玩意儿的用法跟tableview大概是类似的。


以上就是iMessage Apps and Stickers,Part1的主要内容,一个不用code的Stickers和一个需要很简单code的custom Stickers。最后附上NatureStickerBrowserViewController.swift的完整代码。语言呢,就跟官方视频给的一样,swift写的,并没有改为oc啥的(没错,就是懒,变量名都没变!!!)

//
//  NatureStickerBrowserViewController.swift
//  NatureStickers
//
//  Created by 陈晓光 on 16/9/30.
//  Copyright  2016年 陈晓光. All rights reserved.
//

import Foundation
import UIKit
import Messages

class NatureStickerBrowserViewController: MSStickerBrowserViewController {
    
    var stickers = [MSSticker]()
    
    func changeBrowserViewBackgroundColor(color: UIColor) {
        stickerBrowserView.backgroundColor = color
    }
    
    func loadStickers() {
        createSticker(asset: "icon_12", localizedDescription: "icon12 sticker")
        createSticker(asset: "icon_13", localizedDescription: "icon13 sticker")
        createSticker(asset: "icon_14", localizedDescription: "icon14 sticker")
        createSticker(asset: "icon_15", localizedDescription: "icon15 sticker")
        createSticker(asset: "icon_16", localizedDescription: "icon16 sticker")
        createSticker(asset: "icon_17", localizedDescription: "icon17 sticker")
        createSticker(asset: "icon_18", localizedDescription: "icon18 sticker")
        createSticker(asset: "icon_19", localizedDescription: "icon19 sticker")
        createSticker(asset: "icon_20", localizedDescription: "icon20 sticker")
        createSticker(asset: "icon_21", localizedDescription: "icon21 sticker")
        createSticker(asset: "icon_22", localizedDescription: "icon22 sticker")
    }
    
    func createSticker(asset: String, localizedDescription: String) {
        guard let stickerPath = Bundle.main.path(forResource:asset, ofType:"jpg")
            else {
            print("couldn't create the sticker path for", asset)
            return
        }
        let stickerURL = URL(fileURLWithPath: stickerPath)
        
        let sticker: MSSticker
        do{
            try sticker = MSSticker(contentsOfFileURL: stickerURL, localizedDescription: localizedDescription)
            stickers.append(sticker)
        }catch{
            print(error)
            return
        }
        
        
    }
    
    override func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int{
        return stickers.count
    }

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




后篇:ios10之iMessage App, Part2