客服獺

精選標籤

【電獺RD技術森林】 產品的生態系

https://supr.one/1tED-Jw0

分類 | 科技
置頂文章

iOS13 - force touch peek&pop 功能移轉到 menuContextInteraction

2019/12/09 17:29

Tags: iOS 3D touch iphone

3D Touch 走入歷史

2019 年蘋果發表了 iPhone 11 系列,全面從硬體層拔除了 3D touch 支援,不論是 iPhone 11 還是 iPhone 11 pro 都沒有搭載 3D Touch 模組,正式宣告 3D touch 即將走入歷史。

這個改動也在 iOS 上有相對應的痕跡。

可以看到的有,當你將手上的 iPhone 升級到 iOS13時,就算是有 3D touch 模組的 iPhone 6s ~ iPhone XS 系列,在使用原生系統操作,例如桌面按壓、鍵盤重壓、網頁重壓等等過去的 3D touch 操作,會感覺到使用體驗已經變成了新版的 Haptic Touch 觸感。

但有些人可能發現,在使用第三方 app 時還是可以使用 3D touch 功能,那是因為 iOS SDK 的 3D touch API 只有被註銷,還未被完全拔除,所以第三方 app 還可以繼續使用 3D touch 功能。

說好的只是 deprecated 呢?

上面這些都是在 iOS 13.2.3 出來之前的美好想像 — 好啊蘋果自己要拔沒關係,我的 APP 繼續支援,看能支援到哪裡算哪裡,總可以吧。

但是,這次 iOS 13.2.3 出來之後,大家可以發現 iOS 13.2.3 的「3D Touch 硬體支援 iPhone」也無法在第三方 app 中使用 3D touch 功能了,登愣。


Peek & Pop API deprecated in iOS 13.0

previewingContext:viewControllerForLocation:

Declaration The view controller whose view you want to provide as the preview (peek), or to disable preview.. Implement…developer.apple.com

- (nullable UIViewController *)previewingContext:(id<UIViewControllerPreviewing>)previewingContext viewControllerForLocation:(CGPoint)location API_DEPRECATED_WITH_REPLACEMENT("UIContextMenuInteraction", ios(9.0, 13.0));


https://developer.apple.com/documentation/uikit/uiviewcontrollerpreviewingdelegate/1621366-previewingcontext?language=objc

