About Andorid Widget GUI Design

今天因為案子的需要，在公司做了一個關於Andorid Widget的Search，網路上關於Android的資料很多，但對於一個Coding能力較弱的UI設計師來說，目前鮮少有和Android Widget GUI設計相關的資料(是 Widget 太冷門嗎...)，比較多的倒是貨真價實的Source Code，因此，在這邊分享下心得。

1. Andorid使用dp值作為繪製螢幕上物件的計算單位，而非使用平常繪圖時用的px。當然，在Widget的設計上也不例外。在下面會提到dp與px的換算方法。

2. 簡單來說，Dp(Density-independent pixel) = 不同設備顯示效果不同；

Px(pixel) = 不同設備上的顯示效果相同。

3. 接下來就是介紹如何換算1 px = x dp了，其實這兩個數值間的換算很簡單，有公式可直接套。公式 :

這裡貌似又出現一個新的名詞 －像素密度，沒關係一樣有公式可解套 :

所以藉由以上的公式，我們就可以得到我們所需要的資料。假設今天要在一台 resolution 1280 x 800，screen size 為10.1吋的tablet上做GUI，這台tablet的像素密度大約為160 (數字出來不會很漂亮，四捨五入即可)。

而這台tablet 的 px值就等於 :

最後，我們終於得到了這台resolution 1280 x 800，screen size為10.1吋tablet的px值為1。

4. 在介面設計上，Android使用Cell(格)為單位，Cell的計算方式請參考下圖 :

可以發現是有順序可循的。而在Widget的設計上Google官方則建議，不要超過4 x 4 個Cell，因為如果超過這個範圍，Widget在不同尺寸的裝置上顯示時，有可能會發生不相容的情形。

而根據之前所述的dp值換算法，假設機器依然是使用resolution 1280 x 800，screen size為10.1吋的tablet，在這台tablet上1個Cell的大小就是40 px * 40 px，所以，在做GUI設計時要注意大小不能超過250px * 250px。Cell的部分如下圖

紅色部分為4x4 Cell的範圍，藍色為1個Cell的範圍

以上就是Andorid Widget Design的心得分享~ 謝謝收看

P.S

resolution 1280 x 800，screen size為7.7吋的tablet的dp值為 : 1dp = 1.225px

Reference

http://developer.android.com/guide/practices/ui_guidelines/widget_design.html

80