Material design - 尺寸参考 部分(笔记)

龟速

Overview

clipboard.png

App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp

clipboard.png

The app bar with significantly increased height for prominence

App bar height = 128dp

clipboard.png
Action area height: 56dp

Title area height: 80dp

Title area bottom padding: 8dp

Description area height: 72dp

Description area bottom padding: 16dp

List

A two-column, left-aligned list with a 56dp floating action button.

clipboard.png

Keylines and margins

Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.

clipboard.png

Vertical spacing

  1. Status bar: 24dp

  2. Toolbar: 56dp

  3. Subtitle: 48dp

  4. List item: 72dp

clipboard.png

Keylines and margins

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp

clipboard.png
Vertical spacing

  1. Status bar: 24dp

  2. Toolbar: 56dp

  3. Title and list items: 72dp

  4. Subtitle: 48dp

  5. Space between content areas: 8dp

Detail view

A detail card with a 56dp floating action button.

clipboard.png

Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.

clipboard.png

Vertical spacing

  1. Status bar: 24dp

  2. Toolbar: 56dp

  3. Space between content areas: 8dp

  4. List item: 72dp

Navigation drawer

A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

clipboard.png

Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.

clipboard.png

Vertical spacing

  1. Account menu and list items: 48dp

  2. Space between content areas: 8dp

  3. Navigation right margin: 56dp

阅读 4.2k

Android 开发笔记
记录 Android 开发成长时学习的好文章和经验技巧

我的主页,欢迎来访

213 声望
6 粉丝
0 条评论

我的主页,欢迎来访

213 声望
6 粉丝
文章目录
宣传栏