iOS開發(fā)之3D Touch

專著:http://www.reibang.com/p/3443a3b27b2d

1.簡(jiǎn)單的介紹一下3D Touch

3D Touch的觸控技術(shù)费薄,被蘋果稱為新一代多點(diǎn)觸控技術(shù)怪嫌。其實(shí),就是此前在Apple Watch上采用的Force Touch拌倍,屏幕可感應(yīng)不同的感壓力度觸控噪径。

2.在模擬器上如何進(jìn)行3D Touch測(cè)試

聲明:可能由于本人技術(shù)水平有限,按照此方法未能在模擬器上實(shí)現(xiàn)3D Touch功能找爱,所以僅供參考!若有能實(shí)現(xiàn)者寺谤,請(qǐng)快告訴我喲K辈ァ!意狠!????

3D Touch 是一個(gè)很新穎的設(shè)計(jì),可是蘋果文檔有言:

With Xcode 7.0 you must develop on a device that supports 3D Touch. Simulator in Xcode 7.0 does not support 3D Touch.

看到這句話心是不是涼了一半闷板,是的,xcode7是支持3D Touch開發(fā)的遮晚,可是模擬器并不支持這個(gè)手勢(shì),我們只能在真機(jī)上進(jìn)行學(xué)習(xí)與測(cè)試巩梢,但是在IT的世界艺玲,從來都不缺拯救世界的人物,github上有人為我們提供了這樣的一個(gè)插件饭聚,可以讓我們?cè)谀M器上進(jìn)行3D Touch的效果測(cè)試:

git地址:https://github.com/DeskConnect/SBShortcutMenuSimulator

附.SBShortcutMenuSimulator的安裝和使用

其實(shí)安裝和使用并不需要怎么介紹,git主頁(yè)里介紹的很清楚法绵,這里在記錄一遍酪碘,其中只有一點(diǎn)需要注意,如果你像我一樣兴垦,電腦中裝有Xcode6和Xcode7兩個(gè)版本,那個(gè)Xcode的編譯路徑狡赐,需要做一下修改钦幔。

安裝:

在終端中一次運(yùn)行如下指令:

git clone https://github.com/DeskConnect/SBShortcutMenuSimulator.gitcd SBShortcutMenuSimulator

make

如果電腦中有多個(gè)Xcode版本,先做如下操作鲤氢,如果只有Xcode7,則可以跳過

sudo xcode-select -switch /Applications/Xcode2.app/Contents/Developer/

注意:上面命令中哨颂,Xcode2.app是你電腦中Xcode的名字揍庄,這里如要特別注意东抹,如果名字中有空格沃测,需要修改一下食茎,把空格去掉蒂破,否則會(huì)影響命令的執(zhí)行别渔。

之后在SBShortcutMenuSimulator的目錄中執(zhí)行如下操作:

xcrun simctl spawn booted launchctl debug system/com.apple.SpringBoard --environment DYLD_INSERT_LIBRARIES=$PWD/SBShortcutMenuSimulator.dylib

xcrun simctl spawn booted launchctl stop com.apple.SpringBoard

如果沒有報(bào)錯(cuò),我們可以通過向指定端口發(fā)送消息的方法來在模擬器上模擬3D Touch的效果:

echo 'com.apple.mobilecal' | nc 127.0.0.1 8000

其中哎媚,com.apple.mobilecal是應(yīng)用的Bundle ID ,如果要測(cè)試我們的應(yīng)用稻据,將其改為我們應(yīng)用的BundleID即可买喧,上面的示例應(yīng)用是系統(tǒng)日歷,可以看到模擬器的效果如下:

3.如何實(shí)現(xiàn)3D Touch功能

3D Touch的三大模塊

3D Touch功能主要分為以下三個(gè)模塊:

1淤毛、Home Screen Quick Actions

通過主屏幕的應(yīng)用Icon,我們可以用3D Touch呼出一個(gè)菜單姓言,進(jìn)行快速定位應(yīng)用功能模塊相關(guān)功能的開發(fā)查牌。如上面的日歷。

