AndroidUI系列--在DecorView层解决RecyclerView和ScrollView的滑动冲突

滑动冲突，这个是作安卓的必经之坑。最开始的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上，有兴趣的朋友可以自己研究研究。

git地址：https://github.com/SingleShu/BounceView

效果图：