建站
咨詢
售后
建站咨詢
新聞中心
導(dǎo)言
根據(jù)google的官方顯示Android 4.0以上的設(shè)備已經(jīng)有34.2%，由于國(guó)內(nèi)很多的手機(jī)都沒機(jī)會(huì)用上google play市場(chǎng)，所以國(guó)內(nèi)市場(chǎng)的情況，得看類似于友盟的季度報(bào)告才知道了。個(gè)人覺得，Android 4.0以后設(shè)備才能有讓人用的欲望，之前的版本受限于硬件，和系統(tǒng)的優(yōu)化程度，個(gè)人覺得,除了打個(gè)電話、收個(gè)短信、看個(gè)微博、上個(gè)QQ以外，也沒多大讓人使用的價(jià)值了，至于原因，知道的都會(huì)知道，不知道也就不知道了?，F(xiàn)在，硬件技術(shù)的發(fā)展，我們很方便就能購(gòu)買到性能足夠強(qiáng)勁、價(jià)格足夠廉價(jià)的Android 4.0以后的手機(jī)和平板，那么，現(xiàn)在我們學(xué)習(xí)android 4.X的設(shè)計(jì)風(fēng)格也算是不晚。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站制作、千山網(wǎng)絡(luò)推廣、小程序開發(fā)、千山網(wǎng)絡(luò)營(yíng)銷、千山企業(yè)策劃、千山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供千山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
所謂類響應(yīng)式設(shè)計(jì)
這篇文章的標(biāo)題為類響應(yīng)式設(shè)計(jì)，有做過web開發(fā)的應(yīng)該都知道，所謂的響應(yīng)式設(shè)計(jì)，就是一個(gè)網(wǎng)頁能夠根據(jù)是電腦的訪問或者手機(jī)的訪問進(jìn)行的一個(gè)響應(yīng)的顯示，在google官方設(shè)計(jì)指導(dǎo)文檔里面，也有相關(guān)的說明：http://developer.android.com/design/patterns/multi-pane-layouts.html， 相比web的響應(yīng)式設(shè)計(jì)思想，在Android上使用這種思想，只能稱作為類似而已，因?yàn)橄啾戎拢瑆eb的終端復(fù)雜，Android就相對(duì)于比較簡(jiǎn)單，因?yàn)樵贏ndroid上面你只需要考慮，簡(jiǎn)單的來說，就是什么時(shí)候顯示一個(gè)pane，什么時(shí)候顯示兩個(gè)pane的問題而已。
設(shè)計(jì)的理論基礎(chǔ)
要解決Android應(yīng)用什么時(shí)候顯示一個(gè)pane，什么時(shí)候顯示兩個(gè)pane，我們需要了解一些Android是如何解決各種分辨率下的兼容性問題。
在做桌面軟件的時(shí)代，我們很少發(fā)現(xiàn)有人會(huì)吐槽不同分辨率下的情況，至于原因，我個(gè)人覺得，***，電腦的分辨率很多，但是屏幕的dpi/ppi 其實(shí)都差不多，這就使以像素為單位的計(jì)量參數(shù)在不同屏幕下的其實(shí)顯示區(qū)別不大；第二點(diǎn)，就是pc上的軟件的窗口是可調(diào)節(jié)的，而手機(jī)或者平板上你很少看到 (當(dāng)然,現(xiàn)在三星的一些Android設(shè)備支持這個(gè))。但是，移動(dòng)設(shè)備上就完全不同了，首先，產(chǎn)生兼容性的問題，根源在于對(duì)顯示一個(gè)像素改多大的問題，在高密度的手機(jī)屏幕上，一個(gè)像素被顯示的非常之小，那么我們假設(shè)用100個(gè)像素本來是想顯示2厘米左右的長(zhǎng)度，但是結(jié)果卻只顯示了1厘米；第二點(diǎn)就是，移動(dòng)設(shè)備不支持窗口的縮放，如果我定義了一個(gè)100像素的單位，那就永遠(yuǎn)沒有用戶可以調(diào)節(jié)的空間。對(duì)于這個(gè)問題，其實(shí)Android官方已經(jīng)提供了很好的解決方案，就是不依賴像素的計(jì)量單位，讓系統(tǒng)根據(jù)屏幕密度來渲染像素。
一張圖片：
一個(gè)公式：
px = dp * (dpi / 160)
如果，你是嚴(yán)格按照以上兩點(diǎn)來設(shè)計(jì)你的程序的話，那你分辨率的兼容問題，你就不需要額外操心了。當(dāng)然，要做到這點(diǎn)，需要在設(shè)計(jì)的時(shí)候操心。
Android程序的實(shí)現(xiàn)
上面討論了一堆理論上的東西，估計(jì)大家都看煩了，那么在Android上具體是該怎么實(shí)現(xiàn)的呢？
設(shè)計(jì)規(guī)則
首先我們來看一張圖：
從這張圖里面我們可以大致了解到手機(jī)和平板的最簡(jiǎn)單的區(qū)別，就在于屏幕是否有一邊大于 600dp，那么我們繪制一幅流程圖：
顯示一個(gè)pane，還是多個(gè)pane
如果，我們把平板和手機(jī)的設(shè)計(jì)，只是簡(jiǎn)單的認(rèn)為是手機(jī)上顯示一個(gè)pane，平板上顯示多個(gè)pane，這也未免太過于膚淺了。
在web設(shè)計(jì)上，我們有個(gè)div的概念，對(duì)于這個(gè)概念，我們可以很平滑的過渡到我們Android應(yīng)用的設(shè)計(jì)上。在android 4以后，實(shí)際上是Android 3以后，google意識(shí)到Android的平板的魅力不足以讓我們專門針對(duì)平板再開發(fā)一次(例如iPad)，所以引入了類似于web的設(shè)計(jì)方案，將每個(gè)view徹底的獨(dú)立起來，讓activity只是作為這些view的容器，在fragment推出以前，我們要做出設(shè)計(jì)，需要花很多的心力，因?yàn)槲覀冃枰约菏止ぞS護(hù)實(shí)現(xiàn)每個(gè)view的生命周期，而有了fragment，我們就有了一套穩(wěn)定的機(jī)制(有針對(duì)于android4以前的兼容包)。接下來，我們只需要考慮的是，我們的應(yīng)用整個(gè)邏輯該怎么處理，在我研究了多個(gè)Android自適應(yīng)的app以后，得出了一個(gè)關(guān)于 600dp的法則。
所謂600dp法則
我們從上邊可以知道，手機(jī)與平板的區(qū)分點(diǎn)就是長(zhǎng)或者高達(dá)到了600dp的大小，那么這個(gè)600dp究竟能做什么？首先，600dp是手機(jī)與平板的區(qū)分點(diǎn)，而手機(jī)與平板***的不同就是一個(gè)屏幕能顯示內(nèi)容多少的問題。如果以手機(jī)的顯示為一個(gè)pane單位，那么對(duì)于大于600dp而言，我們可以考慮在一個(gè)屏幕下放多一個(gè)pane。(關(guān)于為什么選擇600dp可以參考諸多google Android Apps)
現(xiàn)在，我們以開源中國(guó)的客戶端為例，來說說如何在實(shí)踐中這個(gè)法則。
原版客戶端在某手機(jī)上顯示：
接著在某平板(寬超過 600dp)上顯示：
我們會(huì)很容易的發(fā)現(xiàn)，在對(duì)于大于600dp的設(shè)備上來看的話，在屏幕利用率而言，遠(yuǎn)遠(yuǎn)不夠。接下來我們針對(duì)這點(diǎn)進(jìn)行600dp法則的使用，進(jìn)行改版后的顯示。
根據(jù)600dp法則改造后的顯示：
關(guān)于橫屏
我們都知道，手機(jī)橫屏以后似乎多了不少空余的空間，那么我們是否可以考慮放多個(gè)pane呢？
首先，我們要考慮的是我們的應(yīng)用針對(duì)的是平板還是手機(jī)，而不是關(guān)于如何利用好屏幕的空間，而這里600dp剛好是能區(qū)分手機(jī)和平板的***的大小。如果你要考慮的是手機(jī)和平板的設(shè)計(jì)，你只需要考慮一個(gè)app在手機(jī)和平板上的不同點(diǎn)，如果你考慮的是如何利用好屏幕的使用率，請(qǐng)根據(jù)手機(jī)或者平板分別設(shè)計(jì)一套。
推薦讀物
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
標(biāo)題名稱：AndroidApp的類響應(yīng)式設(shè)計(jì)
新聞來源：http://m.5511xx.com/article/dpdsjsi.html
