为 phone 布局使用 SupportToolbar，为平板电脑布局使用独立操作栏

Using a SupportToolbar for phone layout and a standalone actionbar for tablet layout

今天我在想办法改进我的平板电脑设计，我找到了这张图片

我非常想要它，因为它看起来很棒。我正在搜索 google 大约一个小时，但我还没有找到任何 好的 教程。我找到了这个：v21 Material Design for Pre Lollipop。

我马上开始实施这个，但我尝试的一切都完全错了。独立操作栏的主题需要是 ThemeOverlay.AppCompat.ActionBar 但是在我的 phone 布局上我扩展了 Theme.AppCompat.NoActionBar 主题。 （主题如下）

只是不清楚我应该怎么做才能在 Tablets 上制作类似上图的内容并在 Phones[=43] 上显示正常（自定义）supportActionBar =] 而不会弄乱其中之一。

这是我的 AppTheme 样式（我应用到我的应用程序中）

<!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.NoActionBar">
        <!--   your app branding color for the app bar -->
        <item name="colorPrimary">@color/primaryColor</item>
        <!--   darker variant for the status bar and contextual app bars -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--   theme UI controls like checkboxes and text fields -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>

在你提问之前，是的，我已经找到了关于 SO 的 this 问题，但这不是一个重复的问题。 Chris Banes 写的 post 对我来说也没有说清楚。

是否可以在不破坏两个布局的情况下执行此操作？大声思考，我选择自定义工具栏的原因是因为我包含了一个自定义搜索视图，但删除了它。工具栏中还有另一个视图，但我认为如果确实有必要，可以将其删除。

这是我的 phone 版本的布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:theme="@style/Theme.AppCompat.NoActionBar">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:orientation="vertical">

        <include android:id="@+id/toolbar" layout="@layout/toolbar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:background="@color/primaryColor"
            android:minHeight="?attr/actionBarSize"/>

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

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appBarLayout"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/replaceFrameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/errorWarnings"
                    android:visibility="gone"
                    android:gravity="center"
                    android:layout_gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorIcon"
                        android:tint="@color/fab_material_red_500"
                        android:layout_centerVertical="true"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorDescription"
                        android:layout_below="@+id/errorIcon"/>

                </RelativeLayout>

            <com.tim.koers.wallpapers.UI.FilterButton
                android:id="@+id/filterButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|bottom"
                android:layout_margin="16dp"
                android:clickable="true"
                android:src="@drawable/ic_menu_filter"
                android:elevation="6dp"
                android:tint="@color/fab_material_white"
                android:visibility="gone"/>

        </FrameLayout>

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

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

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

这是我的平板电脑布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fitsSystemWindows="true">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:animateLayoutChanges="true"
                android:orientation="vertical"
                android:background="@android:color/white"
                android:layout_marginEnd="64dp"
                android:layout_marginStart="64dp"
                android:layout_marginTop="56dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <!-- This is the secondary toolbar, 72dp also according to specs -->
                    <include android:id="@+id/toolbar" layout="@layout/toolbar"
                        app:layout_scrollFlags="scroll|enterAlways" />

                    <android.support.design.widget.TabLayout
                        android:id="@+id/tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/toolbar"
                        android:background="@color/primaryColor"
                        android:minHeight="?attr/actionBarSize"/>

                </RelativeLayout>

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



            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="56dp"
                android:layout_marginEnd="64dp"
                android:layout_marginStart="64dp"
                tools:context=".MainActivity" />

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <FrameLayout
                    android:id="@+id/replaceFrameLayout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/errorWarnings"
                    android:visibility="gone"
                    android:gravity="center"
                    android:layout_gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorIcon"
                        android:tint="@color/fab_material_red_500"
                        android:layout_centerVertical="true"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorDescription"
                        android:layout_below="@+id/errorIcon"/>

                </RelativeLayout>

                <com.tim.koers.wallpapers.UI.FilterButton
                    android:id="@+id/filterButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right|bottom"
                    android:layout_margin="16dp"
                    android:clickable="true"
                    android:src="@drawable/ic_menu_filter"
                    android:elevation="6dp"
                    android:tint="@color/fab_material_white"
                    android:visibility="gone"/>

            </FrameLayout>

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

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

    </FrameLayout>

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

我找到了一篇实现此布局的文章。

Create a Card Toolbar (Nested Toolbar) in Android

您可以将其应用到您的平板电脑布局中。

它由一个 extended-height 工具栏（蓝色）和一个带有标题和常规菜单的 CardView 组成。

基本结构：

