CoordinatorLayoutのツールバーの下にビューを追加する


176

次のレイアウトがあります。

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.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>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.design.widget.CoordinatorLayout>

にを追加FragmentしてFrameLayout置き換えます。私Fragmentのの1つは次のレイアウトのリストです。

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

ここで、ツールバーがリストの上に描画されるという私の問題。私はのコンテンツをにラップすることで解決しようとしCoordinatorLayoutましたがLinearLayout、オーバードローは解決されましたが、その方法ではアプリバーのスクロール動作が機能しなくなりました。

どんな助けでも大歓迎です!

回答:


355

属性を取る

app:layout_behavior="@string/appbar_scrolling_view_behavior"

オフにしてRecyclerView、のFrameLayout下に表示しようとしているものの上に置きますToolbar

スクロールビューの動作で重要なことの1つは、コンポーネントをツールバーの下にレイアウトすることです。にFrameLayoutはスクロール(RecyclerView)する子孫があるため、はCoordinatorLayoutを移動するためのスクロールイベントを取得しToolbarます。


もう1つ注意する必要があるのは、そのレイアウト動作により、が既にスクロールされているかのFrameLayoutように高さがサイズ設定さToolbarToolbar完全に表示された状態でビュー全体が単に押し下げられて、ビューの下部が下部の下部にあることです。CoordinatorLayout

これには驚きました。ツールバーを上下にスクロールすると、ビューが動的にサイズ変更されることを期待していました。したがって、ビューの下部に固定コンポーネントがあるスクロールコンポーネントがある場合、を完全にスクロールするまで、その下部コンポーネントは表示されませんToolbar

そのため、UIの下部にボタンを固定する場合は、ボタンをCoordinatorLayoutandroid:layout_gravity="bottom")の下部に配置し、ボタンの下のマージンをツールバーの下のビューに追加することで、これを回避しました。


1
本当にありがとう、これは本当にうまくいきます!その後の私の唯一の問題は、ツールバーが移動された場合、Fragment含まれているものをリストに置き換えた後、ツールバーが戻らないことでしたFragmentこの方法で手動でツールバーを表示することができました。
WonderCsabo、2015年

ワオ。Fragmentの独自のレイアウトがFrameLayoutの「プレースホルダー」を完全に置き換えるといつも思っていましたが、そうではないことがわかりました。この回答をありがとう!それは私を大いに助けました。
Aspiring Dev

あなたができるかどう@Surendar Dはこれをチェックしてくださいstackoverflow.com/questions/42968587/...
モハメドRihan

いいね。ありがとうございました!
Razvan

86

私は何とかしてこれを修正することができました:

android:layout_marginTop = "?android:attr / actionBarSize"

次のようにFrameLayoutに:

 <FrameLayout
        android:id="@+id/content"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />

9
marginTopを追加する代わりに、app:layout_behavior = "@ string / appbar_scrolling_view_behavior"を追加します
Naveed Ahmad

3
@ string / appbar_scrolling_view_behaviorが使用できない場合の完璧なソリューション
Julius

使用してくださいandroid:layout_marginTop="?android:attr/actionBarSize"
マーティン・

6
これはちょっとハッキーです。MIGHTのサイズにマージンを追加すると(常にそのサイズのツールバーがあると仮定)、ある時点で壊れます
Kenny

0

Android Studio 3.4以降、を保持するレイアウトにこの行を配置する必要がありますRecyclerView

app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"

0

上部の折りたたみツールバーや独自のScrollFlagsを使用するには、次のようにします。マテリアルデザインから FrameLayoutを削除します

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|enterAlways">


        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/ic_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_arrow_back" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="back"
                android:textSize="16sp"
                android:textStyle="bold" />

        </androidx.appcompat.widget.Toolbar>


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/post_details_recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="5dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.