android app的類響應式設計

##導言## 進行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 的設計風格也算是不晚.

##所謂類響應式設計##

這篇文章的標題爲類響應式設計,有搞個web開發的應該都知道,所謂的響應式設計,就是一個網頁可以根據是電腦的訪問或者手機的訪問進行的一個響應的顯示,在google 官方設計指導文檔裏面,也有相關的說明http://developer.android.com/design/patterns/multi-pane-layouts.html,相比 web 的響應式設計思想,在android上使用這種思想,只能稱做爲相似而已,由於相比web 的終端複雜而已,android就相對於比較簡單,由於在android上面你只須要考慮,簡單的來講,就是何時顯示一個pane,何時顯示兩個pane的問題而已.

##設計的理論基礎## 要解決android 應用何時顯示一個pane,何時,咱們須要瞭解一些android 是如何解決各類分辨率下的兼容性問題.

在作桌面軟件的時代,咱們不多發現有人會吐槽,不一樣分辨率下的狀況,至於緣由,我我的以爲,第一,電腦的分辨率不少,可是屏幕的dpi/ppi 其實都差很少,這就使以像素爲單位的計量參數在不一樣屏幕下的其實顯示區別不大,第二點,就是pc上的軟件的窗口是可調節的,而手機或者平板上你不多看到(固然,如今三星的一些android設備支持這個).可是,移動設備上就徹底不一樣了,首先,產生兼容性的問題,根源在於對顯示一個像素改多大的問題,在高密度的手機屏幕上,一個像素被顯示的很是之小,那麼咱們假設用100個像素原本是想顯示2釐米左右的長度,可是結果卻只顯示了1釐米,第二點就是,移動設備不支持窗口的縮放,若是我定義了一個100像素的單位,那就永遠沒有用戶能夠調節的空間.對於這個問題,其實android 官方已經提供了很好的解決方案,就是不依賴像素的計量單位,讓系統根據屏幕密度來渲染像素.

一張圖片:

一個公式:

px = dp * (dpi / 160)

若是,你是嚴格按照以上兩點來設計你的程序的話,那你分辨率的兼容問題,你就不須要額外操心了.固然,要作到這點,須要在設計的時候操心.

##android程序的實現## 上面,討論了一堆理論上的東西,估計你們都看煩了,那麼在android上具體是該怎麼實現的呢?

###設計規則### 首先咱們來看一張圖:

從這張圖裏面咱們能夠大體瞭解到手機和平板的最簡單的區別就在於屏幕是否有一邊大於 600dp,那麼咱們繪製一幅流程圖

###顯示一個pane,仍是多個pane### 若是,咱們把平板和手機的設計,只是簡單的認爲是手機上顯示一個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究竟能作什麼?首先,600dp是手機與平板的區分點,而手機與平板最大的不一樣就是一個屏幕能顯示內容多少的問題,若是,以手機的顯示爲一個pane單位,那麼對於大於600dp而言,咱們能夠考慮在一個屏幕下放多一個pane.(關於爲何選擇600dp能夠參考諸多google android apps)

如今,咱們以開源中國的客戶端爲例,來講說如何在實踐中這個法則.

原版客戶端在某手機上顯示:

---

接着在某平板(寬超過 600dp)上顯示:

---

咱們會很容易的發現,在對於大於600dp的設備上來看的話,在屏幕利用率而言,遠遠不夠.接下來咱們針對這點進行600dp法則的使用.進行改版後的顯示

根據600dp法則改造後的顯示

###關於橫屏###

咱們都知道,手機橫屏之後彷佛多了很多空餘的空間,那麼咱們是否能夠考慮放多個pane呢?

首先,咱們要考慮的是咱們的應用針對的是平板仍是手機,而不是關於如何利用好屏幕的空間,而這裏600dp恰好是能區分手機和平板的最好的大小.若是你要考慮的是手機和平板的設計,你只須要考慮一個app在手機和平板上的不一樣點,若是你考慮的是如何利用好屏幕的使用率,請根據手機或者平板分別設計一套.

##推薦讀物## http://developer.android.com/guide/practices/screens_support.html

http://developer.android.com/training/multiscreen/screensizes.html

##在線工具## 計算DPI的 http://members.ping.de/~sven/dpi.html

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

##關於源碼## 該項目一樣是開源的,若是,你要跑起來的話,須要同時下載原版的osc android app源碼,把原版項目設置爲android libs,而後引入.若是你不瞭解什麼是android libs 項目的話,我建議你去google 一下,這裏不作任何說明.因爲是業餘愛好,請不要抱有太多但願

https://github.com/youxilua/android-app/tree/0.0.1

##最後的最後## 若是你有15積分,並且,以爲本文不錯的話,不妨頂一下支持一下做者....頂頂不扣分!