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 设置时间
iMessage APP学习笔记_第1张图片
效果图.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 ()

@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++) {
//            //传入对应的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];
}
iMessage APP学习笔记_第2张图片
408742A7-32CB-4348-882E-E1F21A8964BE.png

三:在已有的项目中添加 iMessage APP 扩展,自定义ViewController可发送图片、音频、视频文件

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

iMessage APP学习笔记_第3张图片
AFB6C564-A4A1-44C0-9958-D73FCE9A632E.png
iMessage APP学习笔记_第4张图片
6EB59770-E97C-43DE-A8FF-8B8A28CCAB08.png
iMessage APP学习笔记_第5张图片
7609C234-1DB1-4AEC-99B1-26D35FC5CAD6.png
iMessage APP学习笔记_第6张图片
38F3DCDE-9F90-47BF-8C43-15874106B1CF.png

<2>运行 效果如下

iMessage APP学习笔记_第7张图片
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 里面的一个属性,发送音视频文件,都是通过这个方法。

有时候可能找不到对应的资源文件, 可以再这里查看是否有加入的文件,如果没有加入,➕号加入该文件即可。

iMessage APP学习笔记_第8张图片
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不允许键盘输入


你可能感兴趣的:(iMessage APP学习笔记)