如何为Google MapView制作具有视差滚动效果的自定义CoordinatorLayout.Behavior? [英] How to make custom CoordinatorLayout.Behavior with parallax scrolling effect for google MapView?

问题描述

我尝试使用CoordinatorLayour为Google MapView和RecycleView产生视差滚动效果.

I try to make a parallax scrolling effect for google MapView and RecycleView using CoordinatorLayour.

因此，我根据网上的一些教程编写了以下代码.

so base on some tutorials found on web I made below code.

布局:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.google.android.gms.maps.MapView android:id="@+id/map_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_behavior="net.lunavulpo.coordinatorlayouttest.MapViewBehavior"
        />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_marginTop="200dp"
        android:layout_height="match_parent"/>

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

，然后我实现了CoordinatorLayout.Behavior:

    public class MapViewBehavior extends CoordinatorLayout.Behavior<MapView> {

        public MapViewBehavior(Context context, AttributeSet attrs) {
        }

        @Override
        public boolean layoutDependsOn(CoordinatorLayout parent, MapView child, View dependency) {
            return true;
        }

        @Override
        public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, MapView child, View directTargetChild, View target, int nestedScrollAxes) {
            return true;
        }

        @Override
        public void onNestedScroll(CoordinatorLayout coordinatorLayout, MapView child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {

            //child.setTranslationY(child.getTranslationY() - dyConsumed);
            child.setBottom(child.getBottom() - dyConsumed);
//what should I make here?

        }


    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, MapView child, View target, float velocityX, float velocityY, boolean consumed) {
//what should be here?
        return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
    }

    @Override
    public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, MapView child, View target, float velocityX, float velocityY) {

//what should be here?
return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);
    }
    }

如何正确实现视差滚动效果? 也许有一个随时可以使用行为的库? 还是我错过了什么，有没有最简单的方法?

How to correct implement the parallax scrolling effect? Maybe there is a library with ready to use Behaviors? or I miss something and there is a simplest way?

我根本不想使用工具栏.

推荐答案

更新:

我将向您概述如何执行此操作(我无法发布所有答案，因为我将其发布在另一个问题中，该问题比问题更多，我的旧答案被标记为重复...)您如何操作:

Update:

I'm going to give you an overview how to do it (I can't post all the answer because I posted it in another question with MORE requeriments than question and my old answer got marked as duplicated...)any way this is how you do it:

用于自定义CoordinatorLayout :
由于您无法扩展BottomSheetBehavior，因此您有2个选择:尝试执行自己的行为或像我一样，只需复制粘贴原始BottomSheetBehavior中的代码并将其修改为另一种状态(当Google Maps打开底部表单时，它会停在中间在屏幕上，这就是我正在谈论的状态).
此处CustomBottomSheet我上面讲的行为

For custom CoordinatorLayout:
Because you can't extend BottomSheetBehavior, you have 2 options: trying doing your own Behavior or like I did, just copy paste the code from original BottomSheetBehavior and modifying it to get another state (when google maps open a bottomsheet it stop in the middle of the screen, this is the state that I'm talking about).
here the CustomBottomSheet with the behavior I was talking above

现在可用于图像视差效果:
我尝试了XML中的所有默认视差效果，避免了自定义行为，但最后我结束了一个操作，这并不困难，您需要重写以下2种方法:

Now for Image parallax effect:
I tried all default parallax effect in XML avoiding a Custom behavior but in the end I ended doing one, its not hard, you need to override 2 methods like this:

public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    return dependency instanceof NestedScrollView;
}

public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
                                      View dependency) {

    if (mYmultiplier == 0) {
        initValues(child, dependency);
        return true;
    }

    float dVerticalScroll = dependency.getY() - mPreviousY;
    mPreviousY = dependency.getY();

    //going up
    if (dVerticalScroll <= 0 && child.getY() <= 0) {
        child.setY(0);
        return true;
    }

    //going down
    if (dVerticalScroll >= 0 && dependency.getY() <= mImageHeight)
        return false;

    child.setY( (int)(child.getY() + (dVerticalScroll * mYmultiplier) ) );

    return true;
}

在此链接成像视差行为

Here the link to image parallax behavior

这是它的样子:
[]

到项目的链接 我必须澄清一下，上一个链接具有FAB和工具栏动画，但是如果您只希望底部和图像行为，请忽略其他Java文件(澄清是因为我必须适应问题")

A link to the project I must clarify that the previous link has FAB and toolbars animations but if you only want bottom and image behavior just ignore the others java files (clarifying because I have to "adjust to the question")

这篇关于如何为Google MapView制作具有视差滚动效果的自定义CoordinatorLayout.Behavior?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！