iOS10 iMessage貼紙app開(kāi)發(fā)吞鸭,從零開(kāi)始做自己的iMessage 表情包應(yīng)用

????iOS10 蘋(píng)果推出了Messages.framework 珊蟀,它允許開(kāi)發(fā)者創(chuàng)建獨(dú)立的貼紙app(表情包)菊值,或者是某個(gè)app的iMessage 擴(kuò)展應(yīng)用(可以是表情包也可以是主工程的iMessage插件)。
????總之育灸,可以自己在iMessage里面搞表情包啦~~

目錄:

  1. 一行代碼不用寫(xiě)腻窒,實(shí)現(xiàn)iMessage Stickers App
  2. 使用代碼實(shí)現(xiàn)iMessage Stickers App
  3. 我們還能做些其他的什么?
    ??-自定義compact控制器和expanded控制器
  4. 小結(jié)

1磅崭、一行代碼不用寫(xiě)儿子,實(shí)現(xiàn)iMessage Stickers App


????新建工程,工程模版選擇為Sticker Pack Application砸喻,如下圖:

iMessage Stickers Project.png

????創(chuàng)建好的新工程非常干凈柔逼,只需要將你的貼紙拖拽到右側(cè)的Sticker Pack中即可。

Sticker Pack.png

????之后直接run一下割岛,效果圖如下:
Sticker Pack Application.gif

????一行代碼沒(méi)有寫(xiě)愉适,驚不驚喜!意不意外癣漆!~

hahha.jpg

????當(dāng)然Sticker Pack也是有圖片類(lèi)型要求的维咸,如下圖:

圖片支持.png

????蘋(píng)果推薦使用PNG或者APNG伏恐,而不推薦使用gif端辱,原因在于關(guān)于透明度等的處理上,PNG和APNG要優(yōu)于gif份名,如下圖:

PNG和gif對(duì)比.png
????那么如何導(dǎo)入APNG的動(dòng)圖呢婚肆?

????在Sticker Pack下右鍵選中Add assets->New Sticker Sequence租副。

New Sticker Sequence.png

????然后就會(huì)創(chuàng)建出一個(gè)新的Sticker Sequence,之后將動(dòng)圖每一幀的PNG圖拖進(jìn)去就行了较性。

Sticker Sequence Frame.png

????當(dāng)然除了默認(rèn)的每行三個(gè)圖的顯示模式用僧,蘋(píng)果還提供另外兩種顯示模式:

設(shè)置每行顯示的表情個(gè)數(shù).png

????而每種顯示模式下對(duì)于圖片的尺寸要求也是不同的,如下圖:

尺寸要求.png

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,如下圖:

iMessage Application.png

????創(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)頭文件谴麦。

MS頭文件.png

????在這個(gè)demo中,我們可以把注意力先放到:MSSticker伸头,MSStickerView匾效,MSStickerBrowserViewDataSourceMSStickerBrowserViewController這幾個(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則包含了MSStickerBrowserViewMSStickerBrowserViewDataSource數(shù)據(jù)源吭历。如下圖所示:

MessagesViewController示意圖.png

3堕仔、我們還能做些其他的什么?


????那么除了固定的sticker貼紙app晌区,我們還能做些其他的什么嗎摩骨?
????當(dāng)然,iMessage Extension App并不只有那么一小塊顯示區(qū)域朗若。我們還可以自定義expanded控制器恼五,來(lái)實(shí)現(xiàn)其他需求。
????下圖是一個(gè)compact控制器與expanded控制器切換交互哭懈,并給compact控制器添加新sticker的一個(gè)演示:

compact與expand切換交互.gif

????接下來(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控制器了容达。

控制器目錄.png

????其中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)還是可以的咏尝。???

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末压语,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子编检,更是在濱河造成了極大的恐慌胎食,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件允懂,死亡現(xiàn)場(chǎng)離奇詭異厕怜,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén)粥航,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)舵揭,“玉大人,你說(shuō)我怎么就攤上這事躁锡。” “怎么了置侍?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵映之,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我蜡坊,道長(zhǎng)杠输,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任秕衙,我火速辦了婚禮蠢甲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘据忘。我一直安慰自己鹦牛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布勇吊。 她就那樣靜靜地躺著曼追,像睡著了一般。 火紅的嫁衣襯著肌膚如雪汉规。 梳的紋絲不亂的頭發(fā)上礼殊,一...
    開(kāi)封第一講書(shū)人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音针史,去河邊找鬼晶伦。 笑死,一個(gè)胖子當(dāng)著我的面吹牛啄枕,可吹牛的內(nèi)容都是我干的婚陪。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼射亏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼近忙!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起智润,我...
    開(kāi)封第一講書(shū)人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤及舍,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后窟绷,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體锯玛,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了攘残。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拙友。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖歼郭,靈堂內(nèi)的尸體忽然破棺而出遗契,到底是詐尸還是另有隱情,我是刑警寧澤病曾,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布牍蜂,位于F島的核電站,受9級(jí)特大地震影響泰涂,放射性物質(zhì)發(fā)生泄漏鲫竞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一逼蒙、第九天 我趴在偏房一處隱蔽的房頂上張望从绘。 院中可真熱鬧,春花似錦是牢、人聲如沸僵井。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)驹沿。三九已至,卻和暖如春蹈胡,著一層夾襖步出監(jiān)牢的瞬間渊季,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工罚渐, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留却汉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓荷并,卻偏偏與公主長(zhǎng)得像合砂,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子源织,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容