2. 程式人生 > >AndroidUI系列--在DecorView層解決RecyclerView和ScrollView的滑動衝突

AndroidUI系列--在DecorView層解決RecyclerView和ScrollView的滑動衝突

阿新 • • 發佈：2019-02-19

滑動衝突，這個是作安卓的必經之坑。最開始的ListView和ScollView衝突，或者ListView巢狀ListView滑動衝突，再或者ListView和ViewPager的滑動衝突，再或者是GraidView等可滑動控制元件互相巢狀的衝突。解決方案呢，有很多。比如在onTouchEvent中攔截事件。又或者自定義ListView，修改onMesure測量，使它在測量時獲得最大的寬高，這樣可以讓它不滑動。全部展示，當然作為在android摸爬滾打了這麼久的程式猿，這些坑都應該踩過了，而且網上一大堆解決方案，不得不說，這就是開源的好處啊，想著谷歌巴巴把kotlin扶上位了，我們這些苦逼的程式猿，那就只有跟著大部隊走了。沒辦法呀~夾縫裡生存。

這裡寫圖片描述

View的繪製流程，Activity–phonewindow–decorview–contentview，如下圖

這裡寫圖片描述

我們平時在Activity的setContentView就是在ContentViews作文章。那麼我們的衝突就是在這裡，在ContentView裡設定了一個activity_main.xml,為什麼會有滑動衝突呢，那是因為recyclerview和scollview都設定在了activity_main.xml。那麼換個角度，如果把recyclerview加在contentviews和activity_main.xml佈局平級。那麼是不是就不存在滑動衝突了呢，想到就來試試。
首先自定義一個view，用來彈窗。

package com.example.administrator.bounceview;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by ShuWen on 2017/5/23.
 */
 


public class BounceView extends View {

    private int mArcMaxHeight;//彈窗最高距離
    private int mArcHeight;//記錄變換過程的距離
    private Paint mPaint;//畫筆
    private Path mPath = new Path();//繪製動畫弧度
    private BounceAnimatorListener animatorListener;//動畫開始的監聽回撥
    private Status status = Status.NONE;//記錄動畫的狀態


    public enum Status{
        //沒動，上升，下降
        NONE,STATUS_UP,STATUS_DOWN
    }

    public BounceView(Context context) {
        super(context);
        init();
    }


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

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

    //初始化
    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.WHITE);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);

        mArcMaxHeight = getResources().getDimensionPixelOffset(R.dimen.m_maxarcheight);

    }

    //上升的動畫
    public void show(){
        status = Status.STATUS_UP;
        if (animatorListener != null){
            this.postDelayed(new Runnable() {
                @Override
                public void run() {
                   animatorListener.showContent();
                }
            },600);
        }
        ValueAnimator animator = ValueAnimator.ofInt(0,mArcMaxHeight);
        animator.setDuration(700);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mArcHeight = (int) valueAnimator.getAnimatedValue();
                if (mArcHeight == mArcMaxHeight){
                    bounce();
                }
                invalidate();
            }
        });
        animator.start();
    }

    //下降的動畫
    private void bounce() {
        status = Status.STATUS_DOWN;
        ValueAnimator valueAnimator = ValueAnimator.ofInt(mArcMaxHeight,0);
        valueAnimator.setDuration(600);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mArcHeight = (int) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int currentY = 0;
        switch (status){
            case NONE:
                currentY = 0;
                break;
            case STATUS_UP:
                currentY = (int) (getHeight()*(1 - (float)(mArcHeight/mArcMaxHeight))+mArcMaxHeight);
                break;
            case STATUS_DOWN:
                currentY = mArcMaxHeight;
                break;
        }

        mPath.reset();
        mPath.moveTo(0,currentY);
        mPath.quadTo(getWidth()/2,currentY - mArcHeight,getWidth(),currentY);
        mPath.lineTo(getWidth(),getHeight());
        mPath.lineTo(0,getHeight());
        mPath.close();

        canvas.drawPath(mPath,mPaint);

    }

    public void setAnimatorListener(BounceAnimatorListener animatorListener){
        this.animatorListener = animatorListener;
    }

    public interface BounceAnimatorListener{
        void showContent();
    }
}

上升過程中，繪製動畫，使用ValueAnimator在回撥裡進行更新介面，呼叫invalidate()。中間使用到了二階貝塞爾曲線，關於貝塞爾其實很簡單的，在網上一搜，當然就有了。

那麼在建立一個類，用來載入BounceVeiw。

package com.example.administrator.bounceview;

import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.widget.FrameLayout;

/**
 * Created by ShuWen on 2017/5/23.
 */

public class BounceMenu {
    private RecyclerView recyclerView;
    private BounceView bounceView;
    private ViewGroup parentVG;
    private View rootView;

    private BounceMenu(View view, int resId, final MyAdapter myAdapter) {
        parentVG = findParentVG(view);

        rootView = LayoutInflater.from(view.getContext()).inflate(resId,null,false);
        recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerview);
        bounceView = (BounceView) rootView.findViewById(R.id.bounceview);

