[Three20] Three20 模組架構簡介(下)

延續上一篇文章的介紹,在這次的文章中我們將繼續探索Three20的UI部份,這也是Three20中最令開發人員喜愛的部份。
評論
評論

延續上一篇文章的介紹,在這次的文章中我們將繼續探索 Three20 的 UI 部份,這也是 Three20 中最令開發人員喜愛的部份。

整體架構圖

在開始之前,我們先複習一下 Three20 的階層架構,我們在先前的文章中介紹了 Three20Core、Three20UICommon 和 Three20Network 這三個底層 framework,而這一次我們將轉到上面三個比較高階、與 UI 相關的 framework,也是 Three20 讓人感到最驚奇、最強大的部份。

------------------------------------------ |                    UI                  | ------------------------------------------ | UINavigator  |            |   Style    | |--------------|            |------------| |   UICommon   |            |  Network   | ------------------------------------------ |                   Core                 | ------------------------------------------

Three20UINavigator

在 Three20 中一個很重要的創新突破便是 URL-based navigation,透過這個機制我們可以將程式中原本切換畫面(Push、ModalView、TabBar)的繁瑣程式碼,簡化為開啟 URL 的動作。 這個概念對 Web 開發者而言應該相當熟悉,誠如我們在 Three20 介紹文章中提到過,Three20 的誕生起源於 Facebook 的 iPhone 版應用程式,所以我們很容易在 Three20 這個 framework 中看到許多關於 Web framework 的概念。 在 Three20UINavigator 中我們可以看到以下類別:

  • TTBaseNavigator -- 負責開啟 URL 的工作,只有部份功能、完整的 TTNavigator 則包含在 Three20UI 中
  • TTURLAction -- 除了要開啟的 URL 位置外,也有一些其他的 Property 可以設定、作為開啟 URL 的選項
  • TTURLMap -- 負責 URL 與 View Controllers 之間的轉換、Mapping

除此之外,Three20UINavigator 也有提供一些取得 Frame、Bounds 以及狀態列高度的方法,有興趣的讀者可以參考 TTGlobalNavigatorMetrics.h 這隻檔案中的內容。 URL-Based Navigation 的內容較多,筆者會在未來另外撰文解釋、說明。

Three20Style

除了上述提到的 URL-based Navigation 外,Three20 也引入了一個在 Web 開發上相當常見的 Stylesheet 概念。一般而言,我們若是在 iPhone 上面設計使用者介面時,必須針對每一個 UI 元件手動設定樣式,像是文字的字體、大小,或者是工具列的顏色等等。然而透過 TTStyle 和 TTStyleSheet 的設定,就可以免除我們每次重複設定 UI 元件樣式的麻煩。 此外,也有 TTStyleLayout、TTStyleText 等相關的類別,和一些 UIKit 的新增方法,像是:

  • UIImage
    • -- (UIImage*)transformWidth:(CGFloat)width height:(CGFloat)height rotate:(BOOL)rotate; -- 轉換圖片大小、旋轉圖片
    • -- (void)drawInRect:(CGRect)rect radius:(CGFloat)radius; -- 畫出有圓角的圖案
  • UIColor
    • -- (UIColor*)highlight; -- 回傳一個比現有顏色在更亮的顏色
    • -- (UIColor*)shadow; -- 同上,不過相反地回傳一個較暗的顏色
    • -- (UIColor*)copyWithAlpha:(CGFloat)newAlpha; -- 回傳一個同樣的顏色,但 alpha 不同

關於 Style 的部份的內容筆者也同樣會另外撰文介紹,敬請期待。

Three20UI

在先前 framework 的層層堆疊後,總算是到了最上層、也是最重要的 Three20UI 了。Three20UI 這個 framework 中包含了相當多的類別,大概可以分成三類:

  • UIKit 內建類別的新增方法
  • Three20 新增的 View Controllers
  • Three20 新增的 UI 元件

以 UIKit 的新方法而言, 以下幾個是比較有趣、值得注意的:

  • UINavigationController
    • -- (void)pushViewController:(UIViewController*)controller animatedWithTransition:(UIViewAnimationTransition)transition; -- 加入新的 Controller、但是使用非預設的動畫效果
    • -- (UIViewController*)popViewControllerAnimatedWithTransition:(UIViewAnimationTransition)transition; -- 同上、但是是移除 Controller
  • UITabBarController
    • -- (void)setTabURLs:(NSArray*)URLs; -- 傳入一組 URL 作為 tabs
  • UITableView
    • -- (void)scrollToTop:(BOOL)animated; -- 將 Table 捲動到最上方
    • -- (void)scrollFirstResponderIntoView; -- 捲動到目前開啟虛擬鍵盤的元件
  • UIView
    • -- (void)removeAllSubviews; -- 移除全部 subviews
  • UIWebView
    • -- (CGRect)frameOfElement:(NSString*)query; -- 回傳某 DOM 物件的 frame,傳入值為一 JavaScript expression

而 Three20UI 中所提供的額外 View Controllers 也是相當的豐富,像是:

  • TTViewController -- Three20 所使用的 View Controller 基礎類別
  • TTWebViewController -- 一個功能完整的網頁瀏覽 Controller
  • TTActionSheetController -- 將 UIActionSheet 包裝成 Controller 的形式,傳入 URL 作為按鈕
  • TTAlertController -- 同上,將 UIAlertView 包裝成 Controller 方便使用

另外還有許多 View Controller,有興趣的讀者可以參考先前介紹文章中的螢幕截圖、還有 TTCatlog 這個範例程式。

結論

在這兩篇文章中我們針對了 Three20 的各個模組做了一個概要性的簡介,在下一篇文章中我們將談談 Three20 中的額外擴充 framework,也就是 JSON/XML framework,還請各位讀者多多指教。



精選熱門好工作

iOS工程師

Omlet Arcade 美商歐姆雷特
臺北市.台灣

獎勵 NT$15,000

資深UX 設計師

萬欣網路科技有限公司
臺北市.台灣

獎勵 NT$15,000

Junior 前端工程師

GliaCloud 集雅科技股份有限公司
臺北市.台灣

獎勵 NT$15,000