天天看點

《Android UI基礎教程》——1.4節工具

本節書摘來自異步社群《android ui基礎教程》一書中的第1章,第1.4節工具,作者 【美】jason ostrander,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

1.4 工具

android ui基礎教程

android sdk中包含可協助你開發應用的一整套工具。其中包括sdk工具和平台工具。sdk工具,包括adt,是獨立于平台并且不管你是為哪個android版本開發應用都能夠使用的。平台工具是針對特定的android版本的并且在更新sdk版本時需要重新安裝。讓我們把注意力集中在sdk工具上來,尤其是那些被用來開發android應用ui的工具。

1.4.1 android開發者工具

開發android應用的主要工具是使用adt插件的eclipse ide。eclipse是一個強大的、多語言的開發環境,擁有諸如代碼補全、内嵌文檔以及自動重構等多項特性。你可以使用eclipse來開發應用,使用标準的eclipse java debugger進行調試,甚至可以簽署在android market上釋出的釋出包。在adt中繼承了許多工具,你應當熟悉使用它們。在這裡,我将把重點放在建立android應用的使用者界面的工具。其中最主要的是圖形化的布局編輯器。

圖形化布局編輯器

圖形化布局編輯器允許你通過拖放來建立ui。在早期版本的adt中,圖形化布局編輯器并不是很有幫助。幸運的是,最新版本非常強大,可以用來建立複雜的包含有複合元件以及動畫的布局。

圖1.12展示了圖形布局編輯器的各個元件。

《Android UI基礎教程》——1.4節工具

1.configuration下拉菜單讓你可以改變目前布局展示的方式。這是檢視在諸如手機和平闆電腦等不同硬體配置下的ui的一個快捷方式。

2.canvas展示了将在特定硬體配置下顯示的目前布局。布局包括一組指定上下文的按鈕,這被用來快速改變選擇的視圖的參數。你可以從palette拖曳視圖并把它們放在這兒進而建構ui。你還可以右擊元件以得到可用配置的指定上下文的清單。你還可以重用這個清單來重構ui使其成為可複用的元件。

3.palette包含android使用者界面的基本構模組化塊。在這裡你可以找到基本的布局容器、控制形式(包括按鈕和文本輸入)、甚至像過渡動畫等進階功能。你可以拖動任意元件到canvas中來建立ui。當你拖動元件到canvas上時,它們将會捕捉到已存在的子產品的邊緣,自動對齊布局。

4.outline通過有層次地列出所有元件展示了布局的全貌。這樣可以很容易地看出各元件之間是如何嵌套的。它同樣也讓發現隐藏的或者不可見的元件更加容易。你可以使用這個視圖來快速記錄布局的元件。

5.在圖形布局編輯器底部的是切換到ui的标準xml視圖的tab。雖然你可以通過使用圖形布局編輯器完成很多工作,仍然建議你通過手工編碼完成最終布局的xml。

《Android UI基礎教程》——1.4節工具

圖形化布局編輯器非常強大。你應該花一些時間去了解可用的選項。讓我們試用一下,給布局加幾個按鈕和文本框。

1.在eclipse的package explorer中,展開項目的布局res / layout`` 檔案夾。

2. 右擊名為main.xml的檔案并選擇打開方式android布局編輯

器(圖1.3)。

然後将會出現圖形化布局編輯器。在開始編輯之前,可能需要先進行一下裝置配置。在視窗頂部的控制欄是關于裝置的android版本、主題、螢幕大小、朝向等的詳細說明。

3.如圖1.14所示配置選項。為了使更改生效,你可能需要關閉并重新打開main.xml檔案。

《Android UI基礎教程》——1.4節工具

4.現在嘗試拖一個textview到編輯器中,就放在現有的textview的下面。注意到你隻能将其放在現有視圖的上面或者下面。還記得前面提到的linearlayout容器嗎?它是豎直朝向的,是以你在它裡面隻能垂直排放視圖。現在試着改變這個textview的大小。

5.讓它與視窗的寬度相同。

6.在新建立的textview下面加一個按鈕,并讓按鈕的寬度與視窗的寬度相同。現在可以看到它與圖1.15非常類似。可以看到,圖形化布局編輯器使得友善快速地建立複雜布局變得可能。

《Android UI基礎教程》——1.4節工具

1.4.2 android虛拟裝置

android設計用于在多種硬體上能夠運作。是以在應用釋出之前檢驗代碼使其能夠與絕大多數android裝置相容,這一點很重要。這個時候,就有了android虛拟裝置,或者叫做avd。avd是一個模拟的android裝置。它不僅僅是一個模拟器,實際上它能運作完整的android架構,就像真實的裝置能做的那樣。這是一個重要的差別,它比一般的模拟器要好得多,能夠更好地代表現實世界中的裝置。

由于avd是虛拟裝置,它們使用标準的android圖形棧。對于平闆電腦之類的高分辨率的avd來說,它們太慢了。google正在努力改善這一點,但從現在來看,還是建議使用圖形化布局編輯器來測試布局,并隻在最終驗證的時候使用模拟器。當然,你總是可以使用一個真實的android裝置來進行測試。

當你運作hello world應用時就已經建立了一個avd了。你使用avd manager做到這一點。通過avd manager,你可以建立一系列的有着不同硬體特點的模拟裝置,包括以下内容。

螢幕尺寸和預設朝向。

硬體支援,如加速器和遊戲搖桿。

android作業系統版本。

sd卡存儲,使用你的磁盤模拟。

總之,許多手機制造商制作了特定的avd來幫助在他們的硬體上進行測試。你應當建立一系列的虛拟裝置并逐一測試,保證應用程式具備最大的裝置相容性。