- (void)previewingContext:(id <UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit API_DEPRECATED_WITH_REPLACEMENT("UIContextMenuInteraction", ios(9.0, 13.0));



Migration 功能搬遷

可以看到文件裡面引導我們去使用一個叫做 contextMenuInteraction 的 API,他可以說是蘋果為 iOS 13+ 的 APP 提供 peek&pop 的新解決方案,使用方式也比過去的 peek&pop API 要簡單上許多。


contextMenuInteraction 的使用方式有兩種:手動為需要支援的 view 註冊,或是直接加在 TableView / CollectionView 下


方法一:手動註冊

手動生成 UIContextMenuInteraction ,並註冊 delegate

UIContextMenuInteraction *interaction = [[UIContextMenuInteraction alloc] initWithDelegate:self];

[self.myView addInteraction:interaction];


實作 delegate contextMenuInteraction: configurationForMenuAtLocation:

-(UIContextMenuConfiguration *)contextMenuInteraction:(UIContextMenuInteraction *)interaction configurationForMenuAtLocation:(CGPoint)location API_AVAILABLE(ios(13.0))

{

    return nil;

}


他需要我們回傳一個 UIContextMenuConfiguration ,這個 configuration 會定義當這個 view 被 haptic 叫起時出現的 menu 長得怎麼樣


-(UIContextMenuConfiguration *)contextMenuInteraction:(UIContextMenuInteraction *)interaction configurationForMenuAtLocation:(CGPoint)location API_AVAILABLE(ios(13.0)){

    //1. 這個 API 需要回傳一個 UIContextMenuInteraction

    UIContextMenuConfiguration *config = [UIContextMenuConfiguration configurationWithIdentifier:nil previewProvider:^UIViewController * _Nullable{

        //2. 當這個 view 被叫起時,要預覽哪個話面。

        //將要預覽的 viewController 回傳,如果不要客製化預覽畫面,可以回傳 nil 或是整個 previewProvider 代入 nil 即可

        return nil;

    } actionProvider:^UIMenu * _Nullable(NSArray<UIMenuElement *> * _Nonnull suggestedActions) {

        //3. 這邊定義出來的 menu 有哪些按鈕,由 UIAction 和 UIMenu 組成,最後將 UIMenu 回傳

        NSArray *buttons = @[];

        UIAction *action = [UIAction actionWithTitle:@"Button Title" image:nil identifier:nilhandler:^(__kindof UIAction * _Nonnull action) {

            //do something

        }];

        buttons = [buttons arrayByAddingObject:action];

        UIMenu *menu = [UIMenu menuWithTitle:@"My Custom Menu Title" image:nil identifier:niloptions:0 children:buttons];

        return menu;

    }];


    return config;

}


到這邊就完成一個客製化的類似peek&pop 功能。

如果是要放到 TableView 或是 CollectionView 上,又更簡單了。


方法二、在 UITableViewController / UICollectionViewController 中實作 menu 功能

下面以 TableViewController 為例,UICollectionViewController 也有對應的 API 。

要在 TableViewController 實作 ContextMenuInteraction 又更容易了。


在 iOS 13 以上,UITableViewDelegate 直接送你一個 function 告訴你使用者在哪個 indexPath 做了 Haptic Touch 操作並嘗試叫出 Menu

- (nullable UIContextMenuConfiguration *)tableView:(UITableView *)tableView contextMenuConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath point:(CGPoint)point API_AVAILABLE(ios(13.0)) API_UNAVAILABLE(watchos, tvos);



這隻 API 直接告訴你使用者在哪個位置做了動作,給你 IndexPath 和 Point。

//1. 記得加上 API_AVAILABLE(iOS(13.0))

-(UIContextMenuConfiguration *)tableView:(UITableView *)tableView contextMenuConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath point:(CGPoint)point API_AVAILABLE(ios(13.0)){

    UITableViewCell *cell = [self.mainTableView cellForRowAtIndexPath:indexPath];

    if(cell == self.adCell_trekSuprAd ||

       cell == self.adCell_mopubNative ||

       cell == self.adCell_trekNativeAd){

        return nil;

    }

    

    postObject *post = [self.arrayOfPosts objectAtIndex:indexPath.row];

    

    UIContextMenuConfiguration *config = [UIContextMenuConfiguration configurationWithIdentifier:nil previewProvider:^UIViewController * _Nullable{

         //2. 要 preview 的 viewController

          UIViewController *previewingVC = ...

          return previewingVC;

    } actionProvider:^UIMenu * _Nullable(NSArray<UIMenuElement *> * _Nonnull suggestedActions) {

        NSArray *buttons = @[];

        UIAction *openPost = [UIAction actionWithTitle:@"展開" image:nil identifier:nilhandler:^(__kindof UIAction * _Nonnull action) {

            UIViewController *nextViewController = ...

            [self.navigationController pushViewController: nextViewController animated:YES];

        }];

        

        UIAction *archive = [UIAction actionWithTitle:@"收藏" image:nil identifier:nilhandler:^(__kindof UIAction * _Nonnull action) {

                //do archive

            }];

        

        

        buttons = [buttons arrayByAddingObject:openPost];

        buttons = [buttons arrayByAddingObject:archive];

        UIMenu *menu = [UIMenu menuWithTitle:@"" image:nil identifier:nil options:0 children:buttons];

        return menu;

    }];

    return config;

}




到這邊就做好了 Menu 選單的功能啦。



總結

雖然 peek & pop API 提早被拉掉了很可惜,但是新的 contextMenuInteraction API 寫起來真的比以前的 previewingContext + CommitViewController 方便很多。


以前 API 只會告訴你使用者在哪個位置嘗試按壓 force touch,開發者還要自己從 point 換算成實際點了哪個 view,再回傳告訴系統要讓哪個 view 呈現「浮起來」的感覺。更別提 commit 時還會有一些 presenting/presented view controller 的 edge case 要避免的問題了。


現在這隻 API 是以直接掛在 view 上面的方式進行,同時也整合進 UITableViewController / UICollectionViewController delegates 中,開發者只要專心在可以客製化的項目上,其餘的 UI 效果則交給系統來處理。


話雖如此,身為原廠 3D touch 手感愛用者的小編而言,這樣的改動可說是喜憂參半。

【Supr.One 也可以這樣用 】貼文 v.s. 進階編輯

2020/02/04 15:48

Tags: 【Supr.One也可以這樣用 】

今天要介紹的是用一般貼文進階編輯寫出來的文章差別,究竟會發生哪些不同呢?

首先我們來看看貼文進階編輯編輯畫面會是什麼樣子:

差別看起來不大貼文的編輯區底下按鈕足足有 6 個,但是右邊的進階編輯卻少了一半,

我們來仔細瞧瞧「貼文」的編輯頁面長什麼樣:

「貼文」是可以快速進行文字編輯的一個方式,不過相對來說變化的效果就非常有限,文字上幾乎不能做變動,我也找不到插入圖片後會在文章內顯示的位置,簡言之「貼文」適合用於短篇文章或是不需圖片與文字互相交錯的文章上,如果要進行更精細的文字編輯,小編認為「進階編輯」會是一個更好的選擇。貼文的編輯方式小編一直是介在喜歡與不喜歡之間,但其實「貼文」還有一個小編很喜歡的功能,那就是聲音刊載!這個就請可愛的貝爾為我們示範音檔:「貝爾告訴你,週末玩什麼」- 颱風篇特別版聊天(上)


介紹完「貼文」,就繼續前進到進階編輯:


首先可以看到工具欄,常見的編輯工具由左至右依序是:粗體、斜體、底線、刪除線,再來是項目符號、升冪降冪,再來是文章內的標題大小。小編想許一個願望,希望坐在隔壁的隔壁的工程獺王陽明可以看到,如果圖片可以調整三種常見的尺寸在排版上會更漂亮!


接下來我們來比較看看利用「貼文」與「進階編輯」發佈的文章會有哪些差異吧!

左為貼文,右為進階編輯


這兩篇是同一篇文章包含文字以及圖片,但利用「貼文」撰寫出來的文章,文字會在上方圖片則是放在最底下,兩者是分開的。已「進階編輯」的方式就可以調整圖片是否要出現在版面上,這個例子小編把圖片放置在文字的最上方,再把文字放到下方,會呈現如圖片的樣子,但如果把圖片往下放,文字就會露出來,圖片就不會顯示出來了。


創作者可以依據這篇文章的目的去選擇要呈現的感覺,我有看到一些不錯的例子,像是以圖片做公告的話,就可以利用「貼文」來編寫,因為圖片會直接顯示在下方,使用者可以不必點進去文章內就可以瀏覽到圖片。但如果以燒賣研究所來看,大部分都是使用「進階編輯」,因為他們的內文都會有一張以上的圖片,若用貼文的形式會無法做文字與圖片的交錯排版。


看完這篇介紹,你會更喜歡「貼文」還是「進階編輯」呢?或是你會怎麼使用這兩種方式來做出適合你文章的排版呢?又或者你會想要許什麼樣的願望讓編輯區更豐富呢?可以許願,但成真的話......(看向隔壁的隔壁的工程獺王陽明)

【RD室日常】寫code以外的事 ⓵

2019/10/30 18:06

Tags: 【RD室日常】

小編要來記錄除了寫code以外的事情,不知道其他公司的 RD 室是不是也這樣?


這是工程獺買來的鯊魚娃娃,於是就有了這一系列的照片,讓我們繼續看下去......


這是一隻會工作的鯊魚...


他也很常載著小獺跟阿文一起出任務...至於是什麼任務以後就知道了!


RD室裡面本來有沙發,沙發上面有很多可愛的娃娃們,但後來沙發被搬走了,娃娃們只能在書架或是窗台上排排坐,某次地震把娃娃們都震下來了,豬排博士就把他們通通掛在衣架上,變成了這棵樹!

小編在收拾包包準備回家時,豬排博士就拍拍小編的肩膀指著上面說:「你看」

好好奇別家的 RD室?一起分享吧

提醒大家要小心不要照到太隱私和公司機密的照片喔!

【Supr.One 也可以這樣用 】提領款項時的大小事

2019/10/30 15:01

Tags: 【Supr.One也可以這樣用 】

這篇文章是給創作者看得,不過總有一天也許會成為創作者的你,不妨看看吧:)


