web-dev-qa-db-ja.com

CollapsingToolbarLayoutとNestedScrollViewが機能しない

NestedScrollViewを使用してCollapsingToolbarLayoutを実装しようとしていますが、下部のNestedScrollView内にTextViewが表示されており、ツールバーを許可、スクロール、または折りたたみできません。これはRecyclerViewで機能しますが、NestedScrollViewでは機能しません。 app:layout_behavior="@string/appbar_scrolling_view_behaviorを削除すると、ツールバーが折りたたまれますが、NestedScrollViewがAppBarLayoutの下にありません。これを修正するための解決策や提案はありますか？

[〜＃〜] xml [〜＃〜]

<Android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true">

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

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:gravity="center"
                Android:text="Hello"
                Android:textColor="#000"
                Android:textSize="16sp"/>
        </LinearLayout>
    </Android.support.v4.widget.NestedScrollView>

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

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="134dp"
                Android:background="@color/primary"
                app:layout_collapseMode="parallax"/>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>

結果

enter image description here

androidandroid-design-libraryandroiddesignsupportandroid-collapsingtoolbarlayout
10
Eugene H

AppbarLayoutで特定の高さに変更します。例：

Android:layout_height="300dp".

主な問題は、ネストされたスクロールビューに、スクロールを発生させるのに十分なビューがないことです。したがって、視差効果は機能しません。

これはNestedScrollViewとCollapsingToolbarLayoutを使用する実際の例です

7
Psypher

私も同じ問題を抱えていて、そのための簡単な修正を書きました。 「Hello」ラベルを含むLinearLayoutがmContainerにバインドされ、ToolbarがmToolbarにバインドされているとすると、次のように使用できます。

private void fixNestedScrollViewScrolling() {
    final int bottomMargin = getScreenHeight() - mContainer.getHeight() - mToolbar.getHeight();
    final FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
            mContainer.getLayoutParams());
    layoutParams.setMargins(0, 0, 0, bottomMargin);
    mContainer.setLayoutParams(layoutParams);
}

private int getScreenHeight() {
    final Display display = getWindowManager().getDefaultDisplay();
    final Point size = new Point();
    display.getSize(size);
    return size.y;
}

この修正メソッドは、私のonCreateのActivityメソッドで呼び出されます。

@Override
protected void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_single_post);

    fixNestedScrollViewScrolling();

    // some other stuff here ...
}
0
pxsx

それを機能させるには、CoordinatorLayoutを追加する必要がありました。

<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    xmlns:tools="http://schemas.Android.com/tools">

    <com.google.Android.material.appbar.AppBarLayout
        Android:id="@+id/appBarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.Android.material.appbar.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="136dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <!--Your layout here-->

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

    <androidx.core.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!--And here-->

    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

PS：with Androidサポートライブラリの変更androidx.coordinatorlayout.widget.CoordinatorLayoutからAndroid.support.design.widget.CoordinatorLayout

およびandroidx.core.widget.NestedScrollViewからAndroid.support.v4.widget.NestedScrollView

0
Ilia Grabko