提示: 模拟器對于測試應用程式很有用,但是它不能模拟所有的硬體功能。例如,沒有對于模拟opengl圖形、近場通信(nfc)、甚至是wi-fi的支援。要保證最大的系統相容性,你必須總是在一個真正的硬體裝置上測試應用最終版本。

1.4.3 層次浏覽器(hierarchy viewer)

無論開發什麼應用,程式響應速度快這一點都很重要。通常來說,反應遲緩的應用程式是由于在畫ui時影響了速度。為了幫助在這些情況下進行調試,android增加了一個叫做hierarchy viewer的工具。顧名思義,這個程式将顯示應用的完整布局層次,允許你對潛在的問題進行優化和調試。

注意: 出于安全考慮,層次浏覽器隻連接配接到運作有開發者版本的android的裝置。事實上,你隻能在已有root權限的手機或者模拟器上使用層次浏覽器。

通過運作android sdk目錄下的可執行的tools/hierarchyviewer使用層次浏覽器。

1.現在運作層次浏覽器并選擇hello world應用。

2.點選load view hierarchy按鈕,你将會看見如圖1.16所示。

hierarchy viewer有4個主要組成部分。

左側邊欄根據每個裝置的運作過程顯示所有已連接配接的裝置。在這裡你可以選擇你的應用。

樹形視圖是ui布局的圖形表示。你可以清楚地看到布局是由哪幾個部分組成的。繪制擁有許多嵌套元件的大布局比起制作簡單的布局要花長得多的時間。如果仔細觀察,你會在一些元件上看到彩色的圓圈。這會直覺地展示繪制該視圖以及其子視圖所花的時間。綠色是較快,紅色是較慢。點選視圖可以得到關于其繪制時間的更多資訊,同時可以看到該視圖出現在螢幕上的預覽。

樹形概覽提供了一個整體層級的快速放大視圖,讓你可以快速感覺到布局的複雜度。這個窗格同時提供關于樹形視圖窗格的快速導航。

布局視圖展示了應用實際展示的輪廓。這能夠幫助在實際展示的ui中定位視圖元件。通過點選窗格中的内容,你可以看到展示的内容分别對應哪個元件。

如果你自己觀察hello world應用的層級,你可能會注意到它包含比列在main.xml中更多的元件。下面是一個簡單解釋。

最上面的元件是phonewindow。這代表該裝置的展示。它總是存在并且是除了通知欄之外整個展示的基礎容器。這不是在main.xml中的linearlayout。相反,這個布局是系統繪制的,目的是為了在内容上展示标題欄。注意到額外的framelayout和textview了嗎?那個是該應用的标題欄。如果運作的程式沒有标題欄,那麼這個布局将會被删除。

另一個framelayout是應用。這個布局包含了一個子linearlayout。子linearlayout來自于例子中的main.xml檔案。它包含兩個textview和你早先在hello world應用程式中建立的按鈕。

hierarchy view在調試嵌套的linearlayout時尤其有用。如果你開始建立多層次的linearlayout布局,考慮切換到relativelayout以降低複雜度。

1.4.4 用ddms截屏

虛拟調試監視伺服器(ddms)是一個能夠捕獲應用狀态的強有力的工具,包括正在運作的線程數、堆的使用情況、對象配置設定以及日志。這些特性都是在本書所述範圍之外的,ddms另外還有一個非常重要的功能,這個功能所有的應用開發者都會需要:它允許你能獲得應用程式的螢幕截圖。要運作ddms,在eclipse中選擇window >open perspective > other > ddms。在裝置窗格中選擇你的裝置,然後點選相機圖示(圖1.17)。這将會打開裝置截屏視窗。在這裡你可以旋轉圖像,重新整理并重新捕獲螢幕以及儲存。

《Android UI基礎教程》——1.4節工具

注意: android 4.0版本及以上無需使用ddms也可以截圖。隻需同時按住電源和音量向下按鈕,然後截圖就會儲存在裝置圖檔庫中。

1.4.5 其他工具

除了通用的android ui工具之外,還有一些工具對于完善應用ui非常有用,但這些工具大多鮮為人知。

draw9patch

在一個裝置上android應用程式所使用的圖像往往會被拉伸以填滿可用區域。這會使圖像變得扭曲,最終造成難看的圖形。android使用一個稱作9-patch的圖像去處理縮放而不會導緻失真。例如,在android中所有的按鈕都是9-patch圖像縮放而來,但是它們的邊角卻都保持合适的形狀(圖1.18)。一個9-patch圖像其實就是一個标準的圖像檔案,隻不過多了1像素的邊框。通過把邊框中的像素點變成黑色,在放大時你可以看到圖像的哪些部分可以被拉伸。android sdk提供了建立這些圖像的draw9patch指令行工具。

《Android UI基礎教程》——1.4節工具

圖1.18 draw 9-patch工具的一個例子。按鈕可以延伸,但邊角保持不變

layoutopt

手動優化布局非常乏味。layoutopt工具通過分析布局并展示視圖層級上無效率的地方可以為你做的一些事情。這個指令行工具需要一個xml布局檔案清單,或者檔案目錄,然後可以輸出它的分析結果。盡管這對于調試複雜的層級來說并不足夠,但它可以在修複布局變慢時提供一個快速方法。

android asset studio

monkey

在建立應用程式時,徹底測試使用者體驗的每一個方面至關重要。很難真正測試一個ui,因為應用的開發者對于界面非常熟悉并且不會去做那些預料之外的或者隻是古怪的事情——比如在旋轉手機時同時按多個按鈕。這個時候就可以用到monkey工具了。monkey按照指定的次數疊代,并且會随機地點選螢幕的各個區域,改變裝置的朝向,點選音量和媒體鍵,總之會做很多瘋狂的事情。這通常是找出意想不到錯誤的簡單方式。