2011年1月27日 星期四

[Android] 調整UI layout的利器- hierarchyviewer

Visual UI design的工具在很多平台跟語言其實都有, 當然有好有壞啦, Android ADT也是有的, 所以並不稀奇, 不過Android有的是更好用的 - hierarchyviewer

一般WYSIWYG UI editor著重的是在開發時期拉UI layout的部份, 但更進階的通常就沒著墨了, ADT上的UI builder並不是很強, 真正要能夠調出複雜而且是自己想要的UI光靠那個也並不容易, 還是得對一堆layout有相當程度的了解才能比較得心應手, hierarchyviewer是屬於更進一步的工具, 他可以檢查做出來的成品的UI layout (當然也可以想辦法偷人家的看 :P), 由於Android上的layout設計是階層式的, 所以可以攤成樹狀, 由hierarchyviewer就可以很明顯看出各layout從屬關係, 並且可以從screen shot部分的對應看出某一段layout成果的長像是如何

此外還有一些更強的功能, hierarchyviewer可以幫你把整個畫面輸出成PSD 檔(Photoshop的檔案), 這不是只是簡單的輸出平面的screenshot, 而是利用PSD檔可以有層次(layer), 把畫面上不同的元件分作為不同的layer疊起來, 這樣從Photoshop就可以一目了然的看出是不是有哪些沒秀出來的原因是被另一個蓋到的

個人覺得最棒的是那個紅綠燈, 設計不良的UI的效能自然是很差, 這個紅綠燈就是幫助你把效能不好的地方抓出來, 分作三部分, layout, measure, draw, 可以由這三部分分析去進一步改善整體UI的效能