web-dev-qa-db-ja.com

Android CoordinatorLayout + AppbarLayout + Viewpagerは常にスクロール

上部にToolBarがあり、その下にTabLayoutがあり、ViewLayoutがTabLayoutからタブを切り替えるクラシックレイアウトがあります。 ViewPagerのコンテンツがスクロール可能である場合、ToolBarはスクロールして見えなくなり、TabLayoutは上部に到達したときに追従して固定する必要があります。

ViewPagerのコンテンツのサイズに関係なく、ToolBarは常にスクロール可能です。以下の私のコードを参照してください。これを修正する方法に関する素晴らしいアイデアはありますか？

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

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/app_bar_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/primary"
        Android:orientation="vertical">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:theme="@style/AppTheme.ToolBar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="?attr/colorPrimary"
            Android:scrollbars="horizontal"
            app:tabIndicatorColor="@color/black_text" />

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/tabs_activity_view_pager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

編集：

ViewPagerの高さがルートビュー全体の高さと同じであることがわかります。 appbar_scrolling_view_behaviorは上下のオフセットを追加するように見えるため、これは意図的なものかもしれません。ただし、ツールバーとタブバーが常にスクロールされるため、奇妙に見えます。

androidlayoutandroid-viewpagercoordinator-layout
27
Kenneth

他のサンプル、私自身のコード、およびappbar_scrolling_view_behaviorの（やや乱雑な）ソースコードに基づいて：

        public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
            View dependency) {
        final CoordinatorLayout.Behavior behavior =
                ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
        if (behavior instanceof Behavior) {
            // Offset the child so that it is below the app-bar (with any overlap)

            final int appBarOffset = ((Behavior) behavior)
                    .getTopBottomOffsetForScrollingSibling();
            final int expandedMax = dependency.getHeight() - mOverlayTop;
            final int collapsedMin = parent.getHeight() - child.getHeight();

            if (mOverlayTop != 0 && dependency instanceof AppBarLayout) {
                // If we have an overlap top, and the dependency is an AppBarLayout, we control
                // the offset ourselves based on the appbar's scroll progress. This is so that
                // the scroll happens sequentially rather than linearly
                final int scrollRange = ((AppBarLayout) dependency).getTotalScrollRange();
                setTopAndBottomOffset(AnimationUtils.lerp(expandedMax, collapsedMin,
                        Math.abs(appBarOffset) / (float) scrollRange));
            } else {
                setTopAndBottomOffset(dependency.getHeight() - mOverlayTop + appBarOffset);
            }
        }
        return false;
    }

このコードで予想される動作であるため、問題を説明する方法でこれを読んでいます。

私たちは、RecyclerView専用の独自のスクロール動作を記述する必要があると思います。

0
Kenneth

私は問題を解決し、Googleテンプレートの例を試し、それを見つけました

app:layout_behavior="@string/appbar_scrolling_view_behavior"

ビューページャープロパティxmlに行を追加する必要があります。それは私の問題を解決しました。

6
Mert

this サンプルを試すことをお勧めします。

これは、サンプルのレイアウトのようなレイアウトです。

<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
        Android:id="@+id/appbar"
        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/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />

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

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

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="end|bottom"
        Android:layout_margin="@dimen/fab_margin"
        Android:src="@drawable/ic_done" />

</Android.support.design.widget.CoordinatorLayout>
5
Mohammad Hossein Gerami

viewPagerのデータとしてListViewを使用していますか？その場合は、listView.setNestedScrollingEnabled(true);が必要です

2
a442509097

これらの属性をTabLayoutに追加してみてください。

 app:layout_collapseMode="pin"
 app:tabMode="fixed"

そして、これはAppBarLayoutで：

 Android:fitsSystemWindows="true"

* UPDATE *

ツールバーはまだスクロール可能であるため、試しましたが、これは十分ではありません。解決策は、ViewPager（およびそのコンテンツ）に関するロジックを作成することです。

Xmlレイアウトファイルからtoolbar scroll_flag属性を削除します。 ViewPagerコンテンツの高さが> then screenHeight-（toolbar + tabBar）であるかどうかを確認するために、いくつかのJavaコードを実装する必要があります。trueの場合、プログラムでscroll_flagsを次のように設定します。

 LayoutParams params;
 params = // get layout params from your toolbar

 params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
| AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

 // set params
 toolbar.setLayoutParams(params);
0
lubilis

私はちょうど同じ問題を抱えています。ソリューションは非常にシンプルで、ビューページャーの高さを設定するだけです

Android:layout_height="wrap_content"
0
irfan.k

ViewPagerの高さはmatch_parentでなくwrap_content。

0
marcerv