android應用開發-從設計到實現 2-2 界面佈局

界面佈局

佈局涉及到應用界面的整體。佈局的層次感和邏輯,可以通過陰影來體現。

舉個例子。在一張紙當中,增加一條摺痕,一個區域就分成了關聯性很強的兩個區域,

 material_paper_seams

將一張紙蓋在另一張紙之上,就像是搭臺階一樣,上層會在下層投下陰影,這兩張紙代表了邏輯不同的兩個區域,

 material_paper_step

紙張在z軸的位置,被稱作Elevation,很形象的比喻了紙片相對於別的照片被提升了起來。

尺寸的度量

張紙片之間的距離產生陰影,那麼距離用什麼來衡量呢?要解答這個問題,我們首先要知道像素-px,物理尺寸-inch,像素密度-dpi和密度無關像素-dip這幾個概念和它們之間的關係。

安卓系統提供了幾種度量屏幕的單位:

  1. px:以像素爲單位進行設置,屏幕上每一個點,就是一個像素,例如一部安卓手機,屏幕像素是1920 x 1080,就是說屏幕高度有1920個像素點,寬度有1080個像素點,但是在安卓系統中,最好不要使用這個單位來設置尺寸,而是用dp
  2. sp:用於字體大小的設置,它可以讓字體大小根據用戶在設置中的設置,進行縮放;
  3. dp:密度無關像素,這是在佈局和控件中應該使用的單位;

dp的引入

如果用px爲單位設定設備區域的大小,通常會有很大的問題。

假設有兩個物理尺寸都爲5寸大小的屏幕,它們的屏幕分辨率不同,一個是1080*1920,而另一個卻是450*800.

如果指定一個按鈕的大小爲200px長,200px寬,那麼它們的顯示效果就如下圖。很明顯,兩者的差別也太大了,界面就嚴重變形了。所以,想讓一個區域的大小在不同屏幕的上顯示的都差不多,就需要考慮像素密度。爲了顯示同樣的長度,在密度大的屏幕上,使用到的像素就要多一些,在密度小的屏幕上,使用到的像素就要少一些。

 dp_explain1

所以爲了解決這個問題,安卓引入了dip的概念-device independed pixel-簡稱dp。

dpi的定義

在近一步介紹dp之前,要先講講dpidpi叫做屏幕像素密度,就是每英寸有多少個像素點。我們用簡單的數學原理-勾股定理就能算出剛纔兩個屏幕的dpi,一個是440dpi,另一個是184dpi

 dp_explain2

注意,dpidip(dp)寫法很像,千萬不要混淆了,前者和密度有關,後者與像素有關。

dpi的劃分

安卓使用dpi爲160的數值作爲一個基準--baseline,

  1. 如果一個設備的dpi剛好等於這個基準,那麼它就是mdpi設備;
  2. 如果一個設備的dpi是這個基準的1.5倍,那麼它就是hdpi設備;
  3. 如果一個設備的dpi是這個基準的2倍,那麼它就是xhdpi設備;
  4. 如果一個設備的dpi是這個基準的3倍,那麼它就是xxhdpi設備;

這就是劃分不同屏幕密度的依據。

像素密度類型 像素密度大小 與Baseline比值
mdpi 160 1
hdpi 240 1.5
xhdpi 320 2
xxhpi 480 3

按照這樣的約定劃分,

  1. 剛纔1080*1920的屏幕應該屬於xxhdpi類型;
  2. 450*800的屏幕應該屬於mdpi類型;

現在的安卓手機幾乎都在往高清屏幕發展,所以xhdpi和xxhdpi是最爲常見的設備類型。

dp與px的關係

安卓引入了dp(dip)的概念之後,實際顯示的像素就可以通過下面這個公式計算出來 px = dp * dpi / 160。

相同dp的情況下,密度大的設備,實際像素就佔的大,密度小點設備,實際像素就佔用小了。因此使用dp這個單位後,按鈕在兩種不同的屏幕上的實際顯示大小,幾乎就是一樣的了。

例如剛纔兩種屏幕。如果我指定按鈕的大小爲200dp*200dp,那麼它們在各自的屏幕上佔用的實際像素分別是230px*230px與550px*550px,真實設備上看上去的確差不多。

 dp_explain3

所以,我們以後在設計界面佈局的時候,就可以在標準大小(mdpi類型,尺寸爲360dp*640dp)的屏幕上,使用dp爲單位進行設計就可以了。


瞭解了安卓系統使用的尺寸衡量標準以後,我們就可以開始研究佈局的邏輯區域劃分了。

佈局的整體劃分

安卓系統的界面大致可以分成三個部分:狀態欄、內容區域、導航欄。

  • 狀態欄顯示電池電量、手機信號、通知等信息。

     status_bar
  • 導航欄顯示返回、主界面、最近打開等三個虛擬按鈕。

     nav_bar

    不過很多設備通過硬件按鈕實現了這三個功能,所以就沒有虛擬按鍵了。

  • 內容區域就是給程序使用,顯示程序自身內容的地方。它裏面的內容也是像紙張一樣,一層一層的堆放着的。

     material_content_area

正如前面提到的那樣,這三個區域也是像紙片一樣,是層疊起來的,在z軸上存在空間關係。

內容元素

狀態欄和導航欄的各個屬性都是系統的,無法去進行z軸位置的控制,因此我們不必太過關注。各種不同的應用使用內容區域來顯示各自的內容,這纔是我們要講的重點區域。

雖然這個區域的內容怎麼顯示都是由各個應用說了算,但是Material Design給出了推薦的設計。

在內容區域當中,可以通過摺痕、陰影等方式將這些區域劃分成不同的邏輯塊。

下面是一個典型的Material Design佈局(只是一個典型,並不是都這樣,具體的佈局方式還是要設計師來設計)。

 material_classic_layout

AppBar

每個應用都有一個標題欄,叫做AppBar,它不僅可以顯示這個應用的名稱,也可以把更多的操作-Action放在上面,比如搜索,分享,更多等動作。

 material_classic_appba

它的位置處於z軸4dp處。

Float Button

懸浮按鈕是Material Design中一個很重要的特色。它是一個圓形的按鈕,懸浮於內容區域的最上面。當我們按下這個按鈕的時候,它就會進一步的浮動到更靠上的位置。

 material_classic_float_button

當它沒有被按下單時候,位於界面佈局的z軸上6dp處,當它被按下單時候,z軸位置被調整到12dp處

其他

除了上面的提及的幾種內容元素意外,安卓系統還提供了很多別的元素,比如Dialog Picker Menu Button等等,它們在z軸上都有自己的位置,

 material_elevation
 material_elevation_table

至於每個元素在Material Design中長什麼樣,我們會在後面的章節介紹。

除了前面介紹的這種典型佈局,還有很多其他的佈局,我們也是放到後面專門的章節來介紹。


本文是《從設計到實現-手把手教你做android應用開發》系列文檔中的一篇。感謝您的閱讀和反饋,對本文有任何的意見和建議請留言,我都會盡量一一回復。

如果您覺得本文對你有幫助,請推薦給更多的朋友;或者加入我們的QQ羣348702074和更多的小夥伴一起討論;也希望大家能給我出出主意,讓這些文檔能講的更好,能最大化的幫助到希望學習開發的夥伴們。

除了CSDN發佈的文章,本系列最新的文章將會首先發布到我的專屬博客book.anddle.com。大家可以去那裏先睹爲快。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章