2013年8月21日 星期三

UITabBar 客製化

[適用於 iOS SDK 5+]


如果你在 App Store 上看到 App 有 UITabBar,往往都不是 Apple 內建的樣式
那究竟要如何客製 UITabBar 呢?
這是身為一個專業的 iOS developer 必須知道的技巧

以下教學參考 "Customizing the UITabBar in iOS 5 and iOS " [1]

前置作業

準備以下三類圖片:
  • UITabBar 背景圖
  • Hightlight 時顯示的 Tab
  • Normal 時顯示的 icon

圖片大小請參考官方文件:Custom Icon and Image Creation Guidelines

開始Coding

我們利用 iOS SDK 5+ 之後提供的 API:appearance proxy 來打造屬於自己風格的 UITabBar
利用 appearance proxy 讓客製化 UI 變成十分簡單
所以在這邊就不多做解釋,直接看範例程式

另外,提供另一個方法來客製 UITabBar,請參考 [2]
此法便可以適用任何版本的 iOS SDK
然而其實這方法說穿了只是用新的圖示蓋掉原本的圖示而已
並非一個很好的方法,但在沒有 appearance proxy 時,是個快速便捷的方法
給各位參考囉~

[1] Customizing the UITabBar in iOS 5 and iOS 6, http://blog.erikvdwal.nl/blog/2012/09/25/customizing-the-uitabbar-in-ios-5-and-ios-6/
[2] iOS 擺脫內建UI,快速自製 Custom UITabBar, http://jwill.pixnet.net/blog/post/29978299-ios-%E6%93%BA%E8%84%AB%E5%85%A7%E5%BB%BAui%EF%BC%8C%E5%BF%AB%E9%80%9F%E8%87%AA%E8%A3%BD-custom-uitabbar