申請完賬號，我們就得有一個自己的APP我選的是盆友推薦的類型iMessage表情包，下面我就來介紹一下該表情包的創建。（同時附上盆友簡書的鏈接@kurt_wang ）
騷年們，整天斗圖可否想過創造自己的斗圖表情包！可否想過斗自己的圖，霸他人的屏。（ps:哈..哈..哈..想想都很嗨??）
隨著iOS10的發布,蘋果對開發者開放了Messages應用程序,以提供開發者創建自己的iMessage App,其包含簡單的表情包到可以交互的復雜界面。
此外還要說明一點， iMessage apps 只有效于iOS系統, 但它的內容可以在MacOS和watchOS上顯示，watchOS 3的用戶能夠查看最近使用的表情包,并可以從蘋果的手表把這些表情直接直接發給聯系人。
廢話不多說，就一個字??
iMessage App 創建有兩種模板：
一、Sticker Pack Application
二、iMessage Application
一、通過Sticker Pack Application模板創建
創建新工程，選擇模板Sticker Pack Application
下圖為新建好的iMessage應用，然后我們將事先做好的表情包直接拖到Sticker Pack下便可（如下圖）
對，你沒看錯，無需一行代碼便可創建自己的表情包應用，驚不驚喜，意不意外，害不害怕，下面就讓我們看一下運行效果：
同時蘋果還給我們提供了表情的排布樣式，共分三種：small、Medium、Large；它們的展現形式如下圖：
關于GIF有兩種導入形式：
1.是和圖片一樣直接拖到Sticker Pack下便可
2.是點擊Stickers.xcstickers-->Sticker Pack右鍵選中New Sticker Sequence; 然后把幀圖拖到新建的 Sticker中即可（如下圖）：
對于表情圖片大小蘋果雖然沒有嚴格限制，但還是給出了建議大小：
另外還有其他的一些限制：
二、通過iMessage Application模板創建
此處說明一下，基本的表情應用程序提供的模板可能不完全滿足需求;處于這個原因, 蘋果提供了一種方法來使你創建更為復雜的標簽應用程序，這個便是iMessage Application，下面就讓我們一起來做一下吧 。
創建新工程，選擇模板iMessage Application
創建完項目我們看到一個干凈的空項目如下圖：
接下來我們把精力放在MessageExtension文件夾下：
1. MessagesViewController.swift : iMessage app的程序入口;
2. MainInterface.storyboard: 可視化操作;
3. Assets.xcassets: 圖片集合;
4. Info.plist : 配置一些擴展信息;
打開MessagesViewController.swift , 你會發現它是MSMessagesAppViewController的子類, 而再往上看父類就是UIViewController, 這意味著在iMessage APP中都符合UIKit的標準;
點擊MSMessagesAppViewController你會發現它提供了很多回調函數，你可以覆蓋他們, 進一步定制應用程序的功能。接下來讓我們來一步一步實現：
1.遵守MSStickerBrowserViewDataSource協議
class MessagesViewController: MSMessagesAppViewController, MSStickerBrowserViewDataSource {
...
}
將圖片導入包：
接下來讓我們構建數據源數組
/// 創建數據源
lazy var dataArray: [MSSticker] = {
var array:[MSSticker] = []
for i in 1...24 {
if let url = Bundle.main.path(forResource: "\(i)", ofType: "png") { do {
let temp = URL.init(fileURLWithPath: url)
let sticker = try MSSticker(contentsOfFileURL: temp, localizedDescription: "")
array.append(sticker)
} catch { print(error)
}
} else if let url = Bundle.main.path(forResource: "\(i)", ofType: "gif") { do {
let temp = URL.init(fileURLWithPath: url)
let sticker = try MSSticker(contentsOfFileURL: temp, localizedDescription: "")
array.append(sticker)
} catch { print(error)
}
}else {
print("如果格式不是gif也不是png請自行添加判斷")
}
}
return array
}()
然后創建MSStickerBrowserViewController作為根視圖, 并設置寬高約束:
/// 創建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 dataArray.count
}
func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker {
return dataArray[index]
}
ok，代碼添加完畢，在viewDidLoad中調用createStickerBrowser函數
iewController
override func viewDidLoad() {
super.viewDidLoad()
createStickerBrowser()
}
MessagesViewController
最后運行代碼讓我們看一下運行效果：
最后介紹關于iMessage應用的一個獨特的消息。
依然是第二種創建項目的形式在此基礎上我們稍作擴展，在視圖MessagesViewController添加按鈕 “創建Message”：
如下代碼
/// 創建
func creatMessageBtn() {
let creatBtn = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
creatBtn.addTarget(self, action: #selector(touchBtn), for: .touchUpOutside)
creatBtn.backgroundColor = UIColor.white
view.addSubview(creatBtn)
}
接下來, 寫代碼的時刻到啦, 第一步我介紹一些用到的類:
- MSConversation: 代表了當前打開的對話。可以使用這個類來操作一些步驟,例如通過插入消息或當前選擇的信息;
- MSMessage: 代表單個消息,判斷是否由你插入對話或已經存在的對話;
- MSMessageTemplateLayout: 創建一個消息氣泡,如下圖, 里邊有許多屬性和空間來提供給你來自定義message;
特別提醒, 左上角的空間是展示你的icon, 所有的屬性都是可選的, 提供任何標題字符串將擺脫底部部分的布局。
創建image
func creatImage() -> UIImage? {
let background = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
background.backgroundColor = UIColor.red
let label = UILabel(frame: CGRect(x: 75, y: 75, width: 150, height: 150))
label.font = UIFont.systemFont(ofSize: 56.0)
label.backgroundColor = UIColor.brown
label.textColor = UIColor.white
label.text = "Message"
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
}
點擊創建Message按鈕把MSMessage對象并插入到會話中：
/// 創建表情點擊事件
func touchBtn() {
if let image = creatImage(), let conversation = activeConversation { let layout = MSMessageTemplateLayout()
layout.image = image
layout.caption = "Stepper Value"
layout.subcaption = "subcaption"
layout.trailingCaption = "trailingCaption"
layout.trailingSubcaption = "trailingSubcaption"
let message = MSMessage()
message.layout = layout
message.url = URL(string: "www")
conversation.insert(message, completionHandler: { (error: NSError?) in
} as? (Error?) -> Void)
}
}
要注意, 在iMessage中自定義message必須要設置layout和URL, 這個URL是鏈接某個web頁面的一些內容, 進而MacOS用戶可以看到iMessage的內容, 在這個例子中, 我們只是創建了簡單的字符URL;
最后我們將這個message插入到當前活動的會話中, 調用這個方法不會發送信息, 相反,它把你的信息在用戶的輸入字段,以便他們可以發送。
運行效果如下圖：
下面奉上github地址: Demo
好吧！到此為止，簡要介紹了iMessage App的創建方式，剩下的就是小伙伴們動動手構建自己的App咯??
小可愛表情包下載地址：小可愛表情包
