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:这个类为消息扩展提供了主视图控件,可用于呈现自定义用户界面,管理扩展状态,获取当前对话,追踪信息的发送等功能。
  • 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不允许键盘输入


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容