2兽泣、peek and pop

這個(gè)功能是一套全新的用戶交互機(jī)制胁孙,在使用3D Touch時(shí),ViewController中會(huì)有如下三個(gè)交互階段:

(1)提示用戶這里有3D Touch的交互稠鼻,會(huì)使交互控件周圍模糊

(2)繼續(xù)深按狂票,會(huì)出現(xiàn)預(yù)覽視圖

(3)通過視圖上的交互控件進(jìn)行進(jìn)一步交互

這個(gè)模塊的設(shè)計(jì)可以在網(wǎng)址連接上進(jìn)行網(wǎng)頁(yè)的預(yù)覽交互。

3慌盯、Force Properties

iOS9為我們提供了一個(gè)新的交互參數(shù):力度。我們可以檢測(cè)某一交互的力度值亚皂,來做相應(yīng)的交互處理。例如狞谱,我們可以通過力度來控制快進(jìn)的快慢禁漓,音量增加的快慢等。

4.通過實(shí)例來看是如何實(shí)現(xiàn)3D Touch功能的

用一個(gè)簡(jiǎn)單的相冊(cè)來舉例說明:

首先璃饱,創(chuàng)建Quick Action(用力按壓圖標(biāo)出現(xiàn)的標(biāo)簽)有兩種方式:靜態(tài)和動(dòng)態(tài)

①靜態(tài)創(chuàng)建的方式是在Info.plist文件中進(jìn)行聲明的

有兩種方式進(jìn)行編輯:

(1)第一種方法——如圖所示:

選擇紅色框中的選項(xiàng)

將上面的代碼填入Info.plist文件中

必填項(xiàng)(下面兩個(gè)鍵值是必須設(shè)置的):

UIApplicationShortcutItemType 這個(gè)鍵值設(shè)置一個(gè)快捷通道類型的字符串

UIApplicationShortcutItemTitle 這個(gè)鍵值設(shè)置標(biāo)簽的標(biāo)題

選填項(xiàng)(下面這些鍵值不是必須設(shè)置的):

UIApplicationShortcutItemSubtitle 設(shè)置標(biāo)簽的副標(biāo)題

UIApplicationShortcutItemIconType 設(shè)置標(biāo)簽Icon類型

UIApplicationShortcutItemIconFile? 設(shè)置標(biāo)簽的Icon文件

(2)第二種方法

直接在Info.plist文件中添加如下代碼(紅色方框中的代碼):

其實(shí)靜態(tài)添加的兩種方法都是在Info.plist文件中添加的荚恶,只是通過的方式不同。

②以動(dòng)態(tài)方式創(chuàng)建

動(dòng)態(tài)創(chuàng)建是在程序初始化的時(shí)候用代碼動(dòng)態(tài)添加食寡。UIApplication對(duì)象多了一個(gè)支持快捷方式的數(shù)組(shortcutItems)廓潜,如果需要增加快捷方式,可以賦值給shortcutItems屬性辩蛋。

可在rootViewController的viewDidLoad中添加(具體寫哪,可根據(jù)自己情況而定)伤为,代碼如下:

UIApplicationShortcutItem * item = [[UIApplicationShortcutItem alloc]initWithType:@"two" localizedTitle:@"標(biāo)簽2" localizedSubtitle:@"222" icon:[UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeLove] userInfo:nil];

// 設(shè)置自定義標(biāo)簽圖片

UIApplicationShortcutItem * itemTwo = [[UIApplicationShortcutItem alloc]initWithType:@"two" localizedTitle:@"標(biāo)簽3" localizedSubtitle:@"333" icon:[UIApplicationShortcutIcon iconWithTemplateImageName:@"jieri"] userInfo:nil];

UIApplicationShortcutItem * itemThird = [[UIApplicationShortcutItem alloc]initWithType:@"two" localizedTitle:@"標(biāo)簽4" localizedSubtitle:@"444" icon:[UIApplicationShortcutIcon iconWithType:UIApplicationShortcutIconTypeSearch] userInfo:nil];

