ViewPager 与SwipeRefreshLayout,RecyclerView,ScrollView滑动冲突解决方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ViewPager 与SwipeRefreshLayout,RecyclerView,ScrollView滑动冲突解决方法相关的知识,希望对你有一定的参考价值。


ViewPager 作为一个横向滚动的控件, 在 ViewGroup 中嵌套时会有一些可以优化的细节体验.

问题说明

当 SwipeRefreshLayout 中有 ViewPager 控件, 两者的滑动会相互冲突. 具体表现为 ViewPager 的左右滑动不顺畅, 容易被 SwipeRefreshLayout 拦截(即出现刷新的 View ).

问题原因:

ViewPager 本身是处理了滚动事件的冲突, 它在横向滑动时会调用 requestDisallowInterceptTouchEvent() 方法使父控件不拦截当前的 Touch 事件序列. 但是 SwipeRefreshLayout 的 requestDisallowInterceptTouchEvent() 方法置空了, 所以仍然会拦截当前的 Touch 事件序列.

问题分析:

为什么 SwipeRefreshLayout 的 requestDisallowInterceptTouchEvent() 方法什么都不做?

首先 SwipeRefreshLayout 继承自 ViewGroup .
在 requestDisallowInterceptTouchEvent() 方法置空的情况下, 用户可以从底部下拉刷新一次拉出 LoadingView (即手指不需要离开屏幕).
如果方法调用 ViewGroup 的 requestDisallowInterceptTouchEvent() 方法, 可以解决 ViewPager 的 兼容问题, 但是用户在界面底部下拉至头部后, 无法继续下拉, 需要手指放开一次才能拉出 LoadingView .
目标分析:

那么为了更加顺滑地滚动, 想要的效果当然是 一次性拉出 LoadingView .既然 ViewPager 在左右滑动时才会调用 requestDisallowInterceptTouchEvent() 方法, 那么 SwipeRefreshLayout 只应该在上下滑动时 才拦截 Touch 事件.

代码具体逻辑如下:

记录是否调用了 requestDisallowInterceptTouchEvent() 方法,并且设置为true.
在 SwipeRefreshLayout 中判断是否是上下滑动.
如果同时满足1,2, 则调用 super.requestDisallowInterceptTouchEvent(true) 拦截事件.
否则调用 super.requestDisallowInterceptTouchEvent(false) .
注意:因为 ViewGroup 的 requestDisallowInterceptTouchEvent 方法返回 true 后, 接下来的 Touch 事件在不会再传递到 onInterceptTouchEvent() 方法中, 所以需要在 dispatchTouchEvent() 方法中判断是否为上下滑动.

实现代码(部分):

//非法按键
private static final int INVALID_POINTER = -1;

//dispatch方法记录第一次按下的x
private float mInitialDisPatchDownX;

//dispatch方法记录第一次按下的y
private float mInitialDisPatchDownY;

//dispatch方法记录的手指
private int mActiveDispatchPointerId = INVALID_POINTER;

//是否请求拦截
private boolean hasRequestDisallowIntercept = false;

@Override
public void requestDisallowInterceptTouchEvent(boolean b)
hasRequestDisallowIntercept = b;
// Nope.


@Override
public boolean dispatchTouchEvent(MotionEvent ev)
switch (ev.getAction())
case MotionEvent.ACTION_DOWN:
mActiveDispatchPointerId = MotionEventCompat.getPointerId(ev, 0);
final float initialDownX = getMotionEventX(ev, mActiveDispatchPointerId);
if (initialDownX != INVALID_POINTER)
mInitialDisPatchDownX = initialDownX;

final float initialDownY = getMotionEventY(ev, mActiveDispatchPointerId);
if (mInitialDisPatchDownY != INVALID_POINTER)
mInitialDisPatchDownY = initialDownY;

break;
case MotionEvent.ACTION_MOVE:
if (hasRequestDisallowIntercept)
//解决viewPager滑动冲突问题
final float x = getMotionEventX(ev, mActiveDispatchPointerId);
final float y = getMotionEventY(ev, mActiveDispatchPointerId);
if (mInitialDisPatchDownX != INVALID_POINTER && x != INVALID_POINTER &&
mInitialDisPatchDownY != INVALID_POINTER && y != INVALID_POINTER)
final float xDiff = Math.abs(x - mInitialDisPatchDownX);
final float yDiff = Math.abs(y - mInitialDisPatchDownY);
if (xDiff > mTouchSlop && xDiff * 0.7f > yDiff)
//横向滚动不需要拦截
super.requestDisallowInterceptTouchEvent(true);
else
super.requestDisallowInterceptTouchEvent(false);

else
super.requestDisallowInterceptTouchEvent(false);


break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
if (ev.getAction() == MotionEvent.ACTION_UP || ev.getAction() == MotionEvent.ACTION_CANCEL)
hasRequestDisallowIntercept = false;

