Question

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

我想要那么糟糕，因为它看起来很神奇。我现在正在谷歌搜索大约一个小时，我没有遇到任何好的教程。我找到了这个：v21 Material Design for Pre Lollipop。

我立即开始实施这一切，我尝试的一切都完全错了。独立操作栏的主题必须是onkeypress="if(e.keyCode == 8 || e.keyCode == 46) { $('#StartDate').datepicker('setDate', null); }"但是在我的手机布局上，我正在扩展ThemeOverlay.AppCompat.ActionBar主题。（主题在下面）

目前还不清楚我应该做些什么来制作像 Tablets 上面的图像，并在手机上显示正常（自定义）supportActionBar而不会弄乱其中一个

这是我的AppTheme风格（我应用于我的应用）

Theme.AppCompat.NoActionBar

在你问之前，是的，我在SO上发现了this问题，但这不是一个重复的问题。克里斯·贝恩斯写的帖子也没有让我明白。

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

这是我手机版的布局。

<!-- 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>

这是我的平板电脑布局：

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

Answer 1

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

Create a Card Toolbar (Nested Toolbar) in Android

您可以将其实施为平板电脑布局。

它由一个扩展高度工具栏（蓝色）和一个带有标题和常规菜单的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加倍工具栏的高度

步骤2将`CardView`设置为辅助工具栏

step3 Java代码

原点工具栏：设置导航图标
CardView工具栏：设置菜单和标题

查看更多

Answer 2

经过几个小时的尝试后，我想出了以下代码：

对于您的手机布局，请将此作为基础：

<?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的工具栏。

如果您使用的是平板电脑布局，则两个工具栏都不应为空。在手机上，actionBar为null。检查一下，如果它不为null，则需要将supportactionbar设置为id为@ + id / actionBar的工具栏，并且需要使用id @ + id / toolbar对工具栏上的菜单进行充气。在运行平板电脑/手机检查时，请为名为isInflateMenuEnabled的类创建一个新的私有布尔值。如果@ + id / actionBar工具栏不为null，则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


}


}

使用SupportToolbar进行电话布局，使用独立的操作栏进行平板电脑布局

2 个答案:

step1加倍工具栏的高度

步骤2将`CardView`设置为辅助工具栏

step3 Java代码

使用SupportToolbar进行电话布局，使用独立的操作栏进行平板电脑布局

2 个答案:

step1加倍工具栏的高度

步骤2将CardView设置为辅助工具栏

step3 Java代码

步骤2将`CardView`设置为辅助工具栏