[UIApplication sharedApplication].shortcutItems = @[item, itemTwo, itemThird];

說明:

1)系統(tǒng)限制每個(gè)App最多能夠顯示4個(gè)Action Item据途,其中包括靜態(tài)方式和動(dòng)態(tài)方式進(jìn)行創(chuàng)建的;

2)如果靜態(tài)和動(dòng)態(tài)方式同時(shí)使用的時(shí)候颖医,給UIApplication的shortcutItems賦值的時(shí)候不會(huì)覆蓋

按壓圖標(biāo)的效果圖

響應(yīng)回調(diào)

當(dāng)App在后臺(tái)的時(shí)候UIApplication提供了一個(gè)回調(diào)方法

- (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void(^)(BOOL succeeded))completionHandler NS_AVAILABLE_IOS(9_0);

我們依據(jù)這個(gè)回調(diào)中的shortcutItem的type和userinfo來做出不同的事件處理熔萧,代碼如下:

// 用來處理3D Touch觸發(fā)事件

- (void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void(^)(BOOL succeeded))completionHandler{

//判斷先前我們?cè)O(shè)置的唯一標(biāo)識(shí)

if([shortcutItem.localizedTitle isEqualToString:@"標(biāo)簽1"]){

NSArray *arr = @[@"hello 3D Touch"];

UIActivityViewController *vc = [[UIActivityViewController alloc]initWithActivityItems:arr applicationActivities:nil];

//設(shè)置當(dāng)前的VC 為rootVC

[self.window.rootViewController presentViewController:vc animated:YES completion:^{

}];

}

if ([shortcutItem.localizedTitle isEqual: @"標(biāo)簽2"]) {

// 點(diǎn)擊標(biāo)簽2時(shí)僚祷,顯示提示框

UIAlertController *alertC = [UIAlertController alertControllerWithTitle:@"OPPS!" message:@"啦啦啦" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *alert = [UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

}];

[alertC addAction:alert];

[self.window.rootViewController presentViewController:alertC animated:YES completion:^{

}];

return;

}

}

點(diǎn)擊標(biāo)簽1的效果圖

點(diǎn)擊標(biāo)簽2的效果圖

實(shí)際上就是贮缕,當(dāng)我們按壓圖標(biāo),出現(xiàn)標(biāo)簽,點(diǎn)擊某個(gè)標(biāo)簽后觸發(fā)的事件

在rootViewController中創(chuàng)建一個(gè)UICollectionView肋演,并實(shí)現(xiàn)其協(xié)議方法,代碼如下:

- (void)createCollectionView {

UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc] init];

/* API */

/* item 大小 */

flow.itemSize = CGSizeMake(100, 100);

/* 行間的最小間距 */

flow.minimumLineSpacing = 5.0f;

flow.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);

/* 創(chuàng)建collectionView對(duì)象 */

self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height - 64) collectionViewLayout:flow];

[self.view addSubview:self.collectionView];

self.collectionView.backgroundColor = [UIColor whiteColor];

/* 兩個(gè)協(xié)議 */

self.collectionView.dataSource = self;

self.collectionView.delegate = self;

[self.collectionView registerClass:[PicCollectionViewCell class] forCellWithReuseIdentifier:@"pic"];

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

return self.arrPic.count;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

PicCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"pic" forIndexPath:indexPath];

cell.backgroundColor = [UIColor whiteColor];

cell.name = [self.arrPic objectAtIndex:indexPath.row];

return cell;

}

整理圖片相關(guān)數(shù)據(jù):

- (void)handleData {

self.arrPic = [NSMutableArray array];

self.arrName = [NSMutableArray array];

for (int i = 1; i < 27; i ++) {

[self.arrPic addObject:[NSString stringWithFormat:@"%d", i]];

[self.arrName addObject:[NSString stringWithFormat:@"%c", i + 64]];

}

}

在自定義Cell中給圖片賦值

