[CS193P] 第十四堂課摘要及心得筆記

在這一次的課堂上,我們將學習在iPhone開發平台上關於觸控事件的處理,而多點觸控的功能更是iPhone應用程式開發的重點,就讓我們一起來看看吧!
評論
評論

在這一次的課堂上,我們將學習在 iPhone 開發平台上關於觸控事件的處理,而多點觸控的功能更是 iPhone 應用程式開發的重點,就讓我們一起來看看吧!

觸控的序列

在 iPhone 的操作上面,像是如下圖般一筆劃的觸控動作,會被轉成一系列的 UITouch 物件,儲存在 UIEvent 之後傳遞給 view。

UITouch 物件描述了某支手指頭在觸控螢幕上得動作,包含以下這些屬性:

@property(nonatomic,readonly) NSTimeInterval	timestamp; // 觸控的時間點 @property(nonatomic,readonly) UITouchPhase	phase; // 觸控中的哪一階段(後面會有敘述) @property(nonatomic,readonly) NSUInteger	tapCount; // 連續點了幾下 @property(nonatomic,readonly,retain) UIWindow	*window; // 在哪個 Window 上點擊 @property(nonatomic,readonly,retain) UIView	*view; // 在哪個 View 上點擊 - (CGPoint)locationInView:(UIView *)view; // 在某個 view 上的座標位置 - (CGPoint)previousLocationInView:(UIView *)view; // 在某個 view 上的前一個座標位置

而 UIEvent 如同我們剛剛所提及的,是 UITouch 的容器,當我們有多點觸控的時候,這個容器就會包含數個 UITouch 物件。UIEvent 具有以下類別:

@property(nonatomic,readonly) NSTimeInterval timestamp; // 觸控的時間點 - (NSSet *)allTouches; // 所有的 UITouch 物件 - (NSSet *)touchesForWindow:(UIWindow *)window; // 回傳某個 windows 上的 UITouch 物件 - (NSSet *)touchesForView:(UIView *)view; // 回傳某個 view 上的 UITouch 物件

而以上這些物件均會傳透過 UIResponder 的方法傳遞給我們的應用程式,包含以下幾個方法:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; // 觸控開始 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; // 觸控點移動中 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; // 觸控結束 - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event; // 觸控取消

上面所謂的觸控取消,雖然僅會發生在很少的機會,像是忽然接到來電,但仍然不能忘記對這些物件進行處理,詳細的原因在課堂的稍後會在做解釋。

多點觸控

在我們要開始接收包含多個 UITouch 的 UIEvent 物件之前,我們必須先將 UIView 的 BOOL multipleTouchEnabled; 屬性設定成 YES 才行。

而當使用者若同時將兩隻手指放在 iPhone 上時、或者是兩隻手指頭同時在螢幕上移動時,我們就會接收到包含多個 UITouch 物件的 UIEvent。但需要注意的是,如果使用者將兩隻手指同時放在畫面上,但只有一個手指在移動,這樣我們所接收到的 UIEvent 物件只會包含在移動中的 UITouch 物件!

而若是兩隻手指分別在不同的 View 上呢?那兩個 View 分別會接收到 touchesMoved: withEvent: 的呼叫,並且除了自己 view 上的 UITouch 物件之外,也會收到另外一個 View 上得 UITouch 物件。

然而,有時候我們不希望使用者可以同時操作兩個 UIView 物件,特別是我們在開發遊戲的時候,我們可能會禁止使用者同時移動並且開火,這時候我們就可以設定 UIVIew 中的 BOOL exclusiveTouch; 屬性為 YES,這樣一來就可以避免同時有兩個以上的 View 接收到 UIEvent 物件了。

或許當讀者看到上面的方法會感到好奇,那 iPhone 是如何判斷某個 Touch 是屬於哪個 View 呢?事實上,iPhone 會透過呼叫 hitTest:withEvent: 這個測試方法,測試 UIWindow 上的每一個 view 是否符合以下三個條件:

  • userInteractionEnabled 屬性是否為 YES
  • hidden 是否為 YES,或是 alpha 設定在一個很低的數字(也就是透明)
  • 透過呼叫 pointInside:withEvent: 檢查觸控點是不是在 view 的範圍內

