web-dev-qa-db-ja.com

AndroidデザインライブラリCoordinatorLayout、AppBarLayout、DrawerLayout

Android API 22のデザインライブラリを使用しています。次の操作を行います:

  1. ツールバーとDrawerLayoutがあり、その中にRecyclerViewがあります
  2. drawerLayoutをツールバーの下に配置します。たとえば、ツールバーが表示されている場合は、ドロワーのメインコンテンツがその下にあり、(左)ドロワーもその下にある必要があります。これにより、ツールバーが展開されても、ツールバーは引き続き表示されます。
  3. リサイクラービューが下にスクロールされたときにツールバーが画面からスクロールオフされる

これは可能ですか? #2と#3の結婚に問題があります。現在の方法では、ツールバーは常にドロワーレイアウトの上にあり、リサイクラーの最初のエントリと左のドロワーの上部もカバーしています。これが私のレイアウトファイルです(不完全ですが、私の構造を示しています):

<Android.support.design.widget.CoordinatorLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.v4.widget.DrawerLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <RecyclerView
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:gravity="center"/>

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

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="?android:attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

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

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

RecyclerViewのapp:layout_behavior = "@ string/appbar_scrolling_view_behavior"設定は効果がないように見えますが、削除した場合の動作は同じです。

引き出しがツールバーの下などにあることを定義するために、RelativeLayoutをCoordinatorLayoutの子として追加してみましたが、何も機能していないようです。

ライブラリで実現しようとしていることは可能ですか?

16
wujek

ハンバーガーのアイコンと矢印のアニメーションを見たい場合は、以下を試してください。 NavigationViewの上部マージン(layout_marginTop)を含めると、下に移動します。

<?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/navigation_drawer"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <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
            xmlns:Android="http://schemas.Android.com/apk/res/Android"
            xmlns:app="http://schemas.Android.com/apk/res-auto"
            Android:id="@+id/appbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways" />

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

        <!-- main content view -->
        <FrameLayout
            Android:id="@+id/content_frame"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@Android:color/background_light"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

    <!-- The navigation drawer -->
    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation_view"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_marginTop="?attr/actionBarSize"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu"/>

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

はい!可能です。

<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/drawerLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/coordinatorLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        tools:context=".StartupActivity">

        <Android.support.design.widget.AppBarLayout
            Android:id="@+id/appBarLayout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/app_bar"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/Theme.AppCompat.NoActionBar"/>

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

        <Android.support.v7.widget.RecyclerView
            Android:id="@+id/scrollRecyclerView"
            Android:layout_width="match_parent"
            Android:layout_height="fill_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

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

    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/drawer_recycler_view"
        Android:layout_width="320dp"
        Android:layout_height="match_parent"
        Android:layout_gravity="left|start"
        Android:background="@color/WhiteColor"
        Android:fitsSystemWindows="true"
        Android:scrollbars="vertical"/>

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

ご覧のとおり、重要なのは基本的にapp:layout_scrollFlags="scroll|enterAlways"スクロールするとツールバーが非表示になります。コードの下部にあるRecyclerViewDrawerLayout内にあるもので、上のものはメインアクティビティレイアウトにあるものです。

3
Linxy

久しぶりですが、それでも誰かの役に立つと思います。ドロワーレイアウトには、1つの子レイアウトが必要です。 Android docsによると、XML順序はZオーダーを意味し、ドロワーはコンテンツの上にある必要があるため、FrameLayoutである必要があります。以下のリンクにアクセスしてください。

ナビゲーションドロワーの作成

AppBarLayout、Toolbar、RecyclerViewおよびその他すべてのビューをFrameLayoutに追加し、それをDrawer Layoutの子にします。うまくいけば実行されます。

0
muak

開発者のページ から:

DrawerLayoutは、ウィンドウコンテンツのtop-levelコンテナとして機能し、インタラクティブな「ドロワー」ビューをウィンドウの端から引き出すことができます。

最初に、DrawerLayoutを最上位のコンテナ(つまり、親レイアウト)として配置してみます。次にCoordinatorLayoutを下に配置して、何が起こるかを確認します。

さらに、NavigationViewを追加していません。基本的な指示 こちら を確認してください。

0
TheoK

これはうまくいくはずですが、私にとってはうまくいきました。

    <Android.support.design.widget.CoordinatorLayout
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        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.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"
                />

        </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"
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
            >
          <Android.support.v7.widget.RecyclerView
                 Android:id="@+id/scrollingRecyclerView"
                 Android:layout_width="match_parent"
                 Android:layout_height="fill_parent"
        />

            <!-- The navigation drawer -->
            <FrameLayout
                Android:id="@+id/right_frame"
                Android:layout_height="match_parent"
                Android:layout_gravity="start"/> (whatever)

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

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

スクロール動作はCoordinatorLayoutの直接の子(DrawerLayoutに)に設定する必要があります。 #2の問題が修正されます。引き出しのコンテンツにrecyclerView Toolbarが含まれている場合は、画面から再びスクロールされます。

0
Tiko