需要簽UIViewControllerPreviewingDelegate代理方法蜕乡,為了實(shí)現(xiàn)peek and pop功能

(1)peek功能的實(shí)現(xiàn)

Peek窗口的內(nèi)容其實(shí)是目標(biāo)VC【ps即將要顯示的ViewController】的一個(gè)實(shí)時(shí)快照梗夸,但它不可以點(diǎn)擊。Peek觸發(fā)階段有三種:

長(zhǎng)按【顯示一個(gè)焦點(diǎn)視圖辛块,觸發(fā)Peek的源視圖高亮铅碍,其它視圖都處于模糊狀態(tài)】

輕壓【顯示Peek窗口,此時(shí)如果Peek窗口支持Quick Actions胞谈,往上滑會(huì)顯示Quick Actions菜單,此時(shí)的Peek窗口是不可以點(diǎn)擊的】

重壓 【進(jìn)入到真正的ViewController】

Peek由一個(gè)可響應(yīng)事件的View觸發(fā)烦绳,默認(rèn)是關(guān)閉的,我們需要通過控制器的registerForPreviewingWithDelegate: sourceView:方法注冊(cè)午阵,第一個(gè)參數(shù)為UIViewControllerPreviewingDelegate的代理睹晒,Peek觸發(fā)輕壓時(shí)會(huì)調(diào)用其previewingContext:viewControllerForLocation方法,重壓時(shí)會(huì)調(diào)用previewingContext:commitViewController:方法伪很。第二個(gè)參數(shù)為觸發(fā)Peek事件的源視圖

首先要在viewDidLoad中進(jìn)行注冊(cè):

// 注冊(cè)預(yù)覽視圖的代理和來源視圖

[self registerForPreviewingWithDelegate:(id)self sourceView:self.view];

實(shí)現(xiàn)方法:

#pragma mark - 按壓圖片進(jìn)入預(yù)覽模式

- (UIViewController * _Nullable)previewingContext:(id_Nonnull)previewingContext viewControllerForLocation:(CGPoint)location {

ContentViewController *content = [[ContentViewController alloc] init];

NSIndexPath *index = [self.collectionView indexPathForItemAtPoint:CGPointMake(location.x, location.y - 64 + self.collectionView.contentOffset.y)];

if (index == NULL) {

return nil;

} else {

content.name = [self.arrPic objectAtIndex:index.item];

content.picName = [self.arrName objectAtIndex:index.item];

return content;

}

}

按壓圖片進(jìn)入預(yù)覽模式的效果圖

#pragma mark - 繼續(xù)按壓進(jìn)入查看圖片

- (void)previewingContext:(id_Nonnull)previewingContext commitViewController:(UIViewController * _Nonnull)viewControllerToCommit

{

viewControllerToCommit.view.backgroundColor = [UIColor whiteColor];

[self showViewController:viewControllerToCommit sender:self];

}

繼續(xù)按壓進(jìn)入查看圖片的效果圖

(2)pop功能的實(shí)現(xiàn)

在創(chuàng)建的ContentViewController中實(shí)現(xiàn)如下代碼:

首先在.h文件中聲明兩個(gè)屬性

@property (nonatomic, copy) NSString *name; ?// 圖片的文件名(如xxx.png)

@property (nonatomic, copy) NSString *picName; ?// 圖片名(如自己給圖片起的名字)

在.m文件中實(shí)現(xiàn)如下方法:

// 設(shè)置預(yù)覽視圖向上滑動(dòng)時(shí)出現(xiàn)的視圖

- (NSArray> *)previewActionItems {

UIPreviewAction *action1 = [UIPreviewAction actionWithTitle:@"Action 1" style:UIPreviewActionStyleDefault handler:^(UIPreviewAction * _Nonnull action, UIViewController * _Nonnull previewViewController) {

// 點(diǎn)擊此選項(xiàng)觸發(fā)

self.alertC = [UIAlertController alertControllerWithTitle:@"你查看的是:" message:[NSString stringWithFormat:@"圖片%@", self.picName] preferredStyle:UIAlertControllerStyleActionSheet];

UIAlertAction *alert = [UIAlertAction actionWithTitle:@"噢噢" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

}];

[self.alertC addAction:alert];

// 因?yàn)轭A(yù)覽視圖與根視圖不在一個(gè)視圖層級(jí)上锉试,所以需要通過根視圖去推出這個(gè)

[[UIApplication sharedApplication].keyWindow.rootViewController presentViewController:self.alertC animated:YES completion:^{

}];

}];

