材料设计:导航抽屉宽度

Question

根据Material Design规范,Nav Drawer在移动设备上的宽度必须是

side nav width =屏幕宽度 - app bar height

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

我有两个部分解决方案.首先是hacky方式:在包含活动中我把这段代码:

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);
}

然而,这导致第二个布局周期并且在姜饼中不起作用:它不是最佳的.

第二种解决方案是在片段和drawerLayout之间添加一个Space.然而,它取代了阴影和用户可以按下以返回主应用程序的位置.当按下"hamburguer"图标时,它也会崩溃.也不是最佳的.

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

Answer 1

我设法使用XML样式声明来制作解决方案,但它也有点hacky.我的方法是使用边距而不是应用设置宽度来避免编写任何代码来手动计算布局.我已经创建了一个基本的样式规则,以突出显示如何使其工作.

不幸的是,DrawerLayout目前应用的最小边距为64dp.要使这种方法起作用,我们需要使用负边距来抵消该值,以便我们可以获得导航抽屉所需的宽度.希望将来可以解决这个问题(有人提出了相关问题),所以我们可以参考abc_action_bar_default_height_material边距的维度参考.

跟着这些步骤:

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

   值/ dimens.xml

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

   值-脊/ dimens.xml

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

   价值观/ 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>
   

   值-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. 在项目中添加上述规则后,可以在导航抽屉视图中引用NavDrawer样式:

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

   <?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"
   />
   

Answer 2

使用Android设计支持库,现在可以非常简单地实现导航抽屉,包括正确的大小调整.使用NavigationView并使用其从菜单资源中取出抽屉的功能(例如此处)或者您可以将其包裹在当前用于显示抽屉列表的视图周围(例如ListView,RecyclerView).然后NavigationView将为您处理抽屉尺寸.

这是一个如何使用包围ListView的NavigationView的示例:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/navdrawer_layout"
    android:fitsSystemWindows="true">

    <!-- Layout where content is shown -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include android:id="@+id/toolbar"
            layout="@layout/toolbar" />

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/toolbar" />

        <!-- Toolbar shadow for pre-lollipop -->
        <View style="@style/ToolbarDropshadow"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:layout_below="@id/toolbar" />

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start">

        <ListView
            android:id="@+id/navdrawer_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:choiceMode="singleChoice"
            android:dividerHeight="0dp"
            android:divider="@null"/>

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

</android.support.v4.widget.DrawerLayout>

这样您就可以使用NavigationViews大小调整并仍然使用您自己的抽屉列表.虽然从菜单资源(例如此处)中创建抽屉列表要容易得多,但您无法对列表项使用自定义视图.

Answer 3

在寻找更简单的解决方案后,我发现了一篇非常明确的文章:材料导航抽屉尺寸.

这里:

Nexus 5屏幕是一个不错的640 x 360 dp(xxhdpi),其上的应用栏高56 dp.所以导航抽屉应该是:

[dp中的宽度] = 360dp - 56dp = 304dp

Nexus 4采用640 x 384 dp(xhdpi)屏幕.相同的56dp应用栏高度.它的导航抽屉？

[dp中的宽度] = 384dp - 56dp = 328dp

那么,Google设计师是如何分别提出288dp和304dp宽度的呢？我不知道.

另一方面,Google应用似乎与我的数学一致.哦,你知道这一切中最有趣的是什么吗？iPhone(具有不同的屏幕高度,但宽度恒定为320 dp)被正确标记为具有264dp导航抽屉.

基本上,它表明有关导航抽屉的一些指导自相矛盾,您可以使用以下规则来避免计算:

您基本上总是可以在-sw360dp上使用304dp,在-sw384dp上使用320dp作为导航抽屉,您就可以正确使用它.