停止 ViewPager 内的 NestedScrollView 处理水平滚动

Question

我正在尝试实现一个由 CoordinatorLayout 和 ViewPager 组成的视图，并且 NestedScroolViews 在每个 ViewPager 中。我设法让工具栏隐藏在滚动条上，但我一直遇到以下问题：

每当我向左或向右滑动以更改视图分页器的内容时，手势都会转发到 NestedScrollView，有时会注册一个非常小的垂直滚动。虽小，却够烦人

这样应该能更好地说明问题：

视频：https://youtu.be/BGqynDDL68I

我尝试扩展 NestedScrollView 以阻止 scroll/fling 方法但没有成功。

有没有人遇到同样的问题？

编辑 1：代码

Activity:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="main.MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--<include layout="@layout/main__activitycontent"/>-->

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/main__toolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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


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

    <android.support.design.widget.TabLayout

        android:id="@+id/main__navigations_tablayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@color/main__tabbar_button_color"
        app:layout_behavior="utils.views.TabLayoutBehaviour"
        app:tabIndicatorColor="@android:color/white"
        app:tabSelectedTextColor="@color/main__tabbar_selected_color"
        app:tabTextColor="@color/main__tabbar_normal_color"
        >


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

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

带有 ViewPager 的片段

<android.support.v4.view.ViewPager
    android:id="@+id/meditationpager__pager"

    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

内部片段：

<android.support.v4.widget.NestedScrollView
    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:background="@android:color/white"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="main.MainActivity"
    tools:showIn="@layout/main__activity">

    <LinearLayout
        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="wrap_content"
        android:orientation="vertical"
        tools:context="domain.screens.readmeditation.MeditationFragment">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/large_text"/>

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

Answer 1

尝试像这样更改 Activity 的结构：

<?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"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context="main.MainActivity"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <!--<include layout="@layout/main__activitycontent"/>-->

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/main__toolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.view.ViewPager
            android:id="@+id/meditationpager__pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.design.widget.TabLayout
            android:id="@+id/main__navigations_tablayout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_gravity="bottom"
            android:background="@color/main__tabbar_button_color"
            app:tabTextColor="@color/main__tabbar_normal_color"
            app:tabSelectedTextColor="@color/main__tabbar_selected_color"
            app:tabIndicatorColor="@color/white"/>

    </LinearLayout>

这样就不再需要带有视图寻呼机的片段，您可以使用以下方法设置视图：

private void setupViewPager() {
    MyAdapter adapter = new MyAdapter(getSupportFragmentManager());

    InnerFragment fragment = new InnerFragment();
    adapter.addFragment(fragment);

    mViewPager.setAdapter(adapter);
}

我相信使用这种方法，您不需要设置 NestedScrollView 的 layout_behavior。

Answer 2

我找到的最干净的解决方案是扩展 NestedScrollView 并覆盖 onTouch 事件，如下所示：

public class VerticalOnlyNestedScrollView extends NestedScrollView {
    private static final String TAG = "VOnlyNestedScrollView";
    public VerticalOnlyNestedScrollView(Context context) {
        super(context);
    }

    private float startX, startY;

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

    public VerticalOnlyNestedScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        if (!(ev.getAction()== MotionEvent.ACTION_DOWN)&& ev.getHistorySize() > 0) {


            float yVector = ev.getY() - ev.getHistoricalY(0);
            float xVector = ev.getX() - ev.getHistoricalX(0);
            Log.d(TAG, "onInterceptTouchEvent: " + xVector + "--" + yVector);

            return Math.abs(yVector) <= Math.abs(xVector) || super.onTouchEvent(ev);
        }

        return super.onTouchEvent(ev);
    }
}

这样，仅当 yVector 大于 xVector 时才处理父 onTouch。

停止 ViewPager 内的 NestedScrollView 处理水平滚动

Stop NestedScrollView inside ViewPager to process horizontal scrolls

android

android-coordinatorlayout