android app的類響應式設計【半月談投稿】本文也釋出于 oschina 部落格園....

進行android 開發以及有一段時間了,從大學的時候android 1.6開始關注,到現在android 4.2都出來了,一步步的見證了 android 的成長,今天,看了一下android版本的分布圖,根據google 的官方顯示android 4.0 以上的裝置已經有 34.2%,由于,國内很多的手機都沒機會用上google play市場,是以國内市場的情況,得看類似于友盟的季度報告才知道了,好了,反正個人覺得,android 4.0 以後裝置才能有讓人用的欲望,之前的版本受限于硬體,和系統的優化程度,個人覺得,除了打個電話,收個短信,看個微網誌,上個QQ以外,也沒多大讓人使用的 價值了,至于原因,知道的都會知道,不知道也就不知道了.現在,硬體技術的發展,我們很友善就能購買到性能足夠強勁,價格足夠廉價的android 4.0以後的手機和平闆,那麼,現在,我們學習android 4 的設計風格也算是不晚.

要解決android 應用什麼時候顯示一個pane,什麼時候,我們需要了解一些android 是如何解決各種分辨率下的相容性問題.

在做桌面軟體的時代,我們很少發現有人會吐槽,不同分辨率下的情況,至于原因,我個人覺得,第一,電腦的分辨率很多,但是螢幕的dpi/ppi 其實都差不多,這就使以像素為機關的計量參數在不同螢幕下的其實顯示差別不大,第二點,就是pc上的軟體的視窗是可調節的,而手機或者平闆上你很少看到 (當然,現在三星的一些android裝置支援這個).但是,移動裝置上就完全不同了,首先,産生相容性的問題,根源在于對顯示一個像素改多大的問題,在 高密度的手機螢幕上,一個像素被顯示的非常之小,那麼我們假設用100個像素本來是想顯示2厘米左右的長度,但是結果卻隻顯示了1厘米,第二點就是,移動 裝置不支援視窗的縮放,如果我定義了一個100像素的機關,那就永遠沒有使用者可以調節的空間.對于這個問題,其實android 官方已經提供了很好的解決方案,就是不依賴像素的計量機關,讓系統根據螢幕密度來渲染像素.

一張圖檔:

<a target="_blank" href="http://my.oschina.net/action/blog/img_proxy?url=http%3A%2F%2Fdeveloper.android.com%2Fimages%2Fscreens_support%2Fscreens-ranges.png"></a>

一個公式:

px = dp * (dpi / 160)

如果,你是嚴格按照以上兩點來設計你的程式的話,那你分辨率的相容問題,你就不需要額外操心了.當然,要做到這點,需要在設計的時候操心.

上面,讨論了一堆理論上的東西,估計大家都看煩了,那麼在android上具體是該怎麼實作的呢?

首先我們來看一張圖:

<a target="_blank" href="http://my.oschina.net/action/blog/img_proxy?url=http%3A%2F%2Fdeveloper.android.com%2Fdesign%2Fmedia%2Faction_bar_pattern_table.png"></a>

從這張圖裡面我們可以大緻了解到手機和平闆的最簡單的差別就在于螢幕是否有一邊大于 600dp,那麼我們繪制一幅流程圖

<a href="http://blog.51cto.com/attachment/201212/062942417.png" target="_blank"></a>

如果,我們把平闆和手機的設計,隻是簡單的認為是手機上顯示一個pane,平闆上顯示多個pane,這也未免太過于膚淺了.

在web設計上,我們有個div的概念,對于這個概念,我們可以很平滑的過渡到我們android應用的設計上.在android 4 以後,實際上是android 3以後,google意識到android的平闆的魅力不足以讓我們專門針對平闆再開發一次(例如iPad),是以,引入了類似于web 的設計方案,将每個view徹底的獨立起來,讓activity隻是作為這些view 的容器,在fragment推出以前,我們要做出設計,需要話很多的心力,因為,我們需要自己手工維護實作每個view 的生命周期,而有了fragment,我們就有了一套穩定的機制(有針對于android4 以前的相容包).接下來,我們隻需要考慮的是,我們的應用整個邏輯該怎麼處理,在我研究了多個,android 自适應的app以後,得出了一個關于 600dp的法則.

我們從上邊可以知道,手機與平闆的區分點就是長或者高達到了600dp的大小,那麼這個600dp究竟能做什麼?首先,600dp是手機與平闆的區 分點,而手機與平闆最大的不同就是一個螢幕能顯示内容多少的問題,如果,以手機的顯示為一個pane機關,那麼對于大于600dp而言,我們可以考慮在一 個螢幕下放多一個pane.(關于為什麼選擇600dp可以參考諸多google android apps)

現在,我們以開源中國的用戶端為例,來說說如何在實踐中這個法則.

原版用戶端在某手機上顯示: <a href="http://blog.51cto.com/attachment/201212/063002475.png" target="_blank"></a>

接着在某平闆(寬超過 600dp)上顯示:  <a href="http://blog.51cto.com/attachment/201212/063018876.png" target="_blank"></a> 我們會很容易的發現,在對于大于600dp的裝置上來看的話,在螢幕使用率而言,遠遠不夠.接下來我們針對這點進行600dp法則的使用.進行改版後的顯示 根據600dp法則改造後的顯示  <a href="http://blog.51cto.com/attachment/201212/063035635.png" target="_blank"></a>

<a href="http://blog.51cto.com/attachment/201212/063048418.png" target="_blank"></a>

我們都知道,手機橫屏以後似乎多了不少空餘的空間,那麼我們是否可以考慮放多個pane呢?

首先,我們要考慮的是我們的應用針對的是平闆還是手機,而不是關于如何利用好螢幕的空間,而這裡600dp剛好是能區分手機和平闆的最好的大小.如 果你要考慮的是手機和平闆的設計,你隻需要考慮一個app在手機和平闆上的不同點,如果你考慮的是如何利用好螢幕的使用率,請根據手機或者平闆分别設計一 套.

<a href="http://developer.android.com/guide/practices/screens_support.html">http://developer.android.com/guide/practices/screens_support.html</a>

<a href="http://developer.android.com/training/multiscreen/screensizes.html">http://developer.android.com/training/multiscreen/screensizes.html</a>

哪位大神有空的話,要不移植到runjs 造福大衆吧...記得通知我!

該項目同樣是開源的,如果,你要跑起來的話,需要同時下載下傳原版的osc android app源碼,把原版項目設定為android libs,然後引入.如果你不了解什麼是android libs 項目的話,我建議你去google 一下,這裡不做任何說明.由于是業餘愛好,請不要抱有太多希望

<a href="https://github.com/youxilua/android-app/tree/0.0.1">https://github.com/youxilua/android-app/tree/0.0.1</a> 本文轉自 liam2199 部落格，原文連結： http://blog.51cto.com/youxilua/1083555    如需轉載請自行聯系原作者