如何使用协调器布局在toolbar下设置drawerlayout

时间:2015-08-29 17:32:59

标签: android android-toolbar android-coordinatorlayout

我有一个像这样的xml,当我显示抽屉布局时,它覆盖Toolbar,我想要我的Toolbar下面的抽象布局,我想不出怎么做,我尝试了很多东西我整天试了一下。如何将CoordinatorLayoutDrawerLayout一起使用而不重叠Toolbar

这是我的操作栏样式:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <item name="colorAccent">@color/ColorPrimary</item>
</style>

这是我的布局:

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

    <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"
            app:elevation="0dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/ColorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <TextView
                    android:id="@+id/toolBarTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textColor="@color/white"
                    android:textSize="18dp"/>

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

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


        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            app:elevation="4dp"
            app:fabSize="normal"
            app:layout_behavior="com.frt.poppcar.utils.FabBehavior"/>

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

    <ScrollView
        android:id="@+id/drawerList"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@color/white">

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

            <TextView
                android:id="@+id/mainTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/main"
                android:textColor="@color/five"
                android:textSize="18dp"/>

        </LinearLayout>

    </ScrollView>

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

3 个答案:

答案 0 :(得分:6)

这对我很有用..你需要将协调器布局作为父布局并设置你的抽屉布局的布局行为

<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

<!-- to make toolbar scroll and hide towards upside include this line
app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_marginTop="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--<include layout="@layout/navigation_drawer_content"/>-->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />

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

答案 1 :(得分:1)

首先,由于Material Design Style Guide
,不建议这样做 那么,您应首先在工具栏布局中定义android:minHeight="?attr/actionBarSize"。之后在NavigationView布局中定义android:layout_marginTop="?attr/actionBarSize"。这是一种技巧。

答案 2 :(得分:1)

我认为现在为时已晚,但您可能想知道问题是什么或者您可以做什么。不管怎样。

包含Support Design Library的新NavigationDrawer您可以像使用此答案一样使用Fiddle

<!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/activity_main_drawer" />

在添加和编辑一些错误后,这应该可行了:

<?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"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/root_coorinator"
        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"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <TextView
                    android:id="@+id/toolBarTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textSize="18dp" />

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

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


        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="10dp"
            app:elevation="4dp"
            app:fabSize="normal"
            app:layout_anchor="@id/root_coorinator"
            app:layout_anchorGravity="bottom|end|right" />

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

    <!--<ScrollView
        android:id="@+id/drawerList"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start">

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

            <TextView
                android:id="@+id/mainTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="main"
                android:textSize="18dp" />

        </LinearLayout>

    </ScrollView>-->

    <!--Don't use it like that, Use NavigationDrawer instead-->
</android.support.v4.widget.DrawerLayout>

还有一件事,你可以单独使用Toolbar而不添加TextView作为标题。

此外,您可以在NestedScrollView

中使用该布局