iMessage APP學習筆記

iMessage App類別

1：Sticker pack app ：單獨的表情包應用，不需要編寫任何程式碼，只需拖動圖片即可，包括靜態和動態表情
2：iMessage app ：單獨的iMessage應用，要編寫程式碼，可以傳送表情包、文字、視訊、音訊。

上面兩個可單獨開發釋出也可以一個app的擴充套件嵌入到iMessage應用中。用於在“資訊”應用中訪問外部應用

巢狀iMessage APP到自己的APP

iMessage App本身是一個Extension，但是它可以獨立開發，不依賴任何Container App。我們也可以在現有的專案中新增iMessage App，系統會自動將其新增到Messages App Store。

• 在現有專案中新增iMessage App，可以通過新增Extension的方式新增(File->New->Target->Application Extension->Messages Extension)。

一、建立獨立的表情包應用（Sticker pack app ）：

表情包限制(顯示在選擇列表時的大小，預設為Medium)：

• Small ：100 x 100 @3x scale (300 x 300 pixel image)
• Medium : 136 x 136 @3x scale (378 x 378 pixel image)
• Large : 206 x 206 @3x scale (618 x 618 pixel image)
  其他限制（表情包大小）：
• 檔案中的 images 不可以大於500kb
• image 不可以小於100 x 100 pt (300 x 300 pixels)
• image 不可以大於206 x 206 pt (618 x 618 pixels)
• image 格式必須是PNG、APNG、JPEG、GIF

1：實現

< 1 > 建立Sticker Pack 工程
create a new Xcode project > iOS > Sticker Pack Application > Next
< 2 > 拖入圖片
選中Stickers.xcsstickers > 選中右邊的Sticker Pack資料夾 > 選中素材中的所有圖片 > 拖入Sticker Pack中
< 3 > 執行選擇message平臺
< 4 > 新增GIF動圖(下圖中最後兩個按鈕都為動圖，因為是截圖所以也看不到效果)

• 選中Sticker Pack資料夾 > 點選下方➕號 > 選擇New Sticker Sequence新增動態表情
• 拖入該動態圖片的各個幀圖片即可（拖入Frame1位置）
• 選中Sticker Sequence > 點選右皮膚中的屬性檢查器 > 設定Sticker Sequence分類下的Frame Per Second 設定時間

效果圖.png

二：建立 iMessage 應用（iMessage app ）：

< 1 > Create a new Xcode project > IOS > iMessage Application > Next
生成的目錄結構，主要是針對 MessageExtension 資料夾開發。
< 2 > 將圖片資源新增到工程中 。
< 3 > 在 MessagesAppViewController 中載入表情包資料，建立MSStickerBrowserViewController 實現MSStickerBrowserVie
wDataSource 代理資料 。

#import "MessagesViewController.h"


@interface MessagesViewController ()<MSStickerBrowserViewDataSource>

@property (nonatomic,strong) NSMutableArray *stickersArray;

@end

@implementation MessagesViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
//    初始化本地表情包
    [self loadStickers];
//    建立本地表情包控制器
    [self createStickerBrowserViewController];
}

//載入表情包,上面設定了資料來源,所以我們要載入圖片(資料)
- (void)loadStickers{
    NSMutableArray *mArray = [NSMutableArray array];
    
    for (int i = 1; i < 11; i++) {
//        <span style="white-space:pre">    </span>//傳入對應的url
        NSURL *url = [[NSBundle mainBundle] URLForResource:[NSString stringWithFormat:@"scoops%02d_sticker", i] withExtension:@"png"];
        MSSticker *sticker = [[MSSticker alloc]initWithContentsOfFileURL:url localizedDescription:@"" error:nil];
        [mArray addObject:sticker];
    }
    self.stickersArray = mArray;
}
// 要想顯示圖片表情,必須要初始化一個MSStickerBrowserViewController作為根檢視
- (void)createStickerBrowserViewController{
    MSStickerBrowserViewController *browserVc = [[MSStickerBrowserViewController alloc]initWithStickerSize:MSStickerSizeSmall];
    [self addChildViewController:browserVc];
    [self.view addSubview:browserVc.view];
    browserVc.stickerBrowserView.backgroundColor = [UIColor cyanColor];
    //設定資料來源
    browserVc.stickerBrowserView.dataSource = self;
    browserVc.view.translatesAutoresizingMaskIntoConstraints = NO;
    
    //自動佈局
    [self.view.topAnchor constraintEqualToAnchor:browserVc.view.topAnchor].active = YES;
    [self.view.bottomAnchor constraintEqualToAnchor:browserVc.view.bottomAnchor].active = YES;
    [self.view.leftAnchor constraintEqualToAnchor:browserVc.view.leftAnchor].active = YES;
    [self.view.rightAnchor constraintEqualToAnchor:browserVc.view.rightAnchor].active = YES;
    
    
}

#pragma mark - MSStickerBrowserViewDataSource 資料來源代理方法（必須實現）
// 一共有多少個
-(NSInteger)numberOfStickersInStickerBrowserView:(MSStickerBrowserView *)stickerBrowserView{
    
    return self.stickersArray.count;
}

// 每一個要顯示什麼
- (MSSticker *)stickerBrowserView:(MSStickerBrowserView *)stickerBrowserView stickerAtIndex:(NSInteger)index{
    
    return self.stickersArray[index];
}