break;


return super.dispatchTouchEvent(ev);


private float getMotionEventY(MotionEvent ev, int activePointerId)
final int index = MotionEventCompat.findPointerIndex(ev, activePointerId);
if (index < 0)
return -1;

return MotionEventCompat.getY(ev, index);


private float getMotionEventX(MotionEvent ev, int activePointerId)
final int index = MotionEventCompat.findPointerIndex(ev, activePointerId);
if (index < 0)
return -1;

return MotionEventCompat.getX(ev, index);




案例二: ViewPager 与 RecyclerView



ViewPager



如上图, RecyclerView 中嵌套 ViewPager .



问题说明


当用户滑动 RecyclerView 后放开手指, RecyclerView 会继续滑动并处于 Fling 状态.


此时用户重新触摸屏幕, RecyclerView 滑动停止, 但是无法左右滑动 ViewPager , 只能上下滑动 RecyclerView .


问题原因



当用户重新触摸屏幕, 此时 RecyclerView 的 onInterceptTouchEvent() 方法还是返回了 true , 所以 ViewGroup 还是继续拦截了事件, 导致 ViewPager 无法处理.



解决思路



如果是 Fling 状态的 RecyclerView , 在处理 ACTION_DOWN 事件时, 应该与 IDLE 状态下保持一致.


Fling 状态下处理 ACTION_DOWN , onInterceptTouchEvent() 方法应该返回 false.


实现代码:


@Override
public boolean onInterceptTouchEvent(MotionEvent e)
//isScrolling 为 true 表示是 Fling 状态
boolean isScrolling = getScrollState() == SCROLL_STATE_SETTLING;
boolean ans = super.onInterceptTouchEvent(e);
if (ans && isScrolling && e.getAction() == MotionEvent.ACTION_DOWN)
//先调用 onTouchEvent() 使 RecyclerView 停下来
onTouchEvent(e);
//反射恢复 ScrollState
try
Field field = RecyclerView.class.getDeclaredField("mScrollState");
field.setAccessible(true);
field.setInt(this, SCROLL_STATE_IDLE);
catch (NoSuchFieldException e1)
e1.printStackTrace();
catch (IllegalAccessException e1)
e1.printStackTrace();

return false;

return ans;




案例三: ViewPager 与 ScrollView


在 ScrollView 嵌套 ViewPager , Fling 状态下会有跟 RecyclerView 一样的问题, 所以解决思路也是一样的, 只是代码部分有所不同.


@Override
public boolean onInterceptTouchEvent(MotionEvent ev)
boolean ans = super.onInterceptTouchEvent(ev);
if (ans && ev.getAction() == MotionEvent.ACTION_DOWN)
onTouchEvent(ev);
Field field = null;
try
field = NestedScrollView.class.getDeclaredField("mIsBeingDragged");
catch (NoSuchFieldException e)
e.printStackTrace();

if (field != null)
field.setAccessible(true);
try
field.setBoolean(this, false);
catch (IllegalAccessException e)
e.printStackTrace();


return false;

return ans;


  • ViewPager

  • 大小: 132.2 KB
  • ​​查看图片附件​​

Android 联合ViewPager 与 Fragment

1 Fragment与Viewpager适配器

1.1 FragmentPageAdapter

  • 用于实现Fragment的滑动效果,使用Fragment来填充ViewPager
  • 适用于页面比较少的情况,FragmentPagerAdapter消耗更多的内存
  • 它会把每一个Fragment保存在内存 中,不用每次切换的时候,去保存现场,切换回来在重新创建,所以用户体验比较好
  • 而对 于Fragment比较多的情况,需要切换的时候销毁以前的Fragment以释放内存,就可以使用 FragmentStatePagerAdapter

1.2 FragmentStatePagerAdapter

  • 用于实现Fragment的滑动效果, 使用Fragment来填充ViewPager
  • 适用于页面比较多的情况,FragmentStatePagerAdapter省内存

2 创建 FragmentPageAdapter 适配器

  • 重写获取页面的方法public Fragment getItem(int position) { return fragmentList.get(position); }
  • 重写获取长度的方法 public int getCount() { return fragmentList.size(); }
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    // 定义Fragment列表来存放Fragment
    private List<Fragment> fragmentList;

    // 1. 定义构造方法
    public MyFragmentPagerAdapter(@NonNull FragmentManager fm, List<Fragment> listFragment) {
        super(fm);
        this.fragmentList = listFragment;
    }

    public MyFragmentPagerAdapter(FragmentManager fm, int behavior) {
        super(fm, behavior);
    }


    @NonNull
    @Override
    // 2. 显示页面,为数组中的Fragment’
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    // 3. 获取页面的个数,几位列表的长度
    public int getCount() {
        return fragmentList.size();
    }
}

