一、引言
Messages是iOS系統中原生的資訊應用,其既可以通過營運商網絡發送短資訊,也可以通過網際網路進行類似微信類社交軟體的即時聊天。但是由于其封閉性與功能的單一,使用其進行即時聊天的使用者并不多。随着iOS10系統的推出,或許可以改變這一現狀。在iOS10中,Messages的功能被擴充的十分強大,通過Messages,使用者可以分享圖檔,音樂,視訊,可以随手塗鴉,使用自定義的表情包,可以進行Apple Pay支付,購物,甚至可以在Messages中玩遊戲。并且,上面所提到的這些功能都全面開發出了接口供開發者進行開發與擴充。
在iOS10中,開發者可以進行與Messages相關的開發有兩類:獨立的Messages應用與Messages應用擴充。其中,Messages應用擴充需要依附一個宿主App而存在。無論哪種類型的Messages應用,其都又分為兩類,StickerPicks(表情包)與iMessage Apps(Messages應用)。
二、開發表情包StickerPicks
1.開發獨立的表情包
Sticker Picks可謂是iOS10中一個十分強大的新功能。在iOS10系統的iPhone上,Messages應用中會内嵌一個Message App Store,使用者可以直接從裡面下載下傳針對于Messages的獨立表情包和獨立第三方應用。開發者也可以獨立開發表情包釋出到這個Message App Store中。
開發Sticker Picks表情包十分簡單,開發者可以不用寫一句代碼,将整理好的表情進行打包送出即可完成。使用Xcode8建立一個新的工程,選擇Sticker Pack Application模闆,如下圖所示:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5iM3MGZyEjZhhDNlhTO4YTOkZTN0kTO5gDN0UzMjR2Mi9CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
建立出工程後,可以發現模闆中沒有任何代碼檔案,隻有一個Stickers.xcstickers包。将準備好的表情包圖檔導入這個Stickers中,其中支援靜态圖檔,也支援動态表情gif圖檔。關于導入的圖檔,有如下幾條規則:
1.圖檔檔案的格式必須是PNG、APNG、GIF或者JPEG。
2.單個檔案的大小不能超過500KB。
3.最優的效果是當圖檔尺寸在100*100到206*206之間。
注意:在提供圖檔的時候,開發者隻需要提供@3倍圖即可,即最優尺寸在300*300到618*618之間的圖檔。系統會自動生成@2與@1倍圖。
開發的表情包會顯示在Messages應用的工具中,需要注意,在表情清單的排版中,每個表情縮略圖隻支援3種尺寸的排版,對應的尺寸分别如下:
Small類型:100*100
Medium類型:136*136
Large類型:206*206
在Xcode中,可以對要使用的模闆進行選擇,如下圖:
在模拟器中運作工程,Messages中效果如下圖:
和普通iOS應用程式一樣,将裝置選擇為Generic iOS Device後直接Archives即可将表情包送出到AppStore,稽核通過後,即可在Message App Store中進行下載下傳。
小提示:其實StickerPicks翻譯成表情包并不合适,其更有一層貼紙的概念。實際上其也确實有貼紙的功能,在Messages應用中,使用者可以通過長按移動手勢,來将某個Sticker添加在另一個Sticker上面。如下圖:
2.開發寄宿于宿主App的表情包擴充
擴充表情包與獨立表情包最大的不同在于擴充需要寄宿于某個宿主App中,建立擴充target,選擇Sticker Pick Extension,如下圖,之後和獨立表情包開發過程一緻。
3.關于表情包的icon圖示
StickerPicks的圖示和宿主App并不共用,其需要一套獨特尺寸的icon,尺寸如下:
效果如下圖所示:
三、開發Messages App應用
1.認識Messages架構
和StickerPicks表情包一樣,Messages App也分為獨立應用與擴充兩種。其實它們的開發思路和方法完全一緻,隻是有無宿主App的差別。
開發Messages App需要使用到iOS中引入的一個新的開發架構Messages。Messages比較簡單,其中涉及到的類并不十分多,下圖中概述了其中重要的類和之間的關系:
MSMessageAppViewController:這個類Messages App的基礎視圖控制器類,其繼承自UIViewController,但其中添加了許多Messages App相關的聲明周期方法。
MSConversation:描述一個會話執行個體。
MSSticker:表情貼圖執行個體。
MSMessage:在Messages App之間進行傳遞的消息實體。
MSMessageLayout:抽象類,其并沒有實作任何方法,有子類實作。
MSMessageTemplateLayout:用于對消息實體MSMessage進行布局排版。
MSStickerBorwserViewController:用于建立表情包視圖控制器。
MSStickerBorwserView:表情包視圖容器,類似CollectionView。
MSStickerView:表情承載視圖。
2.實作一個Messages App的清單界面
使用Xcode建立一個Messages App工程如下:
其會自動生成一個MessagesViewController類,這個類就是此Messages App的主界面視圖控制器。需要注意,Messages App的視圖控制器都分為兩種狀态,分别為Compact(緊湊的)和Expanded(擴寬的)。并且在這兩種狀态進行切換時,視圖的底部的工具欄和頭部的導航欄也會交替出現,這導緻了即使是使用自動布局,依然無法完美的解決Messages App布局的統一性,需要手動進行調整處理,後面會介紹到。
在MessagesViewController類中添加其他視圖控件,大部分iOS App開發中可以使用的UI控件這裡都可以使用,但是有一點需要注意,對于可以彈出鍵盤的UI控件,例如UITextView與UITextField,當Messages App界面處理Compact模式時,鍵盤是不能彈出的,隻有當界面處于Expanded模式時,鍵盤才被允許彈出。
為了使Messages App的界面在任何模式下都能保持統一,需要手動對其中視圖限制進行修改,示例代碼如下:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.dataArray = [NSMutableArray array];
[self.dataArray addObjectsFromArray:@[@"發送文本資訊",@"插入表情",@"插入檔案",@"插入消息實體",@"跳轉第二個界面",@"貼圖包"]];
[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cellId"];
self.tableView.dataSource = self;
self.tableView.delegate = self;
self.session = [[MSSession alloc]init];
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.dataArray.count;
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cellId"];
cell.textLabel.text = self.dataArray[indexPath.row];
return cell;
//這個方法在Messages App加載完成處于活躍狀态時被調用 在其中根據模式設定布局參數
-(void)didBecomeActiveWithConversation:(MSConversation *)conversation {
// Called when the extension is about to move from the inactive to active state.
// This will happen when the extension is about to present UI.
if (self.presentationStyle==MSMessagesAppPresentationStyleCompact) {
_topMargan.constant = 0;
_leftMargan.constant = -15;
_rightMargan.constant = -15;
_bottomMargan.constant=-44;
}else{
_topMargan.constant = -85;
_bottomMargan.constant=0;
}
[self.view layoutIfNeeded];
//這個方法在視圖控制器的模式發生了改變時調用 在其中根據模式修改布局參數
-(void)didTransitionToPresentationStyle:(MSMessagesAppPresentationStyle)presentationStyle {
// Called after the extension transitions to a new presentation style.
// Use this method to finalize any behaviors associated with the change in presentation style.
if (presentationStyle==MSMessagesAppPresentationStyleCompact) {
[self.view layoutIfNeeded];