408742A7-32CB-4348-882E-E1F21A8964BE.png

三：在已有的專案中新增 iMessage APP 擴充套件,自定義ViewController可傳送圖片、音訊、視訊檔案

< 1 > 首先建立一個普通的工程，File->New->Target->Application Extension->Messages Extension

AFB6C564-A4A1-44C0-9958-D73FCE9A632E.png

6EB59770-E97C-43DE-A8FF-8B8A28CCAB08.png

7609C234-1DB1-4AEC-99B1-26D35FC5CAD6.png

38F3DCDE-9F90-47BF-8C43-15874106B1CF.png

<2>執行 效果如下

11DA93EE-4141-4FC6-BE8B-40EDE21F233B.png

<3>傳送自定義的表情，音訊，視訊等
主要程式碼

//傳送圖片  
-(void)sendPhoto{  
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"image" withExtension:@"png"];  
    [self sendMessageWithURL:url];  
}  
//傳送音樂  
-(void)sendMusic{  
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"blank" withExtension:@"mp3"];  
    [self sendMessageWithURL:url];  
}  
//傳送視訊  
-(void)sendVideo{  
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"moments" withExtension:@"mp4"];  
    [self sendMessageWithURL:url];  
}  
//傳送貼紙  
-(void)sendStick{  
    [self requestPresentationStyle:MSMessagesAppPresentationStyleCompact];  
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"sticker" withExtension:@"png"];  
  
    MSSticker *sticker = [[MSSticker alloc] initWithContentsOfFileURL:url localizedDescription:@"localizedDescription" error:nil];  
      
    [self.activeConversation insertSticker:sticker completionHandler:^(NSError * _Nullable error) {  
        if (error) {  
            NSLog(@"%@",error);  
        }  
    }];  
}  
//傳送自定義訊息  
-(void)sendAlter{  
    [self requestPresentationStyle:MSMessagesAppPresentationStyleCompact];  
    MSMessageTemplateLayout *layout = [[MSMessageTemplateLayout alloc] init];  
    layout.image = [UIImage imageNamed:@"image"];  
    layout.imageTitle = @"老虎";  
    MSMessage *message = [[MSMessage alloc] init];  
    message.layout =layout;  
    [self.activeConversation insertMessage:message completionHandler:^(NSError * _Nullable error) {  
        if (error) {  
            NSLog(@"%@",error);  
        }  
    }];  
}  
  
// 通過 URL 傳送訊息  
-(void)sendMessageWithURL:(NSURL *)url{  
    [self requestPresentationStyle:MSMessagesAppPresentationStyleCompact];  
    [self.activeConversation insertAttachment:url withAlternateFilename:nil completionHandler:^(NSError * _Nullable error) {  
        if (error) {  
            NSLog(@"%@",error);  
        }  
    }];  
}  

activeConversation 是 MSMessagesAppViewController 裡面的一個屬性，傳送音視訊檔案，都是通過這個方法。

有時候可能找不到對應的資原始檔， 可以再這裡檢視是否有加入的檔案，如果沒有加入，➕號加入該檔案即可。

6BE7D7C4-586D-4AB0-A065-3C6BBC0BC505.png

Messages framework 說明

Apple在WWDC 2016上針對iOS提供的全新訊息框架（Messages framework）使得開發者能夠建立與Apple的“資訊”應用進行互動的應用擴充套件。
訊息框架包含一系列供開發者使用的基本類：

• MSMessageAppViewController：這個類為訊息擴充套件提供了主檢視控制元件，可用於呈現自定義使用者介面，管理擴充套件狀態，獲取當前對話，追蹤資訊的傳送等功能。
• MSStickerBrowserViewController、MSStickerBrowserView和MSStickerBrowserViewDataSource：這些類可用於定製和呈現自定義或動態的貼紙瀏覽器（Sticker browser）。如果要為貼紙瀏覽器提供動態內容，可以實施自定義的MSStickerBrowserViewDataSource
  。若要對預設貼紙瀏覽器的外觀進行定製，可以提供自己的MSStickerBrowserView
  ，並對瀏覽器尺寸、貼紙尺寸等內容進行定製。通過MSStickerView子類還可獲得進一步的定製能力。
• MSConversation：這個類負責呈現對話，將其插入訊息的輸入欄位即可用於傳送文字、貼紙、附件，或訊息物件。
• MSMessage：這個類可用於建立互動式訊息並可訪問訊息屬性，例如傳送人、訊息所述的會話，以及訊息所關聯的可選URL等
• MSSession：這個類可用於對訊息進行標識並進行後續更新，例如可將這一特性用於遊戲或協作應用中。

開發Messages App中的建議

1.確保應用是有用的並且易於理解。

2.功能要聚焦單一，不要組合多種功能在一起。

3.Messages通常用在雙人非正式的交談中，應從這裡入手，讓交流更加有趣。

4.Messages的最大兩點是分享，利用這一點出發開發Messages App。

5.插圖內容佈局要注意，系統會自動將內容變為圓角，不要把重要的資訊放在角落。

6.注意，在緊湊模式下，Messages App的介面是不允許水平滾動的。

7.同樣，在緊湊模式下，Messages App不允許鍵盤輸入