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几种。
而我们需要用做表情包的图片就放在Sticker Pack下了
右侧是整个Sticker Pack的属性,如图所示,可以选择小图(100*100@3x),中图(136*136@3x),大图(206*206@3x),这里的尺寸表示在选择表情时展示的尺寸,并不是发出去的表情尺寸!!!
如它提示所说的,可以把静态图片一一拖到右侧空白处即可加入。如果要加入gif图片,则右键-->Add Assets-->New Sticker Sequence,这样就创建一个空的帧动画,选中,此时可以在下部一帧帧加入图片,同时,右侧属性栏可以更改gif属性:名字,频率什么的,gif动画可以不需要运行项目直接点击播放查看
此时,需要做的就已经完成了,不需要任何编码,在模拟器上选择运行,直接可以看到运行效果。一个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