提領款項時,有些規則比較複雜或是文字說明很難懂,我們一項一項來看吧!


  1. 請確實按下「提領」按鈕以利做後續的設定,且按下提領後才會將申請信送出,Supr.One 才收的到喔
  2. 請確實填寫「帳戶設定」,帳戶設定是為了要知道匯款的資訊。您可以設定帳戶類型,是屬於個人帳戶還是公司帳戶,以下為公司帳戶的範例畫面:
  3. Supr.One 是採月結制喔,也就是說以月為單位來進行款項提領,不接受單日喔
  4. 若您是在當月 10 號前申請提款,款項會在當月 20 號撥款
  5. 若您是在當月 10號後申請提款 ,款項則會在下個月 20 號後進行撥款,若遇上假日則順延至最近一個工作日撥款。


如果以上的敘述還是不能解決您的問題,歡迎來信至 service@aotter.net 將有專人為您解答喔!

【Supr.One 也可以這樣用 】兩步驟利用 GA 和 FB Pixel 來追蹤鐵粉團數據

2019/10/24 12:33

Tags: 【Supr.One也可以這樣用 】

「數據」對大部分電商而言,不只是一項可以用數字來說明使用者與網站的互動關係,同時也可以更進一步的去看整體的變化幅度。


目前小編接觸到的有 Google Analytics 和 Facebook Pixel,這兩個工具對新手來說是一個踏入數據界的第一步,除了要懂的去運用報表來說故事外,更有有個數據分析的思維,但這個思維小編還在慢慢建立中,期待有一天能徹底的做到「分析」這個動作。


