导航抽屉图标的尺寸是多少？

Question

我需要知道导航抽屉图标的正确尺寸（画板和内容）。

在导航抽屉规范中并没有说明任何内容: http://www.google.com.br/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs

谢谢！

- thiagolr

---

http://www.google.co.uk/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing - Zain Zafar

我可以计算画板的尺寸（为40 x 40dp），但是内容的尺寸是多少呢？请注意导航抽屉图标比“头像图标”要小。 - thiagolr

有没有办法编辑默认导航抽屉图标的大小？ - Taslim Oseni

Answer 1

适用于：

mdpi : 24 x 24 px
hdpi : 36 x 36 px
xhdpi : 48 x 48 px
xxhdpi : 72 x 72 px
xxxhdpi : 96 x 96 px

根据它们的比率：

mdpi : hdpi : xhdpi : xxhdpi : xxxhdpi= 1 : 1.5 : 2 : 3 : 4

更新：

现在 Google 发布了更详细的 Material Design 图标设计，可以将图标缩小到 20dp，并在图标周围留下 2dp 的裁剪区域。

要了解更多信息，请访问Material Design 网站。

- Sayem

Answer 2

我会支持Balar的答案，但是有一个小细节有所偏差。正确的答案是所有小图标都应该是24 x 24 dp。

参考：https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size

- MusicMaster

---

Material Design 的等效资源可以在这里找到。 - Xaver Kapeller

链接已经失效。截至2021年，正确的链接为https://material.io/archive/guidelines/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments。 - netimen

Answer 3

您可以检查由支持设计库提供的NavigationView的官方实现。

如果您查看NavigationMenuItemView的代码，您会发现其定义：

this.mIconSize = 
 context.getResources().getDimensionPixelSize(dimen.navigation_icon_size);

where:

<dimen name="navigation_icon_size">24dp</dimen

- Gabriele Mariotti

Answer 4

那些导航图标的尺寸通常为24 x 24像素。

- Conall_Heffernan

---

你是指24 x 24 dp吗？你知道在官方文档中可以找到这个信息吗？ - thiagolr

Answer 5

如果您只需要图标大小来设置视图组件的尺寸，可以使用Toolbar.Button.Navigation样式。以下是一个示例，我在其中创建了一个虚假的导航图标视图。

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/vCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--CONTENT VIEW-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

        </LinearLayout>

        <!--FAKE TOOLBAR NAVIGATION ICON-->
        <RelativeLayout
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize">
            <ImageView
                android:id="@+id/vToolbarNavigationIcon"
                style="@style/Widget.AppCompat.Toolbar.Button.Navigation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/my_icon"/>
        </RelativeLayout>

    </android.support.design.widget.CoordinatorLayout>

- Justin Fiedler