android - Material 设计 : Nav Drawer Width

Question

根据the Material Design specs移动设备上抽屉导航的宽度必须为

side nav width = screen width - app bar height

我们如何在 android 上实现这个？

我有两个部分解决方案。首先是骇人听闻的方式:在包含 Activity 中，我输入了以下代码:

if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB_MR1) {    final Display display = getWindowManager().getDefaultDisplay();    final Point size = new Point();    display.getSize(size);    final ViewGroup.LayoutParams params = mDrawerFragment.getView().getLayoutParams();    params.width = size.x - getResources().getDimensionPixelSize(        R.dimen.abc_action_bar_default_height_material    );    mFragmentUserList.getView().setLayoutParams(params);}

但是，这会导致第二个布局循环并且在 Gingerbread 中不起作用:它不是最佳的。

第二种解决方案涉及在 fragment 和抽屉布局之间添加一个空间。但是，它会取代阴影和用户可以按下以返回主应用程序的位置。当按下“汉堡包”图标时，它也会崩溃。也不是最优的。

是否有更好的解决方案，最好是涉及样式和 xml 的解决方案？

Answer 1

我设法使用 XML 样式声明制作了一个解决方案，但它也有点 hacky。我的方法是使用边距而不是应用设置的宽度来避免编写任何代码来手动计算布局。我创建了一个基本的样式规则来强调如何让它发挥作用。

不幸的是，DrawerLayout 目前应用的最小边距为 64dp。为了使这种方法起作用，我们需要用负边距抵消该值，以便我们可以获得抽屉导航所需的宽度。希望这可以在将来解决(Someone has filed an issue regarding it)，这样我们就可以引用 abc_action_bar_default_height_material 尺寸引用作为边距。

按照以下步骤操作:

1. 添加以下维度和样式定义:

   values/dimens.xml

   <!-- Match 56dp default ActionBar height on portrait orientation -->
   <dimen name="nav_drawer_margin_offset">-8dp</dimen>
   

   values-land/dimens.xml

   <!-- Match 48dp default ActionBar height on landscape orientation -->
   <dimen name="nav_drawer_margin_offset">-16dp</dimen>
   

   values/styles.xml

   <!-- Nav drawer style to set width specified by Material Design specification -->
   <style name="NavDrawer">
       <item name="android:layout_width">match_parent</item>
       <item name="android:layout_marginRight">@dimen/nav_drawer_margin_offset</item>
   </style>
   

   values-sw600dp/styles.xml

   <!-- Margin already matches ActionBar height on tablets, just modify width -->
   <style name="NavDrawer">
       <item name="android:layout_width">320dp</item>
       <item name="android:layout_marginRight">0dp</item>
   </style>
   

2. 在项目中添加上述规则后，您可以在抽屉导航 View 中引用 NavDrawer 样式:

   layout/navigation_drawer.xml(或用于抽屉导航的其他适当 View )

   <?xml version="1.0" encoding="utf-8"?>
   <ListView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/navigation_drawer"
       style="@style/NavDrawer"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       android:choiceMode="singleChoice"
       android:divider="@android:color/transparent"
       android:dividerHeight="0dp"
       android:background="#FFF"
   />