該如何看到 Supr.One 鐵粉頁的數據呢?

僅用兩個步驟就能看到,但前提是必須要有 GA的帳號還有Facebook的帳號才能完成這個動作喔!


Step1. 在鐵粉團右上角的「成效數據」,點一下「編輯顯示」


Step2. 點開後在進階數據分析底下會看到可填入「Google Analytics」和「Facebook Pixel」,只要填入相對應的 ID 就可以追蹤到數據囉!


補充:

Google Analytics 的 ID 在左下角「管理」<< 資源」階層 <<「資源設定」內可以看到追蹤ID:UA-xxxxxxxxx-x,共 10 碼。


Facebook Pixel 的 ID 位於企業管理平台中的設定 << 資料來源中的「像素」<< 進到像素的頁面後的最上方會有一串編號 15 碼的編號

--

兩步驟完成數據追蹤,Supr.One 真的好貼心。•ㅅ•。,因為小編之前有寫部落格,但是部落格的追蹤碼要自己埋,超怕自己埋錯位置而沒辦法追蹤到數據,不知道大家都怎麼用 GA 和 Pixel ,是不是有創造出自己的一套看法呢?歡迎一起交流,讓我們一起激盪出更棒的火花吧!

【Supr.One 也可以這樣用 】通關密語 v.s. 優惠代碼

2019/10/24 10:34

Tags: 【Supr.One也可以這樣用 】

在 10 月底前內訂閱秋季方案的人,只要輸入折扣碼 hbd7saotter 就可以享有 89 折優惠喔!

本月 VIP 購物凡事滿 $2000 只要輸入優惠代碼,立即打 9 折喔!

優惠代碼請向各店家索取。


每次一到折扣日期,小編我就很常看到各大店家的廣告在誘惑我,告訴我放入購物車然後去結帳...

今天要來介紹如何在 Supr.One 使用通關密碼與優惠代碼,這篇主要是給創作者們的文章,文章內可以知道......

  1. 適用情境
  2. 如何設定「通關密碼」與「優惠代碼」兩個功能
  3. 設定時的注意事項


除了在折扣或是促銷季的時候可以看到這類型的廣告標語,最喜歡寫故事的小編再提供一個使用情境給各位:

某天分析獺忽然拍拍本編的肩膀說:「我們的鐵粉團流失了一些老顧客,必須把他們抓回來!」於是小編就給了長期贊助我們的顧客們一個折扣,在他們付款時只要輸入「生日快樂happybirthday」,就可以享有9折優惠,但這些要怎麼設定呢?讓我們跟著步驟一步一步的往下看......


Step1. 首先要設定一個折扣方案:我的創作 >> 鐵粉團 >> 優惠方案

Step2.建立一個新的優會方案

Step3. 閱讀完上述的注意事項後,請依序填入及勾選進行相關設定。

*填入您的活動標題(黃色箭頭)

折扣標的(綠色箭頭),該選項可以決定這個折扣是不是要開放給訂閱型的贊助方案還是單次付款

*這個範例是設定為訂閱與單次付款皆可使用

優惠類型(藍色箭頭)可以選擇要「通關密語」還是「隨機優惠代碼」

Step4. 這個範例是選擇通關密語,請注意不可超過20個字喔!

套用上限(黃色箭頭)可以選也可以不要選,用意在控制使用折扣的次數

折扣類型(藍色箭頭)您可以選擇要使用打折還是折抵金額

打折趴數(綠色箭頭)是以% off

* 折扣開始時間結束時間,開始時間代表按下確定送出後該優惠即刻生效,結束時間若不填寫則會永久生效

*按下確定送出時,會出現的創建後無法更改!(橘色箭頭),代表創建後就無法更改,只能刪除或是停用

*提醒您!如果您的優惠類型是選擇「隨機優惠代碼」,您是可以事後追加數量的:)

Step5. 看到按鈕顯示為綠色則代表已啟用該優惠方案喔!


設定時需要注意的地方有:

  1. 不管是「通關密語」還是「隨機優惠代碼」在按下確定送出後就是不可以再修改,但是可以事後追加優惠代碼
  2. 在這裡提醒大家平台方不會吸收您的折扣金額,在設定時請您要考量到這點眼再進行設定喔
  3. 隨機優惠代碼是不能重複使用的,一個只能使用一次喔

--

如果有什麼問題都可以在下面留言,或是來信至service@aotter.net 將有專人為您服務喔!

也歡迎大家創造出屬於自己的一套折扣方式,讓我們一起激盪出更棒的火花吧ヾ(●゜▽゜●)♡ 

成效數據

共 NT$ 金額

評分與評論

5.0 滿分五顆星

1 份評分

贊助方案

$ 1000

已售完

10/29(四) 我要一起跟辣机一起組鋼彈!

$ 隨喜贊助

喝杯咖啡