android app的類響應式設計 半月談投稿

2021-09-21 05:00:39 字數 1903 閱讀 7865

進行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 官方設計指導文件裡面,也有相關的說明 相比 web 的響應式設計思想,在android上使用這種思想,只能稱作為類似而已,因為相比web 的終端複雜而已,android就相對於比較簡單,因為在android上面你只需要考慮,簡單的來說,就是什麼時候顯示乙個pane,什麼時候顯示兩個 pane的問題而已.

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

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

一張:

乙個公式:

px = dp * (dpi / 160)

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

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

首先我們來看一張圖:

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

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

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

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

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

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

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

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

計算dpi的 

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

Android App響應時間測試方法研究

測試場景 說明同上 無網路請求的頁面響應時間 一般指從發起跳轉,到頁面完全載入出來的時間間隔 有網路請求的頁面響應時間同上 這些測試場景,目前業內也沒有成熟的測試方法。我們傳統的測試方法是掐秒錶或者在 裡面打日誌。但這樣誤差大,操作成本高,非常有必要改進。下面我們就來討論一下我們的改進思路。對於測試...

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計,對於pc設計乙個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少,網頁布局就按照當時寫 的布局來布置 對於移動裝置,單獨設計乙個布局,使用不同的網域名稱如wap...

vue的響應式系統 和響應式原理

web m v 組成 mvc 發生在後端 mvc 是一種使用 mvc model view controller 模型 檢視 控制器 設計建立 web 應用 model 模型 表示應用程式核心 比如資料庫記錄列表 view 檢視 顯示資料 資料庫記錄 controller 控制器 處理輸入 寫入資料...