导航抽屉图标的大小是多少?
What is the navigation drawer icons size?
我需要知道导航抽屉图标的正确大小(画板和内容)。
它没有说明导航抽屉规格:
http://www.google.com.br/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs
谢谢!
这些导航图标的尺寸通常为 24 x 24 像素
我会投票赞成 Balar 的回答,但有一个小细节与此相去甚远。正确答案是所有小图标都应该是 24 x 24 dp.
参考:https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size
对于:
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 图标设计,更多 details.icons 可以缩小到 20dp,图标周围有一个 trim 2dp 的区域。
要了解更多信息,请访问 Material Design 网站。
可以查看支持设计库提供的NavigationView官方实现
如果您看到 NavigationMenuItemView 的代码,它定义了:
this.mIconSize =
context.getResources().getDimensionPixelSize(dimen.navigation_icon_size);
其中:
<dimen name="navigation_icon_size">24dp</dimen
如果您只需要图标大小来设置视图组件的尺寸,您可以使用 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>
我需要知道导航抽屉图标的正确大小(画板和内容)。
它没有说明导航抽屉规格: http://www.google.com.br/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs
谢谢!
这些导航图标的尺寸通常为 24 x 24 像素
我会投票赞成 Balar 的回答,但有一个小细节与此相去甚远。正确答案是所有小图标都应该是 24 x 24 dp.
参考:https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size
对于:
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 图标设计,更多 details.icons 可以缩小到 20dp,图标周围有一个 trim 2dp 的区域。
要了解更多信息,请访问 Material Design 网站。
可以查看支持设计库提供的NavigationView官方实现
如果您看到 NavigationMenuItemView 的代码,它定义了:
this.mIconSize =
context.getResources().getDimensionPixelSize(dimen.navigation_icon_size);
其中:
<dimen name="navigation_icon_size">24dp</dimen
如果您只需要图标大小来设置视图组件的尺寸,您可以使用 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>