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

Question

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

tim*_*687 9 android tablet screen-orientation android-layout material-design

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

我想要那么糟糕,因为它看起来很神奇.我现在正在谷歌搜索大约一个小时,我没有遇到任何好的教程.我找到了这个:v21前棒棒糖的材料设计.

我立即开始实施这一切,我尝试的一切都完全错了.独立操作栏的主题需要是ThemeOverlay.AppCompat.ActionBar我的手机布局,我正在扩展Theme.AppCompat.NoActionBar主题.(主题如下)

目前还不清楚我应该做些什么来制作像平板电脑上面的图像,并在手机上显示普通(自定义)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>

Run Code Online (Sandbox Code Playgroud)

在你问之前,是的,我已经在SO上发现了这个问题,但这不是一个重复的问题.Chris Banes所写的帖子也没有让我明白.

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

这是我手机版的布局.

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

Run Code Online (Sandbox Code Playgroud)

这是我的平板电脑布局:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

tim*_*687 0

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

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

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

Run Code Online (Sandbox Code Playgroud)

对于您的平板电脑布局，请将此作为基础：

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

Run Code Online (Sandbox Code Playgroud)

在您的主代码中，使用 findViewById 查找 id 为 @+id/toolbar 和 @+id/actionBar 的工具栏。

如果您使用平板电脑布局，则两个工具栏都不应该为空。在手机上，actionBar 为空。检查这一点，如果它不为空，则需要将 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


}


}

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	404 次
最近记录：	8 年，5 月前