????iOS10 蘋(píng)果推出了Messages.framework 珊蟀,它允許開(kāi)發(fā)者創(chuàng)建獨(dú)立的貼紙app(表情包)菊值,或者是某個(gè)app的iMessage 擴(kuò)展應(yīng)用(可以是表情包也可以是主工程的iMessage插件)。
????總之育灸,可以自己在iMessage里面搞表情包啦~~
目錄:
- 一行代碼不用寫(xiě)腻窒,實(shí)現(xiàn)iMessage Stickers App
- 使用代碼實(shí)現(xiàn)iMessage Stickers App
- 我們還能做些其他的什么?
??-自定義compact控制器和expanded控制器- 小結(jié)
1磅崭、一行代碼不用寫(xiě)儿子,實(shí)現(xiàn)iMessage Stickers App
????新建工程,工程模版選擇為Sticker Pack Application
砸喻,如下圖:
????創(chuàng)建好的新工程非常干凈柔逼,只需要將你的貼紙拖拽到右側(cè)的Sticker Pack
中即可。
????之后直接run一下割岛,效果圖如下:
????一行代碼沒(méi)有寫(xiě)愉适,驚不驚喜!意不意外癣漆!~
????當(dāng)然Sticker Pack
也是有圖片類(lèi)型要求的维咸,如下圖:
????蘋(píng)果推薦使用PNG或者APNG伏恐,而不推薦使用gif端辱,原因在于關(guān)于透明度等的處理上,PNG和APNG要優(yōu)于gif份名,如下圖:
????那么如何導(dǎo)入APNG的動(dòng)圖呢婚肆?
????在Sticker Pack
下右鍵選中Add assets
->New Sticker Sequence
租副。
????然后就會(huì)創(chuàng)建出一個(gè)新的Sticker Sequence,之后將動(dòng)圖每一幀的PNG圖拖進(jìn)去就行了较性。
????當(dāng)然除了默認(rèn)的每行三個(gè)圖的顯示模式用僧,蘋(píng)果還提供另外兩種顯示模式:
????而每種顯示模式下對(duì)于圖片的尺寸要求也是不同的,如下圖:
2赞咙、使用代碼實(shí)現(xiàn)iMessage Stickers App
????使用Sticker Pack Application
創(chuàng)建的Stickers App永毅,每次更新貼紙需要進(jìn)行版本迭代。如果想做成動(dòng)態(tài)從服務(wù)器獲取的就不能使用Sticker Pack Application
工程模版了人弓。
????下面我們通過(guò)另外一種方式,使用代碼創(chuàng)建出一個(gè)Stickers App着逐,看看Sticker Pack Application
工程模版中蘋(píng)果都為我們做了哪些事情崔赌。
????首先新建工程意蛀,工程模版選擇為iMessage Application
,如下圖:
????創(chuàng)建好的工程中包含:
??- MessagesViewController
??- MainInterface.storyboard
??- Assets.xcassets
??- Info.plist
????其中MainInterface.storyboard
是我們的iMessage Extension App啟動(dòng)時(shí)的根控制器健芭,而MessagesViewController
就是sb對(duì)應(yīng)的vc县钥。
????Assets.xcassets
照例是icon圖片存放的地方
????Info.plist
則是我們的iMessage app相關(guān)配置文件
????如果我們不想用sb怎么辦呢?找到Info.plist
把這個(gè)keyNSExtensionMainStoryboard
對(duì)應(yīng)的鍵值對(duì)刪掉慈迈,添加新的keyNSExtensionPrincipalClass
若贮,value為你的控制器。
????打開(kāi)Messages.framework痒留,我們可以看到MS框架的相關(guān)頭文件谴麦。
????在這個(gè)demo中,我們可以把注意力先放到:
MSSticker
伸头,MSStickerView
匾效,MSStickerBrowserViewDataSource
和MSStickerBrowserViewController
這幾個(gè)類(lèi)里面。????其中每一個(gè)貼紙都是放在一個(gè)
MSStickerView
上的恤磷,MSStickerView
對(duì)應(yīng)的貼紙的一些屬性信息數(shù)據(jù)源就是MSSticker
面哼。????
MSStickerBrowserViewController
我們可以類(lèi)比為UICollectionViewController
,而MSStickerBrowserViewDataSource
就是我們的數(shù)據(jù)源代理扫步。?
????快速理解MS框架的api魔策,我們可以繼承自
MSStickerBrowserViewController
,實(shí)現(xiàn)我們自己的MyStickerViewController河胎。????首先構(gòu)建數(shù)據(jù)源數(shù)組闯袒,數(shù)組中是
MSSticker
對(duì)象
-(NSMutableArray *)stickersArrayM{
if (!_stickersArrayM) {
_stickersArrayM = [NSMutableArray array];
for (int i = 1; i < 6; i ++) {
NSString *imageName = [NSString stringWithFormat:@"test%d",i];
NSString *stickerPath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"jpg"];
NSURL *stickerUrl = [NSURL fileURLWithPath:stickerPath];
MSSticker *sticker = [[MSSticker alloc] initWithContentsOfFileURL:stickerUrl localizedDescription:imageName error:NULL];
[_stickersArrayM addObject:sticker];
}
}
return _stickersArrayM;
}
????之后實(shí)現(xiàn)MSStickerBrowserViewDataSource
的兩個(gè)數(shù)據(jù)源方法。
#pragma mark - MSStickerBrowserViewDataSource
// 返回貼紙數(shù)量的代理方法
- (NSInteger)numberOfStickersInStickerBrowserView:(MSStickerBrowserView *)stickerBrowserView{
return self.stickersArrayM.count;
}
// 當(dāng)前index顯示的MSSticker對(duì)象
- (MSSticker *)stickerBrowserView:(MSStickerBrowserView *)stickerBrowserView stickerAtIndex:(NSInteger)index{
return self.stickersArrayM[index];
}
????在MessagesViewController
中初始化我們自己的MyStickerViewController控制器仿粹。
- (void)viewDidLoad {
[super viewDidLoad];
MyStickerViewController *myStickerViewController = [[MyStickerViewController alloc] initWithStickerSize:MSStickerSizeSmall];
[self addChildViewController:myStickerViewController];
[self.view addSubview:myStickerViewController.view];
}
????這里是demo
????其中MessagesViewController
是我們的iMessage Extension App的根控制器搁吓,用于處理來(lái)自iMessage的回調(diào)以及具體視圖的顯示。
????而我們繼承自MSStickerBrowserViewController
的MyStickerViewController則包含了MSStickerBrowserView
和MSStickerBrowserViewDataSource
數(shù)據(jù)源吭历。如下圖所示:
3堕仔、我們還能做些其他的什么?
????那么除了固定的sticker貼紙app晌区,我們還能做些其他的什么嗎摩骨?
????當(dāng)然,iMessage Extension App并不只有那么一小塊顯示區(qū)域朗若。我們還可以自定義expanded控制器恼五,來(lái)實(shí)現(xiàn)其他需求。
????下圖是一個(gè)compact控制器與expanded控制器切換交互哭懈,并給compact控制器添加新sticker的一個(gè)演示:
????接下來(lái)一起來(lái)看看是怎么實(shí)現(xiàn)的灾馒。
自定義compact控制器和expand控制器
????同樣使用iMessage Application
工程模版創(chuàng)建一個(gè)新的工程。
????接下來(lái)創(chuàng)建兩個(gè)控制器:
????一個(gè)是MyCustomCompactViewController
繼承自UIViewController
遣总,它用來(lái)顯示我們的compact sticker睬罗,并由它來(lái)叫出我們的expand控制器轨功。
????另外一個(gè)控制器是AddStickerViewController
,就是我們的expand控制器了容达。
????其中
MyCustomCompactViewController
包含了一個(gè)collectionView古涧,其中collectionView的第一個(gè)cell為加號(hào)按鈕;其他cell為sticker展示的cell花盐,每一個(gè)中都包含了一個(gè)MSStickerView
羡滑。????而
AddStickerViewController
就是一個(gè)簡(jiǎn)單的展示的控制器,包含了一個(gè)collectionView算芯。
????下面我們回到MessagesViewController
柒昏,關(guān)于compact控制器和expand控制器的彈出與隱藏,最主要的方法就是:
-(void)requestPresentationStyle:(MSMessagesAppPresentationStyle)presentationStyle;
????調(diào)用方法requestPresentationStyle
也祠,根據(jù)傳入的presentationStyle值昙楚,來(lái)做compact與expand的切換。
????注意還需要在轉(zhuǎn)場(chǎng)過(guò)渡結(jié)束方法中诈嘿,將expand控制器移除堪旧。即下面這個(gè)方法:
-(void)didTransitionToPresentationStyle:(MSMessagesAppPresentationStyle)presentationStyle;
????具體細(xì)節(jié)可以查看demo
小結(jié)
????上面的demo只是演示了最基本的compact控制器和expand控制器過(guò)渡切換和簡(jiǎn)單交互,而反映到實(shí)際開(kāi)發(fā)中iMessage Extension App不只是用來(lái)做貼紙app奖亚,也可以作為主app的iMessage插件淳梦,做一些輔助的快捷操作,如:淘票票中的邀請(qǐng)好友一起來(lái)選座昔字,某些場(chǎng)景下的音視頻文件的共享等爆袍。
????而且,iMessage Extension App也是可以訪問(wèn)相機(jī)相冊(cè)作郭,和麥克風(fēng)的陨囊。iMessage Store上還有很多
基于iMessage Extension實(shí)現(xiàn)的小游戲,不得不說(shuō)夹攒,越來(lái)越好玩啦~
???????筆者也上架了幾個(gè)貼紙應(yīng)用蜘醋,雖然賣(mài)不幾個(gè)錢(qián),但維持每年上交的開(kāi)發(fā)者保護(hù)費(fèi)還是可以的咏尝。???