23

序章

私は、視差ヘッダー画像とスクロールコンテンツを使用して一般的なパターンを実装するアクティビティを持ってCoordinatorLayoutいAppBarLayoutますCollapsingToolbarLayout. 私のxmlレイアウトは次のようになります。

<android.support.design.widget.CoordinatorLayout
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <TextView
                android:background="@color/colorAccent"
                android:gravity="center"
                android:layout_height="250dp"
                android:layout_width="match_parent"
                android:text="ParallaxImage"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:layout_width="wrap_content"
            android:text="@string/large_text"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

下の gif アニメーションでわかるように、すべてが正しく機能します。NestedScrollViewコンテンツから、Toolbarまたは視差から画面全体をスクロールできますView。

AppBarLayout + NestedScrollView

問題

Google は、開発者がBottom sheetを実装するのに役立つBottomSheetBehaviorクラス (Android デザイン サポート ライブラリ23.2 ) を導入しました。Bottom シートを使用した 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.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
        <!-- ommited -->
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- ommited -->
    </android.support.v4.widget.NestedScrollView>

    <LinearLayout
        android:id="@+id/bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="@android:color/holo_blue_bright"
        android:orientation="vertical"
        app:behavior_peekHeight="?attr/actionBarSize"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="BottomSheetLayout"
            android:textColor="@android:color/white"/>

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/bottomSheetContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="@android:color/holo_green_dark"
                android:padding="16dp"
                android:text="@string/large_text"
                android:textColor="@android:color/white"/>

        </android.support.v4.widget.NestedScrollView>
    </LinearLayout>

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

結果は次のようになります。

ここに画像の説明を入力

ご覧のとおり、視差からスクロールを開始すると、スクロールできなくなりましたView。NestedScrollView期待どおりにコンテンツと作品からスクロールしますToolbar。

質問

スクロールを視差からViewも機能させるにはどうすればよいですか (最初の gif アニメーションと同じ方法)。BottomSheetBehaviorがタッチイベントを傍受しAppBarLayout (AppBarLayoutBehavior)、スクロールを処理できないようです。しかし、奇妙なことは、Toolbar作品からのスクロールと、視差Viewとの両方Toolbarが の子であることAppBarLayoutです。

4

6 に答える 6

0

おそらくコードのバグのようBottomSheetBehaviorです。 のコードをデバッグしようとするとCoordinatorLayout、視差に触れるとではなく のViewレイアウトとして決定されることがわかります。BottomSheetBehaviorHeaderBehavior

したがって、私が見つけた簡単な修正はOnTouchListener、視差ビューに常に true を返すように設定することです。

View parallaxView = findViewById(R.id.parallax_view);
parallaxView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        return true;
    }
});

もちろん、android:id="@+id/parallax_view"視差縮小モードでビューを設定することを忘れないでください。

それが役に立てば幸い！

于 2016-05-08T18:18:56.140 に答える
0

私は自分の答えを思いつきました：

  • に追加app:layout_behavior="...AppBarLayoutCustomBehavior"しますappBarLayout。

  • そのクラスを作成し、から拡張しますAppBarLayout.Behavior

  • オーバーライドonStartNestedScrollしてonNestedFling

  • のようなフラグを作成し、scrollDenialそれを以下の両方のメソッドに追加してから、super (scrollDenial && super.onStartNestedScroll...) を呼び出します。

  • ここで、すべての onStartNestedScroll で拒否条件を更新する必要があります。私はこのようなことをしました：

    https://gist.github.com/recoverrelax/8dd37b54910d70b5cd6a130a070c51e9

Ps。申し訳ありませんが、これは Kotlin です :p 理解するのは難しいことではありません。ボトムシートの問題を解決しました。

于 2016-11-23T13:21:12.850 に答える
0

bootemSheet として ,replace ブローを使用NestedScrollViewする必要があると思います!BottomSheetBehavior

<android.support.v4.widget.NestedScrollView
    android:id="@+id/bottomSheet"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:background="@android:color/holo_blue_bright"
    android:orientation="vertical"
    app:behavior_peekHeight="?attr/actionBarSize"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:text="BottomSheetLayout"
            android:textColor="@android:color/white"/>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="@android:color/holo_green_dark"
                android:padding="16dp"
                android:text="@string/large_text"
                android:textColor="@android:color/white"/>
        </ScrollView>
    </LinearLayout>

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

NestedScrollViewLinearLayout!ではなく、ツールバーでネストする方法を知ることができます。

助けたい!!

于 2016-05-01T15:34:39.027 に答える