Android - 如何添加视差效果,因为底页覆盖另一个视图

Question

使用BottomSheetBehavior来自谷歌的设计库,它看起来像默认行为是底片,以"盖"在同其他意见CoordinatorLayout,因为它扩大.我可以将类似FAB(或其他具有适当定义的视图CoordinatorLayout.Behavior)的东西锚定到工作表的顶部,并在工作表展开时将其向上滑动,这很好,但我想要的是将视图"折叠"为底部页面展开,显示出视差效果.

谷歌地图中的这种效果类似于我正在寻找的效果; 它以视差效果开始,然后切换回只有在达到某个滚动位置时底部"覆盖"地图:

我试过的一件事(虽然我从一开始就怀疑它不起作用),是在onSlide我的调用中以编程方式设置上部视图的高度BottomSheetBehavior.BottomSheetCallback.这有点成功,但运动并不像谷歌地图那样顺畅.

如果有人知道效果是如何完成的,我会非常感激!

Answer 1

经过一些实验/研究后,我从这篇文章中了解到 如何使用谷歌MapView制作具有视差滚动效果的自定义CoordinatorLayout.Behavior？我的问题的很大一部分不是理解视差效应,它可以翻译视图而不是缩小视图.一旦我意识到这一点,创建一个自定义行为,当底部页面扩展时将视差应用于我的主视图是微不足道的:

public class CollapseBehavior<V extends ViewGroup> extends CoordinatorLayout.Behavior<V>{


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

  @Override
  public boolean onDependentViewChanged(CoordinatorLayout parent, V child, View dependency) {
    if (isBottomSheet(dependency)) {
        BottomSheetBehavior behavior = ((BottomSheetBehavior) ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior());

        int peekHeight = behavior.getPeekHeight();
        // The default peek height is -1, which 
        // gets resolved to a 16:9 ratio with the parent
        final int actualPeek = peekHeight >= 0 ? peekHeight : (int) (((parent.getHeight() * 1.0) / (16.0)) * 9.0);
        if (dependency.getTop() >= actualPeek) {
            // Only perform translations when the 
            // view is between "hidden" and "collapsed" states
            final int dy = dependency.getTop() - parent.getHeight();
            ViewCompat.setTranslationY(child, dy/2);
            return true;
        }
    }

    return false;
  }

  private static boolean isBottomSheet(@NonNull View view) {
    final ViewGroup.LayoutParams lp = view.getLayoutParams();
    if (lp instanceof CoordinatorLayout.LayoutParams) {
        return ((CoordinatorLayout.LayoutParams) lp)
                .getBehavior() instanceof BottomSheetBehavior;
    }
    return false;
  }


}

然后在我的布局xml中,我设置了app:layout_behavior我的主视图,com.mypackage.CollapseBehavior并将其app:layout_anchor作为我的底部工作表视图,以便onDependentViewChanged回调将触发.这种效果比尝试调整视图要平滑得多.我怀疑回到我最初使用a的策略BottomSheetBehavior.BottomSheetCallback也会与此解决方案类似.

编辑:根据请求,相关的xml如下.我添加MapFragment到@+id/map_container在运行时,虽然这也应该与任何工作,你放到像静态图片的容器.在LocationListFragment同样可与任何视图或片段所取代,只要它仍然有BottomSheetBehavior

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fragment_coordinator">
        <FrameLayout
            android:id="@+id/map_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            app:layout_anchor="@+id/list_container"
            app:layout_behavior="com.mypackage.behavior.CollapseBehavior"/>

        <fragment
            android:name="com.mypackage.fragment.LocationListFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/list_container"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior"/>


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