web-dev-qa-db-ja.com

CoordinatorLayout + AppBarLayout + NavigationDrawer

CoordinatorLayoutをAppBarLayoutおよびNavigationDrawerと組み合わせると、レイアウトの問題が発生します。

問題は、NavigationDrawerとそのコンテンツがツールバーの後ろに隠れていることです。私はすでに多くの研究を行い、多くのリストラを試みましたが、「解決策」のどれも私の問題を解決しませんでした。

この小さなWebmビデオにデモがあります： https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_stackoverflow32523188.webm?dl=

基本スタイルはTheme.AppCompat.Light.NoActionBar。

私activity_overview.xmlは次のようになります。

<?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/overview_coordinator_layout"
    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"
        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/colorPrimaryDark"
            app:layout_scrollFlags="enterAlways|scroll" />


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

    <Android.support.v4.widget.DrawerLayout
        Android:id="@+id/drawer_layout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:clickable="true"
        Android:focusableInTouchMode="true">

        <Android.support.v4.widget.NestedScrollView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="@string/lorem_ipsum_long" />
        </Android.support.v4.widget.NestedScrollView>

        <Android.support.design.widget.NavigationView
            Android:id="@+id/nvView"
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_gravity="start"
            Android:background="@Android:color/white"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/navigationdrawer_main" />

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


    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/overview_floating_action_button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="16dp"

        Android:clickable="true"
        Android:src="@drawable/ic_add"
        app:layout_anchor="@id/overview_coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:layout_behavior="@string/fab_onscroll_behavior" />

</Android.support.design.widget.CoordinatorLayout>
androidandroid-layoutandroid-coordinatorlayoutandroid-appbarlayoutandroid-drawer
57
andred

CoordinatorLayoutはDrawerLayoutとNavigationViewをラップしています。つまり、コーディネーターはすべてのレイアウト方法を制御しています。次のように、引き出しの中にCoordinatorをネストする必要があります。

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

    <Android.support.design.widget.CoordinatorLayout
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/overview_coordinator_layout"
        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"
            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/colorPrimaryDark"
                app:layout_scrollFlags="enterAlways|scroll" />

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

        <Android.support.v4.widget.NestedScrollView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="@string/lorem_ipsum_long" />

        </Android.support.v4.widget.NestedScrollView>

        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/overview_floating_action_button"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_margin="16dp"
            Android:clickable="true"
            Android:src="@drawable/ic_add"
            app:layout_anchor="@id/overview_coordinator_layout"
            app:layout_anchorGravity="bottom|right|end"
            app:layout_behavior="@string/fab_onscroll_behavior" />

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

    <Android.support.design.widget.NavigationView
        Android:id="@+id/nvView"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        Android:background="@Android:color/white"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/navigationdrawer_main" />

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

それはそれを整理する必要があります！

93
GeordieMatt

前の回答に追加するには、CoordinatorLayout + child要素を別のxmlファイルに移動することにより、DrawerLayoutをよりクリーンにすることができます。そして、「include」オプションを使用してファイルを追加します。

<?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"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:openDrawer="start">

  <!-- Widget Coordinator + child elements go here -->
  <include
    layout="@layout/app_bar_main"
    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"
    Android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

</Android.support.v4.widget.DrawerLayout>
12
zuko