2014年7月25日

iOS 7 開發教學 - 製作自訂的 Overlay ( iOS 7 Make a custom overlay tutorial )

在網頁我們常常會用到淡入、淡出的 overlay 或 modal 等類似的操作,在開發 App 中我們當然也可以加入這種操作的方式,本篇就是要介紹怎麼製作自訂的  overlay 。



首先必需了解要達成 overlay 或 modal 可以有很多種不同的方式,本篇要介紹的是比較簡單的直接在主要顯示的 View 裡面加入一個 SubView 來覆蓋畫面,可重複使用性與效能的問題就先不列入討論範圍,成果參考如下圖:



上面的範例主要是由 Navigation Controller 與 UIWebView 組成的畫面,透過 Navigation Bar 上面的兩個按鈕來控制 overlay 的顯示與關閉,所以本範例的 overlay 主要是針對覆蓋 UIWebView 的區塊,因此各位朋友請各自針對你的 App 做調整。接著就來實作 overlay,不過按鈕綁定動作的部分這邊就略過。

顯示 Overlay:
首先在 Show 按鈕觸發動作時建立一個 UIView 並設定相關參數如下圖:


別忘了,本範例要遮蔽的區塊只有 WebView 所以最後一行程式碼是把 UIView 加入 UIWebView 裡面,遮蔽的區塊根據你自己的 App 調整。


關閉 Overlay:
關閉 overlay 這個動作描述有點不精準,實際上應該是移除上面建立的 UIView 物件,也就是透過 removeFromSuperview 來移除 overlay,參考如下:


這邊必須解釋一下,從 SubViews 裡面找出我們所加入的 overlay 的方法有很多種,以上只是簡單的範例而已。


最後彙整:
最後列出簡單的程式碼給大家參考,額外判別是否要顯示 overlay 的判斷式只簡略的加入,肯定是不夠嚴謹的,請大家根據自己的方式修改。程式參考如下:


以上就是簡易製作自訂的 overlay 的方法。其他 iOS 相關開發教學可以參考本篇整理