android - CoordinatorLayout - 朝相反的方向摆动会导致抖动

Question

我需要在顶部制作一个带有静态 View 的可滚动 fragment ，在底部的每个页面中制作一个带有 RecyclerView 的 ViewPager。我正在尝试使用 CoordinatorLayout 实现预期的结果，但遇到了一个问题 - 当我向上滑动顶部 View (为了向下滚动)并且在向下滑动 RecyclerView 后不久(为了向上滚动)，滚动是一种抵消和抖动；当我首先向下滑动 Recycler View 然后向上滑动顶部 View 时，整个 fragment 会滚动回顶部。当我开始向相反方向滚动时，滚动似乎已经结束并且没有停止。

我找到了 a tutorial具有类似的布局 ( code )，但在尝试之后，我发现它遇到了同样的问题。

问题记录如下:

• view coming back up after flinging up, then down
• view jitters after flinging down, then up

编辑:在下面添加布局代码

fragment_layout.xml:

<?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.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.design.widget.CollapsingToolbarLayout
        android:id="@+id/main.collapsing"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:layout_scrollFlags="scroll|snap"
        >
        ​
        <ImageView
            android:id="@+id/materialup.profile_backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/picture300x300"
            app:layout_collapseMode="parallax"
            />
    </android.support.design.widget.CollapsingToolbarLayout>
    ​​
    <android.support.v7.widget.Toolbar
        android:id="@+id/materialup.toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="24dp"
        app:theme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        style="@style/Widget.AppCompat.Toolbar"
        />
    ​
    <LinearLayout
        android:id="@+id/materialup.title_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingTop="8dp"
        android:gravity="center"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        >
        ​
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:text="Title"
            />
        ​
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_marginBottom="4dp"
            android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
            android:text="SubTitle"
            android:textColor="@android:color/white"
            />
        ​
    </LinearLayout>
    ​
    <android.support.design.widget.TabLayout
        android:id="@+id/result_tabs"
        android:layout_width="fill_parent"
        android:layout_height="24dp"
        app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
        app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
        app:tabIndicatorHeight="4dp"
        />
</android.support.design.widget.AppBarLayout>
​
<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

MyFragment.java:

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.ewelina.matador.R;

public class MyFragment extends android.support.v4.app.Fragment {

    public static MyFragment newInstance() {
        return new MyFragment();
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setRetainInstance(true);
    }

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        final View rootView = inflater.inflate(R.layout.fragment_layout, container, false);

        TabLayout tabLayout = rootView.findViewById(R.id.result_tabs);
        ViewPager viewPager = rootView.findViewById(R.id.view_pager);

        viewPager.setAdapter(new TabsAdapter(getChildFragmentManager()));
        tabLayout.setupWithViewPager(viewPager);

        return rootView;
    }

    private static class TabsAdapter extends FragmentPagerAdapter {
        private static final int TAB_COUNT = 2;

        TabsAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return TAB_COUNT;
        }

        @Override
        public Fragment getItem(int i) {
            return FakePageFragment.newInstance();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab " + String.valueOf(position);
        }
    }
}

FakePageFragment.java:

public class FakePageFragment extends Fragment {
    private RecyclerView mRootView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mRootView = (RecyclerView) inflater.inflate(R.layout.fragment_page, container, false);
        return mRootView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initRecyclerView();
    }

    private void initRecyclerView() {
        mRootView.setAdapter(new FakePageAdapter(20));
    }

    public static Fragment newInstance() {
        return new FakePageFragment();
    }


    private static class FakePageAdapter extends RecyclerView.Adapter<FakePageVH> {
        private final int numItems;

        FakePageAdapter(int numItems) {
            this.numItems = numItems;
        }

        @Override
        public FakePageVH onCreateViewHolder(ViewGroup viewGroup, int i) {
            View itemView = LayoutInflater.from(viewGroup.getContext())
                    .inflate(R.layout.list_item_card, viewGroup, false);

            return new FakePageVH(itemView);
        }

        @Override
        public void onBindViewHolder(FakePageVH fakePageVH, int i) {
            // do nothing
        }

        @Override
        public int getItemCount() {
            return numItems;
        }
    }

    private static class FakePageVH extends RecyclerView.ViewHolder {
        FakePageVH(View itemView) {
            super(itemView);
        }
    }
}

fragment_page.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    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:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutManager="android.support.v7.widget.LinearLayoutManager"
    tools:listitem="@layout/list_item_card"
    />

list_item_card.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginRight="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginBottom="4dp"
    android:layout_marginTop="4dp"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fontFamily="sans-serif-light"
        android:padding="8dp"
        android:text="Lorem ipsum"
        android:lineSpacingExtra="4dp"
        android:ellipsize="end"
        />
</LinearLayout>

Answer 1

fling 行为的类似问题已得到解决 here . 需要将自定义行为分配给应用栏。

public final class FlingBehavior extends AppBarLayout.Behavior {
private static final int TOP_CHILD_FLING_THRESHOLD = 3;
private boolean isPositive;

public FlingBehavior() {
}

public FlingBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean onNestedFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, float velocityX, float velocityY, boolean consumed) {
    if (velocityY > 0 && !isPositive || velocityY < 0 && isPositive) {
        velocityY = velocityY * -1;
    }
    if (target instanceof RecyclerView && velocityY < 0) {
        final RecyclerView recyclerView = (RecyclerView) target;
        final View firstChild = recyclerView.getChildAt(0);
        final int childAdapterPosition = recyclerView.getChildAdapterPosition(firstChild);
        consumed = childAdapterPosition > TOP_CHILD_FLING_THRESHOLD;
    }
    return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
}

@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed) {
    super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
    isPositive = dy > 0;
}
}