android - Viewpager 被推出屏幕 [CoordinatorLayout] [设计库]

Question

我有一个简单的应用程序，它有一个包含 3 个 fragment 的 viewpager。在其中一个 fragment 中，我有 Recyclerview 列表。向下滚动时，工具栏折叠，向上滚动时显示。我的问题是当工具栏折叠并且我向左/向右滚动时我正在以编程方式扩展它并且它会向下插入 viewpager 这样做而不是仅仅重叠它。这导致屏幕 View 的不愉快位移。我怎样才能让工具栏与我的 viewpager 重叠，而不是在展开时将其向下推？ 问题我做了个小记录click

这是我的主要布局:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".UI.MainActivity">

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

        <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/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tabsHeight"
            style="@style/NavigationTab"/>


    </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"/>


    <include layout="@layout/content_main"/>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/floatingActionMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/blood_orange"
        fab:fab_addButtonColorPressed="@color/dirtyWhite"
        fab:fab_addButtonPlusIconColor="@color/dirtyWhite"
        fab:fab_addButtonSize = "normal"
        fab:fab_labelStyle="@style/menu_labels_style"
        fab:fab_labelsPosition="left"
        app:layout_anchor="@id/viewpager"
        app:layout_anchorGravity="bottom|end">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/createPlanBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/blood_orange"
            fab:fab_title="Create a plan"
            fab:fab_size="normal"
            app:fab_icon="@drawable/ic_event_white_48dp"
            fab:fab_colorPressed="@color/dirtyWhite"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/changeStatusBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/blood_orange"
            fab:fab_size="normal"
            app:fab_icon="@drawable/ic_textsms_white_48dp"
            fab:fab_title="Change status"
            fab:fab_colorPressed="@color/dirtyWhite"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

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

这是我的包含 recyclerview 布局的 fragment :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
            android:background="@color/tab_bg">

<android.support.v7.widget.RecyclerView
    android:id="@+id/feedCardViewList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="true"
    xmlns:android="http://schemas.android.com/apk/res/android"/>

</RelativeLayout>

content_main 布局:

<RelativeLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".UI.MainActivity"
tools:showIn="@layout/activity_main"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


</RelativeLayout>

Answer 1

今天遇到这个问题。我不确定我是否遗漏了某些东西并错误地实现了 CoordinatorLayout，或者它是否是一个错误。但是如果有人仍然遇到这个问题，我通过根据应用栏的高度调整工具栏下方内容的边距以编程方式解决了这个问题。在这里:

布局 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.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        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="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            ...collapsing toolbar content...

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

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        ...content beneath toolbar...

    </FrameLayout>

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

代码(展开布局后):

AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
FrameLayout contentLayout = (FrameLayout) view.findViewById(R.id.content);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) contentLayout.getLayoutParams();
        layoutParams.setMargins(0, 0, 0, appBarLayout.getMeasuredHeight() + verticalOffset);
        contentLayout.requestLayout();
    }

});