如何在 Xcode 8 建立 iMessage 貼圖程式擴充

今年的WWDC2016已經在上週落幕,當中 iOS10 的 iMessage 成為一大亮點。


開發者可以為蘋果的 Messages 增建程式擴充,透過程式擴充與使用者互動。舉例說,你可以建立一個訊息貼圖擴充,容許使用者在iMessage 與朋友溝道時發送貼圖。或者,假若你在開發修圖程式,現在你可以透過擴充,讓使用者在不需要離開iMessage就可以修圖。這個功能確實為開發者帶來很大的創作空間。蘋果將會為 iMessage 設立 App Store 版面,到時候開發者就可以把製作好的程式擴充上架售賣。

為 iMessage 建立程式擴充,你便需要使用新的 Message 框架。這個框架支援以下兩類程式擴充:

  1. 貼圖包
  2. iMessage 程式

在這篇教程,我將會為你展示如何使用框架建立一個貼圖包。由淺入深,之後再了解如何開發 iMessage 程式。

不管你想開發的是哪一個類型的程式,你都須要用上 Xcode 8。以現階段,Xcode 8 暫時只推出了測試版。若果你還未下載,可以到蘋果網站 下載並安裝。即使你現時已經安裝了 Xcode 7,也可以在同一部電腦安裝 Xcode 8 而不影響原有版本的操作。

在繼續之前,我可以預告製作過程並不困難。即使沒有任何 Swift 程式設計經驗, 都可以輕易製作自己的貼圖包,而過程也不需要動用程式碼。立即開始跟隨本文學習如何建立一個貼圖擴充。

創建貼圖包專案

首先,打開 Xcode 8 並建立新專案。在新版本的 Xcode 可以看到增添了幾個為 Messages 擴充而設的專案模板。建立貼圖包,點選 iOS > Application 然後選擇 Sticker Pack Application。

messages-ext-newproject

接著,填寫專案名稱。在本教學中我使用了「CuteSticker」,當然,也可以填上各自喜歡的名稱。

messages-ext-projectoptions

為貼圖包添加圖像

一旦建立 Xcode 專案,你將會看到專案導覽器內有兩個檔案。點擊 Stickers.xcstickers,然後選擇「Sticker Pack」檔案夾,這裡將會是存放圖像的地方。以這篇教學為例,你可以在這裡下載圖像包並將它解壓縮。當然也可以使用自己的圖像,但要注意圖像的檔案類型必須是PNG(建議)、APNG、GIF 或 JPG,而大小則不超過 500KB。然後把圖像移至「Sticker Pack」檔案夾中。

messages-drag-images

鳴謝:本教學使用的免費圖像包由 pixeden.com 提供。

你也可以改變貼圖的尺寸。前往 Sticker Pack 檔案夾,然後選取 Attribute inspector。貼圖尺寸的默認設定為 Medium (中),可以視乎需要改為 Small (小)Large (大)。本教學則保持 Medium 的默認設定。

messages-sticker-size

加入程式圖示

最後,為貼圖包設置程式圖示。我已經為你準備好一個程式圖示以便在本教學裡使用,請到這裡下載並進行解壓縮。對於自訂程式圖示,可以下載蘋果的程式圖示模板,並參考下列的圖示尺寸要求:

  • 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)
  • Messages (iPad Pro):74×55 points (@2x)

最後,把所有的程式圖示檔案滑動至 iMessage App Icon 的版面。

messages-app-icon

測試貼圖包

就是這樣!現在你已經建立了一個 Messages 的貼圖包,是時候進行測試。你不需要 iOS 10 的裝置去進行測試。Xcode 提供了內置的模擬器可以測試 iMessage 程式擴充。選擇模擬裝置的型號(例如 iPhone 6)並點擊執行(Run)。

由於貼圖包是一個程式擴充,所以它並不能獨立執行。當 Xcode 詢問執行的程式時,選擇 Messages,然後再次點擊執行。

當模擬器開啟時,Messages 程式會隨即打開。點擊擴充按鈕,就能看見你所建立的貼圖。若果點擊左下角的菜單圖示,就可以看到貼圖包圖示,以及一些內置的貼圖包。

messages-stickerpack-test

在模擬器的 Messages 程式設有兩個模擬用戶。首先進入「messageuser1」,揀選並發送一個貼圖訊息。然後轉到 「messageuser2」,就能看到剛才發送的貼圖訊息。

messages-test-between-users

為貼圖包加入動畫

貼圖包不止支援靜態圖像,蘋果還讓開發者輕鬆地為貼圖包加入動畫。動態圖像支援 GIFs 或 APNGs 檔案類型,可以在這裡下載教學中使用的動畫。只要把動畫加入貼圖包,Xcode 便會自動辨認並顯示動畫。

cutesticker-animated

另一個創建動畫貼圖的方法是建立一個貼圖序列 (sticker sequence)。在 Xcode 返回貼圖包,右擊空白位置便能彈出選項菜單。然後選擇 Add Assets > New Sticker Sequence,在貼圖包裡新增一個貼圖序列框。這個方法可以把一連串的圖像透過貼圖序列功能轉化成動畫。

messages-new-sticker-sequence

同樣,你可以在這裡下載本教學使用的貼圖包。下載後進行解壓縮,並將所有圖像滑動至貼圖序列框中。這個時候把浮標放左貼圖序列框上並點擊 Play 按鈕,便能夠在 Xcode 裡預覽圖像組合出來的動畫效果。

messages-sequence-animated

結語

你已經學會如何在 Xcode 8 創建 Message 程式的程式擴充。如你所見,整個過程並不需要編寫任何程式碼,你只需要準備圖像(動畫或靜態)便能建立一個貼圖包。

然而,Xcode 8 和 iOS 10 仍在測試階段,開發者暫時仍未能把貼圖包上載至 Messages App Store。但現在卻是練習的好時機,待 iOS 10 在秋季正式推出之時,便能早著先機推出自己製作的貼圖包。

貼圖包只是 iMessage 的其中一個程式擴充。在下一篇教學,我們將會學習如何製作更複雜的 Messages 擴充。請密切留意 Appcoda 的面書專頁

供你參考,請從 GitHub 下載本文完整的 Xcode 專案。

想知道更多 iOS 10 的新功能和APIs?立即購買我們的Swift教程書本(英文版)。現在購買,當 iOS 10 在秋季正式推出後,可享一次書本內容免費更新。
譯者簡介:小秘,業餘博客,翻譯新手,最愛睡覺,喜歡旅遊。

原文Building a Message Sticker App Extension in Xcode 8


軟件工程師,AppCoda 創辦人。著有《iOS 10 App 程式設計實力超進化實戰攻略》、《iOS 9 App 程式設計實力超進化實戰攻略》、《養成iOS 8 App程式設計實力的25堂課》,以及《iOS 8 App程式設計進階實力的30項關鍵技巧》。曾任職於HSBC, FedEx等公司,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda,致力於iOS程式教學,產品設計及開發。

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This