2.1 切换不同的Fragment

// 设置索引显示fragment,
private void showFragment(int position) {

    // viewPage中的适配器,按照索引进行显示
    viewPager.setCurrentItem(position);  // 设置当前显示的位置
}

2.2 ViewPager滑动监听


    // 设置页数改变后的响应, 允许公共访问
    public class MyPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        // 页面滑动的时候
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        // 页面选中时调用
        public void onPageSelected(int position) {

            if (position == 0) {
                // 第一个页面的时候, 改变底部状态
                tab_1.setBackgroundColor(Color.RED);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 1) {
                // 第二个页面的时候,改变底部状态
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.RED);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 2) {
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.RED);
            }

        }

        @Override
        // 页面滑动时,状态改变
        public void onPageScrollStateChanged(int state) {

        }
    }

3 UI部分代码

  • 设置UI类为监听器
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    // 定义控件
    private TextView tab_1, tab_2, tab_3;
    private ViewPager viewPager;  // 切换区
    private List<Fragment> fragmentList; // fragment数组
    private MyFragmentPagerAdapter myFragmentPagerAdapter;  // 适配器


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initUI();
        initTab();

    }

    // 初始化UI 获取控件,并设置监听器
    private void initUI() {

        tab_1 = findViewById(R.id.tab_1);
        tab_2 = findViewById(R.id.tab_2);
        tab_3 = findViewById(R.id.tab_3);
        tab_1.setOnClickListener(this);
        tab_2.setOnClickListener(this);
        tab_3.setOnClickListener(this);

        // 初始化切换区
        viewPager = findViewById(R.id.my_view_Pager);
    }

    // 显示Page以及其标签
    private void initTab() {
        // 1. 创建Page界面
        FragmentOne fragmentOne = new FragmentOne();
        FragmentTwo fragmentTwo = new FragmentTwo();
        FragmentThree fragmentThree = new FragmentThree();

        fragmentList = new ArrayList<>();

        // 添加到列表中
        fragmentList.add(fragmentOne);
        fragmentList.add(fragmentTwo);
        fragmentList.add(fragmentThree);

        // 3. 新建适配器
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),fragmentList);

        // 4. 设置适配器到viewPager
        viewPager.setAdapter(myFragmentPagerAdapter);

        // 5. 设置滑动监听
        viewPager.addOnPageChangeListener(new MyPageChangeListener());

        // 默认展示第一个界面
        showFragment(0);

    }

    // 设置索引显示fragment,
    private void showFragment(int position) {

        // viewPage中的适配器,按照索引进行显示
        viewPager.setCurrentItem(position);  // 设置当前显示的位置

        // 根据坐标设置底部按钮的颜色
        if (position == 0) {
            tab_1.setBackgroundColor(Color.RED);
            tab_2.setBackgroundColor(Color.WHITE);
            tab_3.setBackgroundColor(Color.WHITE);
        } else if (position == 1) {
            // 只有一个被选中,各个标签是冲突的
            tab_1.setBackgroundColor(Color.WHITE);
            tab_2.setBackgroundColor(Color.RED);
            tab_3.setBackgroundColor(Color.WHITE);

        } else if (position == 2) {
            tab_1.setBackgroundColor(Color.WHITE);
            tab_2.setBackgroundColor(Color.WHITE);
            tab_3.setBackgroundColor(Color.RED);
        }


    }

    @Override
    // 根据点击的View的ID 来改变下面标签的布局
    public void onClick(View v) {

        if (v.getId() == R.id.tab_1) {
            showFragment(0);
        } else if (v.getId() == R.id.tab_2) {
            showFragment(1);
        } else if (v.getId() == R.id.tab_3) {
            showFragment(2);
        }

    }


    // 设置页数改变后的响应, 允许公共访问
    public class MyPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        // 页面滑动的时候
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        // 页面选中时调用
        public void onPageSelected(int position) {

            if (position == 0) {
                // 第一个页面的时候, 改变底部状态
                tab_1.setBackgroundColor(Color.RED);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 1) {
                // 第二个页面的时候,改变底部状态
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.RED);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 2) {
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.RED);
            }

        }

        @Override
        // 页面滑动时,状态改变
        public void onPageScrollStateChanged(int state) {

        }
    }
}

在这里插入图片描述

以上是关于ViewPager 与SwipeRefreshLayout,RecyclerView,ScrollView滑动冲突解决方法的主要内容,如果未能解决你的问题,请参考以下文章

在viewpager中图片滑动展示时图片与文字对应不上?

Android 联合ViewPager 与 Fragment

当我将 viewpager 与 Indicator Android 一起使用时,将背景状态栏更改为背景 viewpager?

Android ViewPager与Fragment联动

Fragment与ViewPager

将 backstack 与 ViewPager 一起使用