<FrameLayout>
<!-- Extended Toolbar holding Drawer icon -->
    <android.support.v7.widget.Toolbar />
    <android.support.v7.widget.CardView>
        <LinearLayout>
            <!-- Card Toolbar -->
            <android.support.v7.widget.Toolbar />
            <!-- Divider -->
            <View />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>

step1 工具栏高度加倍

step2 将 CardView 设置为辅助工具栏

step3 Java代码

  1. 原始工具栏：设置导航图标
  2. CardView 工具栏：设置菜单和标题

查看更多

  1. Android 5.0 - How to implement this tablet layout from Material Design guidelines
  2. Googling this Picture

经过数小时的尝试，我得出了以下代码：

对于您的 phone 布局，使用此作为基础：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.AppCompat.NoActionBar">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:background="@color/primaryColor"
                android:minHeight="?attr/actionBarSize"
                style="@style/tabsWidgetIndicatorColors"
                android:theme="@style/Theme.AppCompat.NoActionBar">

            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/toolbar"
                android:background="@color/primaryColor"
                android:minHeight="?attr/actionBarSize"/>

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- Put your content here -->                


        </FrameLayout>

        </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"
            android:fitsSystemWindows="true"

            app:menu="@menu/drawer"/>

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

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

您的平板电脑布局以此为基础：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:theme="@style/Theme.AppCompat"
    >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fitsSystemWindows="true">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="128dp"
                    android:orientation="vertical">

                    <android.support.v7.widget.Toolbar
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/primaryColor"
                        android:minHeight="?attr/actionBarSize"
                        android:id="@+id/actionToolbar"
                        />

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/primaryColor"
                        android:minHeight="?attr/actionBarSize"
                        />

                </LinearLayout>

                <android.support.design.widget.AppBarLayout
                    android:id="@+id/appBarLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:animateLayoutChanges="true"
                    android:orientation="vertical"
                    android:layout_marginEnd="64dp"
                    android:layout_marginStart="64dp"
                    android:layout_marginTop="56dp">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <!-- This is the secondary toolbar, 72dp also according to specs -->
                        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                            android:id="@+id/toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_alignParentTop="true"
                            android:background="@color/colorSecondary"
                            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
                            android:minHeight="72dp"
                            style="@style/tabsWidgetIndicatorColors"
                            >
                            <!--android:background="?attr/colorPrimary"-->

                        </android.support.v7.widget.Toolbar>

                        <android.support.design.widget.TabLayout
                            android:id="@+id/tabs"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/toolbar"
                            android:background="@color/colorSecondary"

                            android:minHeight="?attr/actionBarSize"/>

                        <!--android:background="?attr/colorPrimary"-->


                    </RelativeLayout>

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


                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <!-- your content here-->



                </FrameLayout>

            </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"
                android:fitsSystemWindows="true"
                app:menu="@menu/drawer"/>

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

    </FrameLayout>

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

在您的主要代码中，使用 findViewById 查找 ID 为 @+id/toolbar 和 @+id/actionBar.

的工具栏

如果您使用的是平板电脑布局，则两个工具栏都不应为空。在 phone 上，actionBar 为空。 检查它，如果它不为空，则需要将 supportactionbar 设置为 ID 为 @+id/actionBar 的工具栏，并且需要使用 ID @+[=25 扩充工具栏上的菜单=].在 运行 tablet/phone 检查时，使一个新的私有布尔值可供您的 class 访问，名为 isInflateMenuEnabled。如果@+id/actionBar 工具栏不为空，则 isInflateMenuEnabled 应该为 false。

总结一下，这是代码：

public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener{


private boolean isInflateMenuEnabled = true;

private Toolbar mToolbar;

@Override
    protected void onCreate(Bundle savedInstanceState) {

setContentView(R.layout.activity_main);


//Check if it is a tablet or phone

mToolbar = (Toolbar) findViewById(R.id.toolbar);

        Toolbar actionToolbar = (Toolbar)findViewById(R.id.actionToolbar);

        if(actionToolbar != null){
            isInflateMenuEnabled= false;
            setSupportActionBar(actionToolbar);

            actionToolbar.setTitle("");
            mToolbar.inflateMenu(R.menu.menu_main);
            mToolbar.setOnMenuItemClickListener(this);

        }else{

            mToolbar.inflateMenu(R.menu.menu_main); // Inflate the menu because there will be no menu inflated automatically anymore.
            mToolbar.setOnMenuItemClickListener(this);
            setSupportActionBar(mToolbar);
       }

mToolbar.setTitle(getString(R.string.title));


}

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);


return isInflateMenuEnabled;

}

@Override
    public boolean onOptionsItemSelected(final MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.

// This will be working with your menu clicks


}


}