使用 Xcode 8 為 iMessage 創建表情包插件

作者:SIMON NG,原文鏈接,原文日期:2016-06-20
譯者:小袋子;校對:Cee;定稿:Channe

WWDC 2016 上最重磅的消息之一就是在 iOS 10 中引入了 Message 框架。開發者現在可以為蘋果內置的 Messages 應用開發擴展啦。通過開發一個應用擴展,你可以讓用戶跟應用在 Messages 應用中交互。例如,你可以開發一個 Message Sticker Extension 允許用戶跟朋友交流時發送表情貼紙。如果你已經開發了一個圖片編輯的應用,那么你可以開發一個擴展,這樣用戶就可以在 Messages 應用內部編輯圖片了。擴展的支持為很多應用開發者提供了大量的機會。蘋果甚至為 iMessage 引入了 App Store,所以你可以在商店內售賣專門為 iMessage 開發的應用擴展。

為 Messages 開發一個應用擴展,你需要使用新的 Message 框架。這個框架支持以下兩種類型的擴展:

  • Sticker packs(注:表情包)
  • iMessage apps

在這個教程里,我將會教你如何通過這個框架開發一個 sticker pack。而之后,我們將會稍微深入地了解下如何開發一個 iMessage app。

無論你要開發什么樣類型的擴展,首先你需要使用 Xcode 8。在我寫這篇文章的時候,Xcode 8 還是測試版。如果你還沒安裝工具,可以從 這里下載 并安裝到你的電腦上。即使你已經安裝了 Xcode 7,你仍然可以保留當前的版本并且安裝新的 Xcode。

在繼續下一步之前,我必須夸一下蘋果,因為他讓 sticker pack 的開發非常簡單。即使你不會任何 Swift 編程經驗,你也能夠創建你自己的 sticker pack,因為你不需要寫一行代碼。跟著這篇教程學會如何創建一個 Sticker Extension。

創建一個 Sticker Pack 項目

首先,打開 Xcode 8 然后創建一個新的項目。Xcode 8 已經為 Message Extension 準備了幾個項目模板。如果是 sticker pack,選擇 iOS > Application > Sticker Pack Application.

然后,輸入項目名稱。在這個項目里,我使用 CuteSticker ,但是你可以使用任何你喜歡的名稱。

為 Sticker Pack 添加圖片

一旦你創建了項目,你將會在 project navigator 里看到兩個文件。點擊 Stickers.xcstickers 然后選擇 Sticker Pack 文件夾,這是存放圖片文件的地方。如果你想做 demo 你可以下載這個圖片包,或者使用你自己的圖片。但是請注意圖片必須是 PNG(首選)、APNG、GIF 或者 JPG 格式,并且大小不超過 500KB。

假設你已經下載了我們的圖片包,在 Finder 里面解壓。然后選擇所有的圖片,并將他們拖到 Sticker Pack 文件夾。

聲明:這個圖片表是由 pixeden.com 提供的。

此外,你還可以隨意地選擇 sticker 的尺寸。選擇 Sticker Pack 文件夾,然后選擇 Attributes inspector。sticker 的默認尺寸為 Medium,你可以改為 SmallLarge。在這個 demo 里面,我只是用了默認設置。

添加應用圖標

最后,你的表情包必須有一個應用圖片。同樣滴,由于是 demo,我已經準備了樣例應用圖標,你可以在這里下載。如果你想要創建自己的圖片,確保你準備好了不同尺寸的圖標:

  • Messages App Store:1024×768 points (@1x)
  • Messages:27×20 points (@1x, @2x, @3x)
  • Messages:32×24 points (@1x, @2x, @3x)
  • iPhone/iPad 設定:29×29 points (@1x, @2x, @3x)
  • Messages(iPhone):60×45 points (@2x, @3x)
  • Messages(iPad):67×50 points (@1x, @2x)
  • Message(iPad Pro):74×55 points (@2x)

為了簡化圖片準備工作,你可以從蘋果官網下載 iMessage App Icon 模板

在你下載完我們的 演示應用圖標包 后,解壓并將所有圖標拖到 iMessage App Icon 下。

測試 Sticker Pack

好了!現在你已經為 Message 創建了一個表情包了,是時候來測試了。你不需要一臺 iOS 10 設備去測試,Xcode 提供了內置的模擬器來測試 iMessage 應用擴展。選擇一個模擬器設備(如:iPhone 6)然后點擊 Run 按鈕開始測試。

由于 Sticker pack 是一個應用擴展,所以你可以把它當做一個獨立的應用,并且必須運行在 Message 應用里面。所以當 Xcode 詢問你選擇哪個應用來運行時,選擇 Message 應用。然后點擊 Run。

當模擬器登錄完了, Message 將會直接打開。點擊擴展按鈕,你可以找到你的 sticker pack。如果你點擊左下菜單,將會顯示你的 Sticker pack,當然這也是內置的。

在模擬器里,Message 有兩個模擬用戶,選擇一個表情發送,然后回到 messageuser2,你可以看到 messageuser1 發送的表情。

使用動畫圖片來自增強 Sticker Pack

你不僅僅可以在 Sticker Pack 里面綁定靜態圖片,并且可以讓你簡單地添加動態圖片到表情包里。如果你已經有一些 像這樣的 GIF 或者 APNG 圖,簡單地添加圖片到表情包里。Xcode 將會識別并展示動畫。

創建動圖的另外一個替代方案是創建一個 sticker 序列。回到你的 sticker pack,在任意空白處右擊,選擇 Add Assets > New Sticker Sequence。這個將會創建一個讓你添加圖片隊列的 sticker 序列。

作為示例,你可以下載 這個圖片包。解壓并添加到 sticker 序列。Xcode 允許你在 sticker pack 的右邊預覽動畫。

總結

你已經學會了如何在 Message 應用內使用 Xcode 8 創建一個應用擴展。正如你所見,你不需要寫哪怕一行代碼去創建一個 sticker pack。你僅需要做的就是準備好圖片(動態或者靜態),然后就可以開始制作表情包啦。

同時,Xcode 8 和 iOS 10 仍然是測試版。你還不能將你的 sticker pack 上傳到 Message App Store。但是這是你開始創建屬于你自己的表情包的絕佳時機。當 iOS 10 正式發布好了,你就掌握了先機。

Sticker pack 只是 iMessage 應用的一種擴展。在下一篇的教程里,我們將會學習如何去創建一種更復雜的 Message 擴展。敬請關注。

作為參考,你可以從這里下載 完整的 Xcode 項目

本文由 SwiftGG 翻譯組翻譯,已經獲得作者翻譯授權,最新文章請訪問 http://swift.gg

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容