        recyclerView.setLayoutManager(new LinearLayoutManager(view.getContext()));
        bounceView.setAnimatorListener(new BounceView.BounceAnimatorListener() {
            @Override
            public void showContent() {
                recyclerView.setVisibility(View.VISIBLE);
                recyclerView.setAdapter(myAdapter);
                recyclerView.scheduleLayoutAnimation();
            }
        });
    }

    public static BounceMenu makeBounce(View view, int resId, final MyAdapter myAdapter){
        return new BounceMenu(view, resId, myAdapter);
    }

    public void show(){
        if (rootView != null){
            parentVG.removeView(rootView);
        }
        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        parentVG.addView(rootView,layoutParams);
        bounceView.show();
    }

    private ViewGroup findParentVG(View view) {
        do {
            if (view instanceof FrameLayout){
                //找到decorview的根佈局
                if (view.getId() == android.R.id.content){
                    return (ViewGroup) view;
                }
            }

            if (view != null){
                ViewParent viewParent = view.getParent();
                view = viewParent instanceof View? (View) viewParent :null;
            }
        }while (view!= null);
        return null;
    }
}

在這裡面，傳入需要新增recylerview的跟佈局，通過這個根佈局獲得decorview的contentviews這個佈局，然後在這個佈局上新增recyclerview。這樣就是與activity_main同級，不會有滑動衝突。在bounceview的監聽裡，新增recyclerview的動畫。
那麼再來看看MianAcicity的程式碼：

package com.example.administrator.bounceview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

    private MyAdapter myAdapter;
    private List<String> stringList;

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

        stringList = new ArrayList<>();

        for (int i = 0; i < 20; i++) {
            stringList.add("阿西吧"+i);
        }

        myAdapter = new MyAdapter(this,stringList) {
            @Override
            protected int ItemLayoutId() {
                return R.layout.item;
            }

            @Override
            protected void onBindHolder(MyViewHolder myViewHolder, int position) {
                TextView textView = myViewHolder.getTextView(R.id.text);
                textView.setText(stringList.get(position));
            }

        };

    }

    public void click(View view){
        BounceMenu bounceMenu = BounceMenu.makeBounce(findViewById(R.id.activity_main),R.layout.bounce_view_layout,myAdapter);
        bounceMenu.show();
    }
}

呼叫就是相當的簡單了。同時還有炫酷的動畫，何樂而不為呢。接下來所有程式碼都貼出來。
activity_main的xml佈局。使用ScrollView，展示主要資料。在每一項的點選事件，觸發彈窗，recyclerview。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.bounceview.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#465">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:textSize="20sp"
                android:onClick="click"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:textSize="20sp"
                android:onClick="click"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:onClick="click"
                android:textSize="20sp"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:textSize="20sp"
                android:onClick="click"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:textSize="20sp"
                android:onClick="click"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:textSize="20sp"
                android:onClick="click"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:textSize="20sp"
                android:onClick="click"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View> <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:textSize="20sp"
            android:onClick="click"
            android:text="你滑動啊"
            />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="center"
                android:textSize="20sp"
                android:onClick="click"
                android:text="你滑動啊"
                />
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#fff">
            </View>

        </LinearLayout>
    </ScrollView>

</RelativeLayout>

那麼再看看彈窗的xml。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="290dp"
        android:layout_gravity="bottom">

        <com.example.administrator.bounceview.BounceView
            android:id="@+id/bounceview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipChildren="false"
            android:overScrollMode="never"
            android:layout_alignParentBottom="true"
            android:layoutAnimation="@anim/bounce_layout"
            android:layout_marginTop="70dp">

        </android.support.v7.widget.RecyclerView>
    </RelativeLayout>

</FrameLayout>

這裡就是彈窗了，recyclerview和scrollview同級，不會產生滑動衝突。
這個是解決滑動衝突的一個可行方案，相當不錯。如果覺得動畫不必要，直接去掉動畫，只需要BounceMenu中的一些邏輯就ok了。我會把程式碼放在git上，有興趣的朋友可以自己研究研究。

效果圖：

相關推薦

AndroidUI系列--在DecorView層解決RecyclerView和ScrollView的滑動衝突

滑動衝突，這個是作安卓的必經之坑。最開始的ListView和ScollView衝突，或者ListView巢狀ListView滑動衝突，再或者ListView和ViewPager的滑動衝突，再或者是GraidView等可滑動控制元件互相巢狀的衝突。解決方案呢，有很

解決SwipeRefreshLayout與ScrollView滑動衝突

在頁面為了相容小螢幕裝置我們需要巢狀一個ScrollView來讓我們的佈局可以滑動，此時恰好外層使用了SwipeRefreshLayout那滑動衝突就來了，下面給出解決辦法 1.方法一：使用NestedScrollView替換ScrollView <android.

完美解決EditText和ScrollView的滾動沖突（上）

width ontouch 完美解決 his 滾動 on() ack can @+ 在網上搜了一下EditText和ScrollView的滾動沖突，發現差點兒全部的解決方式都是觸摸EditText的時候就將事件交由EditText處理，否則才將事件交由S

Android在RecyclerView中巢狀ScrollView，解決兩者間的滑動衝突

