如何在平板电脑上实现这种布局？

Question

我正在尝试为平板电脑/大屏幕设备创建一个好的 UI 界面。

完美的解决方案是 GMail 应用程序中的运行（见下面的屏幕截图）。

据我了解，布局是这样组成的：

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

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay" >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/activity_main_twopane" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_add" />

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_drawer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

但是如果我采用我的解决方案，这将给我带来两个问题：

我代码中的 FloatingActionButton 位于布局的底部|末端；在 GMail 应用程序中，它仅位于列表布局（包含电子邮件的布局）中；
我的代码中的 Toolbar 只有一个（我也有一个搜索操作），但在 GMail 应用程序上似乎有两个：一个作为主要搜索选项，第二个用于在您 select 一封电子邮件时可见的详细信息操作。

有什么建议可以帮助我实现屏幕截图上的布局？

Answer 1

问题 2 和 3 的快速回答：

为了将 FAB 放置在所需位置，您必须在 FloatingActionButton xml 代码上添加此标签：app:layout_anchor="@id/desired_view_id" 和 app:layout_anchorGravity="bottom|right|end"；
在底部工具栏中，您可以定义单独的工具栏并设置样式。

见下方代码

   // this is top toolbar
   Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
   setSupportActionBar(toolbarTop);

   // this is bottom one
   Toolbar toolbarBottom = (Toolbar) findViewById(R.id.toolbar_bottom);
   toolbarBottom.setOnMenuItemClickListener(new         Toolbar.OnMenuItemClickListener() {
      @Override
      public boolean onMenuItemClick(MenuItem item) {
          switch(item.getItemId()){
              case R.id.action_settings:
                  // TODO
                  break;
              // TODO: Other cases
          }
          return true;
      }
   });
   // Inflate a menu to be displayed in the toolbar
   toolbarBottom.inflateMenu(R.menu.menu_main);

如何在平板电脑上实现这种布局？

How to achieve this layout on tablet?

android

android-layout

android-tablet-layout