// 可以添加多個(gè)選項(xiàng)

NSArray *arr = @[action1];

return arr;

}

視圖向上滑動(dòng)時(shí)的效果圖

點(diǎn)擊Action1出現(xiàn)的效果圖

在viewDidLoad中添加如下代碼,將圖片顯示出來:

UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:self.name]];

image.frame = CGRectMake(20, 0, self.view.frame.size.width - 40, self.view.frame.size.width - 40);

image.center = CGPointMake(self.view.frame.size.width / 2, (self.view.frame.size.height - 64) / 2);

[self.view addSubview:image];

大概總結(jié)到這里贷笛,有待完善。乏苦。尤筐。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市盆繁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌革娄,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拦惋,死亡現(xiàn)場(chǎng)離奇詭異安寺,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)我衬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來井仰,“玉大人破加,你說我怎么就攤上這事俱恶》兑ǎ” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵聪全,是天一觀的道長(zhǎng)辅辩。 經(jīng)常有香客問我难礼,道長(zhǎng),這世上最難降的妖魔是什么讼呢? 我笑而不...
    開封第一講書人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任谦炬,我火速辦了婚禮,結(jié)果婚禮上键思,老公的妹妹穿的比我還像新娘。我一直安慰自己稚机,他們只是感情好获搏,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著纬乍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪仿贬。 梳的紋絲不亂的頭發(fā)上墓贿,一...
    開封第一講書人閱讀 49,071評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音聋袋,去河邊找鬼。 笑死幽勒,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的锈颗。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼击吱,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼遥昧!你這毒婦竟也來了绅喉?” 一聲冷哼從身側(cè)響起叫乌,我...
    開封第一講書人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎憨奸,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體排宰,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年党瓮,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了盐类。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡枪萄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瓷翻,到底是詐尸還是另有隱情,我是刑警寧澤齐帚,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布彼哼,位于F島的核電站,受9級(jí)特大地震影響沪羔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蔫饰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望茫因。 院中可真熱鬧杖剪,春花似錦冻押、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锹锰。三九已至漓库,卻和暖如春恃慧,著一層夾襖步出監(jiān)牢的瞬間渺蒿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工怠蹂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓挚冤,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親澳骤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345

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

  • 1.簡(jiǎn)單的介紹一下3D Touch 3D Touch的觸控技術(shù)为肮,被蘋果稱為新一代多點(diǎn)觸控技術(shù)肤京。其實(shí),就是此前在Ap...
    Camille_chen閱讀 12,040評(píng)論 19 33
  • 3D Touch是一種立體觸控技術(shù)忘分,被蘋果稱為新一代多點(diǎn)觸控技術(shù),是在Apple Watch上采用的Force T...
    暴_暴閱讀 1,241評(píng)論 1 9
  • 前言 3D Touch為用戶提供了全新維度上的交互重斑,在支持3D Touch的設(shè)備上肯骇,用戶可以改變手指的按壓力度使設(shè)...
    Qiuny閱讀 554評(píng)論 0 2
  • 3D Touch簡(jiǎn)介 2015年祖很,蘋果發(fā)布了iOS9以及iphone6s/iphone6s Plus,其中最具有創(chuàng)...
    簡(jiǎn)簡(jiǎn)蝸牛閱讀 601評(píng)論 0 0
  • 3D Touch簡(jiǎn)介 2015年假颇,蘋果發(fā)布了iOS9以及iphone6s/iphone6s Plus符相,其中最具有創(chuàng)...
    愛恨的潮汐閱讀 382評(píng)論 0 2