在RecyclerView中的item中巢狀一些佈局如TextView,在這種情況下如TextView的字數很多超過所設定的佈局大小。 這樣就需要在item中加一個ScrollView可以用於使用者的滑動。 1.RecyclerView的item佈局如： <?xml

解決recyclerview 在 scrollview 中不能全部顯示，高度不正常的問題

解決辦法就是在RelativeLayout加： android:descendantFocusability="blocksDescendants"   如下： <RelativeLayout android:layout_width="match_paren

Android 6.0 解決recyclerview 在 scrollview 中不能全部顯示，高度不正常的問題

解決辦法：在 recyclerview 外面再包一層 RelativeLayout <RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android

完美解決EditText和ScrollView的滾動衝突（上）

在網上搜了一下EditText和ScrollView的滾動衝突，發現幾乎所有的解決方案都是觸控EditText的時候就將事件交由EditText處理，否則才將事件交由ScrollView處理。這樣確實初步解決了兩者之間的滾動衝突，但並不是最好的解決方案。比如，E

解決SwipeRefreshLayout和ScrollView中巢狀ViewPager卡頓問題

autoCycleViewPager.setOnTouchListener(this); int downX; int downY; int dragthreshold = 30; @Overrid

Android 中listview 和scrollview 滾動衝突事件的解決方法

如果一個佈局中同事引用到了listview 和scrollview 兩種滾動控制元件，那麼listview 的滾動效果將被遮蔽掉，那麼此時應加上dispatchTouchEvent（）方法，然後選擇先執行滾動的控制元件加上次方法。 程式碼展示如下： package co

listview和scrollview滑動事件衝動問題

public class CNCaseRelationListview extends ListView { private CNCaseRelationAdapter relationAdapter; private String anclsssql = ""; pri

Android關於CoordinatorLayout和ListView滑動衝突的解決(上滑ToolBar隱藏，下滑出現)

最近專案中使用到了CoordinatorLayout這種佈局方式,搭配RecycleView,實現起來比較簡單,而且不用自己處理滑動事件,但是改為了ListView後發生了滑動衝突. 所以想到了以下解決方案: 1.使用事件分發,當ListView在Y軸滑動時,將事件交給C

解決NestedScrollView 巢狀 RecyclerView出現的滑動衝突問題

NestedScrollView巢狀RecyclerView的xml程式碼： <android.support.v4.widget.NestedScrollView android:layout_width="match_parent"

解決jquery和其他庫衝突

方法一：jQuery.noConflict();//將變數$的控制權移交出來方法二：可以自定義一個快捷方式——var $j = jQuery.noConflict()。下面可以用$j進行dom操作。方法三：jQuery.noConflict();//將變數$的控制權移交出來 

全網唯一有用的解決方案！徹底解決VerticalViewPager巢狀RecyclerView引起的滑動衝突！

首先承認標題的確很裝13,但是這樣做是為了引起大家注意，真正去解決大家的問題。因為這個問題無論我百度或者Google，都沒有找到可行的解決方案。 本人用的VerticalViewPager是GitHub上的castorflex/VerticalViewPager。 我在用

Android：SwipeRefreshLayout和ViewPager滑動衝突的原因和正確的解決方式

BUG修復 2016.01.21 用幾部真機測試，發現有些手機，手指沒有滑動，move也一直執行。這回導致我們的判斷出現一些問題。現在已經修復，加入了TouchSlop判斷。 2017.6.16 修改文章中的一些錯誤 一、前言 急著解決問題的直接看博

問題篇-解決shiro和quartz 版本衝突問題

1.前言 專案裡需要對過期的 shiro session 進行清理，shiro 自帶了 shiro-quartz 模組可以勝任這項工作。但版本很低，如果我們專案裡要用定時任務，複雜一些的我們肯定會用quartz，因此會出現jar包的版本衝突。 參考文件：ht

解決shiro和quartz2 版本衝突問題

package org.apache.shiro.session.mgt.quartz;/*** Created by koko on 2016/7/20.*/import org.apache.shiro.session.mgt.DefaultSessionManager;import org.apache

android-Ultra-Pull-To-Refresh/SwipeRefreshLayout巢狀ViewPager/ScrollView滑動衝突解決

前戲 　　每次必不可少的前戲又來了。發文時Android-PullToRefresh這個框架已經停止維護3年了，很多人在關心我們現在用什麼框架好，這裡給大家推薦兩個。一個是可愛可親起可恨的Google官方v4包自帶的SwipeRefreshLa

SwipeRefreshLayout和ViewPager滑動衝突的原因和正確的解決方式

出處http://blog.csdn.net/u010386612 問題： 1. SwipeRefreshLayout會吃掉ViewPager的滑動事件。 2. SwipeRefreshLayout需要套在ScrollView和ListView上的時候才表現的比較友好

maven dependency scop 解決maven和tomcat包衝突

今天遇到點問題， maven引用的包 servlet-api.jar  jsp-api.jar，我在除錯的時候釋出到了專案的lib目錄，但是tomcat中包含著兩個包，所以出現了包衝突。 HTTP Status 500 - Unable to compile class f