2014年7月26日

iOS 7 開發教學 - 製作有模糊效果的 View ( iOS 7 Make a blurred view tutorial )

iOS 7 其中一大特點就是在操作界面上大量運用模糊效果,因此我們可以在開發 App 中使用這個效果,本篇將要介紹如何製作模糊效果的 View。



製作模糊效果有很多種方法,不過今天要使用的方法相當簡單。首先來看成果:


本次達成模糊效果的的方法出乎意外地是利用 UIToolbar,因為 ToolBar 本身就帶有 Blurr 效果,所以將 UIToolbar 延展成可以覆蓋特定區塊就可以了。接下來的範例是透過 Navigation Controller 與 UIWebView 組成,因此範例的 blurred 區塊會是 UIWebView 的部分。

製作 Blurred View:
建立一個 UIToolbar,設定大小符合要遮蔽的區塊,最後將這個 UIToolbar 加入至 SubViews 中,參考如下圖:



變更 Blurred View 的顏色:
因為是利用 UIToolbar 物件,所以我們當然也可以使用 setBarTintColor 來變更顏色,參考如下:


以上就是製作 Blurred View 的簡單方法。其他 iOS 相關開發教學可以參考本篇整理