谷歌地图底部有 ViewPager，ViewPager 片段项目可全屏滚动答案

【问题标题】：GoogleMap with ViewPager at bottom, ViewPagerFragment item scrollable in fullscreen谷歌地图底部有 ViewPager，ViewPager 片段项目可全屏滚动
【发布时间】：2016-07-28 13:00:02
【问题描述】：

我正在尝试用全屏布局实现GoogleMap 和底部的ViewPager 之类的功能。

现在ViewPager 最初将位于底部，如果内容高度较大，用户可以垂直滚动它。用户应该能够全屏滚动（根据下面的演示图像，从下到上直到 ViewPager 的页面项目高度）。

目前，我可以在 ViewPager 的片段（布局代码如下）内的 ScrollView（match_parnt 高度及其 paddingTop 为 380dp）的帮助下实现相同的 UI 效果。

现在我面临的问题是GoogleMap 由于ViewPager Fragment 的match_parent 高度而没有响应任何触摸/点击事件。

我的预期结果是GoogleMap 必须能够监听触摸/点击事件，并且 ViewPager 的 Fragment 必须能够在地图上从下到上垂直滚动。

我在搜索过程中发现我们可以使用requestDisallowInterceptTouchEvent 让子视图来监听这些触摸/点击事件。但在我的情况下，片段内的 ViewPager 和 ScrollView 正在处理所有触摸/点击事件。

一段代码，

activity.xml

<FrameLayout
    ...
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <fragment 
        ...
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <android.support.v7.widget.Toolbar
            ...
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            ... />

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
</FrameLayout>

viewpager_fragment_item.xml

<ScrollView
    ...
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    ... >

    <LinearLayout
        ...
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingTop="380dp" >

    <!-- 
            child views in here.
        -->
    </LinearLayout>
</ScrollView>

预期的输出演示

在此演示中，用户可以触摸、放大/缩小Map，可以滑动ViewPager 并全屏滚动ViewPager 的Fragemt。所以，这就是我想要实现的目标。

如果有人提供有用的链接或一些演示，我将不胜感激。

请帮忙！

谢谢。

【问题讨论】：

标签： android

【解决方案1】：

好的，使用BottomSheet layout 解决了

让我给你看我的一段布局代码，让你完全理解它。

<android.support.design.widget.CoordinatorLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ... >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <fragment xmlns:map="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            .... />

       <!-- Other layout component code like Toolbar-->

    </RelativeLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <android.support.v4.view.ViewPager
            ...
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ... />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

并且在您的 java 文件中，您需要将窥视高度设置为底页布局。

    View bottomSheet = findViewById(R.id.bottomSheet);
    mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
    mBottomSheetBehavior.setPeekHeight(300);
    mBottomSheetBehavior.setHideable(false);
    mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_DRAGGING);

我做了一个demo，你可以找到here.

【讨论】：