iMessage APP學習筆記

weixin_34107955發表於2017-10-13

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 設定時間
2753568-a9738c3d3fb10096.png
效果圖.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];
}
2753568-9919cb2dbbf603e1.png
408742A7-32CB-4348-882E-E1F21A8964BE.png

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

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

2753568-4cc3ab62009120ce.png
AFB6C564-A4A1-44C0-9958-D73FCE9A632E.png
2753568-107f28b66ca991d6.png
6EB59770-E97C-43DE-A8FF-8B8A28CCAB08.png
2753568-0140114aa39b694f.png
7609C234-1DB1-4AEC-99B1-26D35FC5CAD6.png
2753568-98ade1ac8e930ef5.png
38F3DCDE-9F90-47BF-8C43-15874106B1CF.png

<2>執行 效果如下

2753568-02617e67effb753b.png
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 裡面的一個屬性,傳送音視訊檔案,都是通過這個方法。

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

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

Messages framework 說明

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

  • MSMessageAppViewController:這個類為訊息擴充套件提供了主檢視控制元件,可用於呈現自定義使用者介面,管理擴充套件狀態,獲取當前對話,追蹤資訊的傳送等功能。
  • MSStickerBrowserViewControllerMSStickerBrowserViewMSStickerBrowserViewDataSource:這些類可用於定製和呈現自定義或動態的貼紙瀏覽器(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不允許鍵盤輸入


相關文章