當某個 UIView 符合以上條件的話,iPhone 就會繼續測試其底下所包含的 subviews,直到找到最適合的 view 為止。

而當找到 View 之後,會對其 UIViewController 呼叫 (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; 等方法傳遞 UIEvent 物件。但若是最底層的 View 沒有實做這個方法回應觸控事件的話,則會往 superview 傳遞 UIEvent 物件。然後重複這個循環,直到找到可以回應觸控事件的 View 為止,而若是所有的 superview 對於目前的 UIEvent 物件沒有處理的話,則會轉而呼叫 UIWindow 甚至是 UIApplication 進行處理。整體的階層架構如下圖:

最佳作法

iPhone 開發平台釋出也有一段時間了,隨著越來越多的應用程式開發完成,開發者們也對於觸控事件有一些常見的錯誤及解決方法,以下就是幾個常見的開發好習慣:

當某個 View 被 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event; 方法回傳,也就代表他應該要處理所有的觸控事件,包含以下四個:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;

由於大多數的觸控處理都會暫時將 UIEvent 儲存起來以跟後續的觸控行為進行比對、計算,而如果我們漏掉處理其中某一種(特別是觸控取消時),就很有可能造成物件產生無法預期的錯誤。

而當我們需要繼承 UIView 建立自己的 View 類別時,也必須遵守以上的慣例,也就是處理每一個階段的觸控事件。而且要注意,在這些處理方法中千萬不能向上呼叫父類別的處理方法。

至於若是繼承其他 UIKit 的類別,像是 UIButton 時,你可以選擇處理某些觸控事件即可,但是跟上面相反的是,你必須在每個觸控事件處理方法呼叫父類別的相對方法,否則物件原有的觸控反應將會無效。

最後,如果你萬不得已,非得需要將某個觸控事件轉移給別的 View 的話,那要記得那些 View 必須是自己設計的 UIView 子類別,因為 UIKit 內建的類別並不保證可以在這樣的狀況下正確運作。

結論

相信各位讀者應該在這次的課程中,對於觸控的事件處理有很詳細的了解,也已經可以透過這些知識設計出多點觸控的應用程式了!在下一次的課程中,我們將探討那些在 iPhone SDK 中所附的模擬器中無法測試的硬體功能,像是羅盤、GPS 或者是加速度計等等,請繼續鎖定本連載!

參考資源


不只業績成長率翻倍,還吸引 95% 新客:惠普運用蝦皮購物優勢,切入講究效能與資安的疫後混合工作市場

台灣惠普(HP)透過與蝦皮購物合作,活用蝦皮購物在行銷與流量經營的優勢,搭配「月月盛典」活動及活潑的促銷機制,擬定客製化促銷策略,創下業績成長率翻倍,並吸引 95% 新客的銷售佳績。
評論
Photo Credit:惠普
評論

「在哪裡都能工作」是否聽起來很浪漫、很吸引人?但想要「耍浪漫」可是有最基本的門檻——更強大的資安與效能更佳的電腦設備。

當融合遠距與辦公室的混合工作(Hybrid Work)模式已成為疫情後「回不去」的主流,長期以強力的資訊安全與高相容性軟體在市場佔有一席之地的台灣惠普(HP),透過與蝦皮購物合作開設品牌旗艦店,除了於甫落幕的「618 全民年中慶」電商大促消創下當日業績成長率逼近 1 倍的亮眼佳績,更在商城狂購節吸引高達 95% 新買家,成功打入疫後時代更重視產品規格與效能的年輕客群。

Photo Credit:惠普

浪漫的混合工作模式,更需要惠普產品的高效能、高資安

「只要產品有接上網路,就得考量資安議題。」台灣惠普資訊科技董事長暨總經理王靜秀在訪談中的短短一句話,精準道出惠普產品在台灣市場的品牌定位。

成立超過 80 年的惠普,當年兩位創辦人把矽谷自家車庫當作基地,從零開始打造企業的故事,已是矽谷「車庫文化」的典範。如今,惠普的筆電產品不僅在歐美地區為領導地位,在 3C 商品競爭更激烈的台灣市場裡,惠普藉由主攻高資安、高相容性軟體解決方案等特點,亦站穩中高階的電腦、列印產品市場。

而疫情後再也「回不去」的混合工作趨勢,讓使用者在辦公室與其它空間之間往返時,他們除了在乎電腦設備的體積輕薄、高效能,更得考量在公司網路與其他環境網路之間切換時,對科技裝置可能帶來的資安風險。

這些工作大環境變遷,都讓今天的消費者「不再惟價格是問」,反倒更在意產品的規格、穩定度,也讓惠普產品在疫後崛起的混合工作時代更受台灣市場歡迎。

Photo Credit:惠普

蝦皮購物幫你「客製化」促銷,成為高單價商品銷售動能

只是,儘管惠普長期與台灣各大電商通路合作,但王靜秀表示,目前較熟悉惠普品牌的台灣消費者仍以 30 歲以上客群為主,也坦言:「我們希望讓更多年輕使用者認識惠普。」

雖然年輕客群是絕大多數線上銷售的主力,但如同高單價 3C 市場有不同定位,她也觀察到蝦皮購物擅長觸及與其他電商平台不同的線上客群。最初,蝦皮購物剛進入台灣時主打 C2C (個人對個人)交易,吸引不少年輕客群在平台上頭「挖寶」高 CP 值商品;而隨著蝦皮購物近年著重行銷與流量經營,並透過「月月盛典」活動及活潑的促銷機制,協助各品牌擬定客製化促銷策略,蝦皮購物也漸漸成為高單價商品的線上熱門銷售平台。

因此,在促銷檔期起跑前,惠普行銷團隊會針對旗下各個產品,與蝦皮購物的專案經理討論行銷操作主軸,好讓不同產品線、不同價格帶的商品都能輪流曝光。

以月初登場的 「月月盛典」為例,屬於中高階定位、價格超過新台幣 2.7 萬的 16 吋 Victus 電競機,就是當時惠普在蝦皮商城品牌旗艦店的熱銷主力商品之一。以上半年最大檔「618 全民年中慶」為例,惠普的當日業績更創下年成長率近 1 倍。

Photo Credit:惠普

高達 95% 新客驅動成長!蝦皮購物「商城狂購節」助惠普擴大粉絲群

即便在非促銷檔期間,惠普在蝦皮購物的行銷腳步也沒停下過。每個月都會固定投放蝦皮購物結合自身第一手去識別化消費數據與 Facebook 廣告的新型態零售媒體「蝦皮 X Facebook 廣告」,隨時因應市場變動來精準調整廣告投放,以便提高轉換率。

舉例來說,惠普透過「蝦皮 X Facebook 廣告」協助事前規劃促銷活動、期間檢視以及事後檢討,順利讓今年 618 大促消當日廣告績效(ROAS)衝高到超過 32 倍,比起一般 ROAS 平均值約落在 7 倍,成效明顯高出不少。

而蝦皮購物站內所擁有的大流量,也挹注到力欲在台灣市場擴大客群的惠普。例如,去年正式上線、專為蝦皮商城品牌量身打造的每月 25 日「商城狂購節」,相較於每月固定舉辦的另外兩檔促銷活動,透過更精準的觸及蝦皮商城用戶,它不僅為惠普帶來更高訂單量、更多不重複訪客,還讓品牌旗艦店粉絲數已突破 2 萬名、有一定老顧客基礎的惠普,成功在活動期間吸引高達 95% 新客買單。

Photo Credit:惠普

延續車庫文化的創新精神,惠普攜手蝦皮購物衝出業績成長率翻倍

進軍台灣超過 50 年的惠普,延續當年「車庫文化」的創新基因,運用蝦皮購物數位行銷工具進行客製化促銷,除了成功銷售高單價商品、衝出業績成長率翻倍,也吸引大量新客並順利擴大粉絲群。在疫後時代發揮自家產品特色,以高效能、高資安等優勢再度攀上混合工作市場趨勢高峰。

掌握最新產業趨勢、品牌經營策略、蝦皮精彩案例,請追蹤 Shopee for Business 粉絲專頁、或收藏蝦皮購物媒體行銷官網

本文章內容由「蝦皮購物」提供,經關鍵評論網媒體集團廣編企劃編審。