度量與邊框

基準(zhǔn)網(wǎng)絡(luò)

所有組件都與間隔為8dp的基準(zhǔn)網(wǎng)格對(duì)齊。排版/文字(Type)與間隔為4dp的基準(zhǔn)網(wǎng)格對(duì)齊。在工具條中的圖標(biāo)同樣與間隔為4dp的基準(zhǔn)網(wǎng)格對(duì)齊。這些規(guī)則適用于移動(dòng)設(shè)備、平板設(shè)備以及桌面應(yīng)用程序。

有關(guān)詳細(xì)信息請(qǐng)參見組件一節(jié)。

有關(guān)詳細(xì)信息請(qǐng)參見字體排版一節(jié)。

邊框與間距

移動(dòng)設(shè)備

移動(dòng)設(shè)備布局模板包含了多種多樣的屏幕和信息，這些信息描述了邊框與間距如何應(yīng)用于屏幕邊界和元素。下面是一個(gè)有關(guān)屏幕的實(shí)例，這個(gè)實(shí)例可以通過如下的鏈接獲得。

內(nèi)容

該屏幕演示圖標(biāo)、頭像和一個(gè)2行文本的列表如何左對(duì)齊，以及一個(gè)56dp的浮動(dòng)動(dòng)作按鈕和文本如何右對(duì)齊。

垂直邊框和水平外邊距

左右各有16dp的垂直邊框。帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

在移動(dòng)設(shè)備上有16dp的水平外邊距。

垂直邊距

24dp

56dp

48dp

72dp

內(nèi)容

該屏幕演示圖標(biāo)、頭像、2行文本列表、子標(biāo)題和40dp的浮動(dòng)動(dòng)作按鈕如何左對(duì)齊。小圖標(biāo)右對(duì)齊。

垂直邊框和水平邊距

圖標(biāo)(大小圖標(biāo))有16dp的左右垂直邊框。帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

在移動(dòng)設(shè)備上有16dp的水平外邊距。

垂直邊距

24dp

56dp

72dp

48dp

8dp

內(nèi)容

該屏幕演示圖標(biāo)如何左對(duì)齊，以及圖標(biāo)和一個(gè)56dp的浮動(dòng)動(dòng)作按鈕如何右對(duì)齊。

垂直邊框和水平邊距

圖標(biāo)有16dp的左垂直邊框。帶有圖標(biāo)或頭像的內(nèi)容有72dp的左邊距，32dp的右邊距(考慮到56dp的圓形浮動(dòng)動(dòng)作按鈕)。這樣圓形浮動(dòng)動(dòng)作按鈕下的圖標(biāo)也對(duì)齊了。

在移動(dòng)設(shè)備上有16dp的水平外邊距。

垂直邊距

24dp

56dp

8dp

72dp

內(nèi)容

該屏幕演示圖標(biāo)、頭像和文本如何左對(duì)齊，浮動(dòng)動(dòng)作按鈕、圖標(biāo)和文本如何右對(duì)齊。

垂直邊框和水平邊距

圖標(biāo)有16dp的左右垂直邊框。帶有圖標(biāo)或頭像的內(nèi)容區(qū)域左對(duì)齊，距左邊界72dp。

在移動(dòng)設(shè)備上有16dp的水平邊距。

垂直邊距

24dp

56dp

48dp

8dp

內(nèi)容

該屏幕演示了側(cè)邊導(dǎo)航菜單的寬度，以及圖標(biāo)、頭像和文本如何左對(duì)齊，小圖標(biāo)如何右對(duì)齊。

垂直邊框和水平邊距

圖標(biāo)距側(cè)邊導(dǎo)航菜單的左右邊界分別有16dp的垂直邊框。帶有圖標(biāo)或者頭像的內(nèi)容距側(cè)邊導(dǎo)航菜單的左邊界72dp。側(cè)邊導(dǎo)航菜單的寬度等于屏幕的寬度減去動(dòng)作條的高度，即在本例中距屏幕右側(cè)56dp的寬。

在移動(dòng)設(shè)備上有16dp的水平外邊距。

垂直邊距

48dp

8dp

56dp

平板設(shè)備

平板設(shè)備布局模板包含了14種不同的屏幕，顯示了邊框和邊距如何應(yīng)用于屏幕的邊界和元素。下面的實(shí)例是14種模板的兩個(gè)，可以通過下面的鏈接獲取。

24dp

64dp

8dp

72dp

24dp

64dp

8dp

48dp

80dp

桌面應(yīng)用程序

桌面應(yīng)用程序布局模板包含了4個(gè)不同的屏幕，每一個(gè)屏幕又包括了4個(gè)不同的窗口尺寸，顯示了邊框和邊距如何應(yīng)用于窗口和元素。下面是一個(gè)屏幕的實(shí)例，可以通過下面所示的鏈接下載。基于不同的窗口尺寸，邊框和邊距塊會(huì)沿襲平板設(shè)備和移動(dòng)設(shè)備的網(wǎng)格規(guī)則。

比率邊框

應(yīng)用于移動(dòng)設(shè)備屏幕的寬度和移動(dòng)設(shè)備、平板設(shè)備以及桌面應(yīng)用程序中UI元素的寬度。

屏幕的寬度

示例

元素的寬度

示例

增量邊框

增量邊框

增量邊框定義了一個(gè)增量，比如動(dòng)作條的高度，然后使用幾倍于這個(gè)增量的數(shù)字來決定應(yīng)用中其它元素的尺寸和位置。

大多數(shù)應(yīng)用于桌面應(yīng)用程序，有些也適用于平板設(shè)備，很少應(yīng)用在移動(dòng)設(shè)備中。增量的數(shù)量會(huì)根據(jù)窗口的尺寸來改變。

觸摸目標(biāo)尺寸

最小的觸摸目標(biāo)尺寸是48dp。在布局中，當(dāng)為圖標(biāo)(24dp)或者頭像(40dp)設(shè)置邊距時(shí)，要時(shí)刻記得。觸摸目標(biāo)不能重疊。

非常感謝這些辛苦翻譯的小伙伴！！

文章轉(zhuǎn)自：http://design.1sters.com/

=========================關(guān)于學(xué)ui網(wǎng)=========================

xueui.cn 學(xué)ui網(wǎng)發(fā)布高質(zhì)量ui設(shè)計(jì)教程和設(shè)計(jì)分享經(jīng)驗(yàn)，希望打造一個(gè)最好的ui學(xué)習(xí)教程平臺(tái)！

總結(jié)

以上是生活随笔為你收集整理的android显示布局边界的边距_Android设计规范 Material Design-Layout（2 度量与边框）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。