Android 5.0 - 如何根据 Material Design 指南实现此平板电脑布局

Question

我不知道哪个是 ActionBar，哪个是 ToolBar。 我该如何实施？ 任何答案表示赞赏..提前致谢。

Answer 1

在此示例中，蓝色工具栏是一个扩展高度，被屏幕内容覆盖并提供导航按钮。详细视图中使用了另一个工具栏。我已经圈出了下面的两个工具栏。

Answer 2

尚未尝试过，但应该可以。这是您的布局：

<?xml version="1.0" encoding="utf-8"?>
<!-- The important thing to note here is the added fitSystemWindows -->

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Your content -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- Your main ActionBar (with the blue background).
             The height is 56 + 72dp according to specs -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="128dp" />

        <!-- The white sheet -->
        <FrameLayout
            android:id="@+id/content_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="64dp"
            android:layout_marginStart="64dp"
            android:layout_marginTop="56dp"
            android:background="@android:color/white">

            <!-- This is the secondary toolbar, 72dp also according to specs -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/secondary_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/darker_gray"
                android:minHeight="72dp" />

            <!-- Your main frame container where you put your fragment -->
            <FrameLayout
                android:id="@+id/frame_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </FrameLayout>

    </RelativeLayout>

    <!-- Your drawer view. This can be any view, LinearLayout
         is just an example. As we have set fitSystemWindows=true
         this will be displayed under the status bar. -->
    <LinearLayout
        android:layout_width="304dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true"/>

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

这将包括位于ActionBar 之上的NavigationDrawer（有关此内容的更多信息，read this answer by Chris Banes）以及您请求的布局。

然后在你的Fragment/Activity：

 public void onCreate(Bundled savedInstanceState) {
    super.onCreate(savedInstanceState);

    // ...

    // Set the main Toolbar as the ActionBar
    Toolbar mainToolbar = (...) findViewById(R.id.main_toolbar);
    setSupportActionBar(mainToolbar);

    // Now retrieve the DrawerLayout so that we can set the status bar color.
    // This only takes effect on Lollipop, or when using translucentStatusBar
    // on KitKat.
    DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
    drawerLayout.setStatusBarBackgroundColor(yourChosenColor);

    // Use the secondary toolbar in Standalone mode. This means you don't set is as the ActionBar
    // but it also implies you have to handle the Toolbar items yourslef
    Toolbar secondaryToolbar = (...) findViewById(R.id.secondary_toolbar);

    // For example, to set an OnMenuItemClickListener to handle menu item clicks :
    toolbar.setOnMenuItemClickListener(
            new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    // Handle the menu item
                    return true;
                }
    });

    // To inflate a menu to be displayed in the toolbar :
    toolbar.inflateMenu(R.menu.your_toolbar_menu);

    // ...
}

我认为应该这样做（不要忘记用尺寸替换硬编码值以适应设备大小）。

如需了解更多信息，请查看the AppCompat v21 doc 或Chris Banes' post on the AppCompat v21。