滚动固定的 viewpager

Scroll over fixed viewpager

我正在尝试使用嵌套滚动条在固定的 viewpager 上滚动。问题是我可以在固定的 viewpager 上滚动内容,但我无法滑动 viewpager 来更改产品图像。我曾为此尝试过 CollapsingToolbar,但没有成功。所以我开发了另一种布局,它可以满足我的要求,但问题是它不适用于 viewpager。 这是我当前的布局

<?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="org.kiranahouse.activity.SingleProductActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:collapseIcon="@drawable/back_colored"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <android.support.v4.view.ViewPager
            android:id="@+id/product_image_pager"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="60dp">
        </android.support.v4.view.ViewPager>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="24dp"
            android:layout_below="@+id/product_image_pager">
            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="24dp"
                android:id="@+id/pager_tab_layout"
                app:tabBackground="@drawable/tab_selector"
                app:tabIndicatorHeight="0dp"
                app:tabGravity="center">
            </android.support.design.widget.TabLayout>
        </LinearLayout>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nestedScroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            android:elevation="12dp"
            android:layout_marginBottom="56dp">
            <LinearLayout
                android:paddingTop="250dp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:background="#fafafa">
                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">
                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:padding="16dp">
                                <org.kiranahouse.component.CustomTextView
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:text="Product Name"
                                    android:textColor="@color/normalButtonGradientEnd"
                                    android:ellipsize="end"
                                    android:textAppearance="?android:attr/textAppearanceMedium"
                                    android:id="@+id/product_title"/>
                                <RelativeLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_below="@+id/product_title"
                                    android:layout_marginTop="8dp">
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:ellipsize="end"
                                        android:layout_alignParentLeft="true"
                                        android:text="Rs. 1024"
                                        android:id="@+id/actual_price"
                                        android:textAppearance="?android:attr/textAppearanceLarge"
                                        android:textColor="@color/primaryTextColor"
                                        android:layout_centerVertical="true"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_toRightOf="@+id/actual_price"
                                        android:layout_marginLeft="16dp"
                                        android:text="Rs. 2999"
                                        android:id="@+id/old_price"
                                        android:layout_centerVertical="true"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="28 % Off"
                                        android:layout_alignParentRight="true"
                                        android:background="@drawable/discount_single_product"
                                        android:paddingTop="4dp"
                                        android:paddingBottom="2dp"
                                        android:paddingLeft="8dp"
                                        android:paddingRight="8dp"
                                        android:id="@+id/discount_percentage"
                                        android:layout_centerVertical="true"/>

                                </RelativeLayout>
                            </RelativeLayout>
                            <View
                                android:layout_width="match_parent"
                                android:layout_height="1dp"
                                android:background="@color/customDividerColor"/>
                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">
                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:orientation="horizontal"
                                    android:gravity="center"
                                    android:layout_weight="1"
                                    android:paddingTop="8dp"
                                    android:paddingBottom="8dp">
                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:scaleX="-1"
                                        android:layout_gravity="center_vertical"
                                        android:src="@drawable/ic_reply"
                                        android:tint="@color/dividerColor"
                                        android:layout_marginRight="4dp"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Share"
                                        android:textAppearance="?android:attr/textAppearanceSmall"/>
                                </LinearLayout>
                                <View
                                    android:layout_width="1sp"
                                    android:layout_height="match_parent"
                                    android:background="@color/customDividerColor"/>
                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:orientation="horizontal"
                                    android:gravity="center"
                                    android:layout_weight="1"
                                    android:paddingTop="8dp"
                                    android:paddingBottom="8dp">
                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:scaleX="-1"
                                        android:layout_gravity="center_vertical"
                                        android:src="@drawable/ic_favorite"
                                        android:tint="@color/dividerColor"
                                        android:layout_marginRight="4dp"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Wishlist"
                                        android:textAppearance="?android:attr/textAppearanceSmall"/>
                                </LinearLayout>
                            </LinearLayout>
                        </LinearLayout>

                    </android.support.v7.widget.CardView>

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:padding="16dp"
                            android:orientation="vertical">
                            <org.kiranahouse.component.CustomTextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Unit"
                                android:textColor="@color/secondaryTextColor"/>
                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="8dp">

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

                    </android.support.v7.widget.CardView>
                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical"
                            android:padding="16dp">
                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="600dp">

                            </android.support.v7.widget.RecyclerView>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                </LinearLayout>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
        <org.kiranahouse.component.CustomButton
            android:layout_width="match_parent"
            android:layout_height="48dp"
            app:radius="0"
            app:startColor="@color/normalButtonGradientStart"
            app:endColor="@color/normalButtonGradientEnd"
            android:text="Add to Cart"
            android:gravity="center"
            android:elevation="20dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

这些是我截取的屏幕截图,

您的 ViewPager 没有工作,因为它在包含 NestedScrollView 的 RelativeLayout 后面没有接收到任何触摸事件。所以更好的选择是重新设计布局。就像在 FrameLayout 中添加 RelativeLayouts 并设置裁剪参数一样。检查下面给出的代码。我检查了它,它按预期工作。

<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="org.kiranahouse.activity.SingleProductActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:collapseIcon="@drawable/back_colored"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/product_image_pager"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="60dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="24dp"
            android:layout_below="@+id/product_image_pager">

            <android.support.design.widget.TabLayout
                android:id="@+id/pager_tab_layout"
                android:layout_width="match_parent"
                android:layout_height="24dp"
                app:tabBackground="@drawable/tab_selector"
                app:tabGravity="center"
                app:tabIndicatorHeight="0dp" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="250dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nestedScroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="56dp"
            android:elevation="12dp"
            android:scrollbars="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#fafafa"
                    android:orientation="vertical">

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:padding="16dp">

                                <org.kiranahouse.component.CustomTextView
                                    android:id="@+id/product_title"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:ellipsize="end"
                                    android:text="Product Name"
                                    android:textAppearance="?android:attr/textAppearanceMedium"
                                    android:textColor="@color/normalButtonGradientEnd" />

                                <RelativeLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_below="@+id/product_title"
                                    android:layout_marginTop="8dp">

                                    <org.kiranahouse.component.CustomTextView
                                        android:id="@+id/actual_price"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_alignParentLeft="true"
                                        android:layout_centerVertical="true"
                                        android:ellipsize="end"
                                        android:text="Rs. 1024"
                                        android:textAppearance="?android:attr/textAppearanceLarge"
                                        android:textColor="@color/primaryTextColor" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:id="@+id/old_price"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_centerVertical="true"
                                        android:layout_marginLeft="16dp"
                                        android:layout_toRightOf="@+id/actual_price"
                                        android:text="Rs. 2999" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:id="@+id/discount_percentage"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_alignParentRight="true"
                                        android:layout_centerVertical="true"
                                        android:background="@drawable/discount_single_product"
                                        android:paddingBottom="2dp"
                                        android:paddingLeft="8dp"
                                        android:paddingRight="8dp"
                                        android:paddingTop="4dp"
                                        android:text="28 % Off" />

                                </RelativeLayout>
                            </RelativeLayout>

                            <View
                                android:layout_width="match_parent"
                                android:layout_height="1dp"
                                android:background="@color/customDividerColor" />

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="1"
                                    android:gravity="center"
                                    android:orientation="horizontal"
                                    android:paddingBottom="8dp"
                                    android:paddingTop="8dp">

                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_gravity="center_vertical"
                                        android:layout_marginRight="4dp"
                                        android:scaleX="-1"
                                        android:src="@drawable/ic_reply"
                                        android:tint="@color/dividerColor" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Share"
                                        android:textAppearance="?android:attr/textAppearanceSmall" />
                                </LinearLayout>

                                <View
                                    android:layout_width="1sp"
                                    android:layout_height="match_parent"
                                    android:background="@color/customDividerColor" />

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="1"
                                    android:gravity="center"
                                    android:orientation="horizontal"
                                    android:paddingBottom="8dp"
                                    android:paddingTop="8dp">

                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_gravity="center_vertical"
                                        android:layout_marginRight="4dp"
                                        android:scaleX="-1"
                                        android:src="@drawable/ic_favorite"
                                        android:tint="@color/dividerColor" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Wishlist"
                                        android:textAppearance="?android:attr/textAppearanceSmall" />
                                </LinearLayout>
                            </LinearLayout>
                        </LinearLayout>

                    </android.support.v7.widget.CardView>

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical"
                            android:padding="16dp">

                            <org.kiranahouse.component.CustomTextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Unit"
                                android:textColor="@color/secondaryTextColor" />

                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="8dp">

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

                    </android.support.v7.widget.CardView>

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical"
                            android:padding="16dp">

                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="600dp">

                            </android.support.v7.widget.RecyclerView>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                </LinearLayout>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>

        <org.kiranahouse.component.CustomButton
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentBottom="true"
            android:elevation="20dp"
            android:gravity="center"
            android:text="Add to Cart"
            android:textAppearance="?android:attr/textAppearanceMedium"
            app:endColor="@color/normalButtonGradientEnd"
            app:radius="0"
            app:startColor="@color/normalButtonGradientStart" />
    </RelativeLayout>

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

问题:

如上述答案所述,您在视图寻呼机之后使用了 nestedscrollview,父级作为协调器布局,这会将 nestedscrollview 堆叠在视图寻呼机上,而不是线性对齐(因为它不是线性布局)。现在,为 nestedscrollview 内容提供填充顶部并使 nestedscrollview 下的视图分页器可见将不允许您与其进行交互,因为触摸交互仍然与 nestedscrollview 在 vi​​ewpager 上的透明覆盖视图。

解决方案:

实现您想要的效果的正确方法是使用 CollapsingToolbarLayout。

1.在appBarLayout里面创建一个CollapsingToolbarlayout,把 具有折叠工具栏布局的工具栏(即将工具栏移动到 折叠工具栏布局)。

2.Define你想要的视图寻呼机的固定高度 应用栏布局。

3.Give 内容稀松布颜色作为你想要的工具栏颜色 折叠工具栏折叠而不是给背景颜色 工具栏。

4.移动里面包含ViewPager和TabLayout的RelativeLayout 工具栏上方的 CollapsingToolbarLayout

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:elevation="0dp"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        app:contentScrim="#FAFAFA"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <android.support.v4.view.ViewPager
                android:id="@+id/product_image_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </android.support.v4.view.ViewPager>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="24dp"
                android:layout_below="@+id/product_image_pager">
                <android.support.design.widget.TabLayout
                    android:layout_width="match_parent"
                    android:layout_height="24dp"
                    android:id="@+id/pager_tab_layout"
                    app:tabIndicatorHeight="0dp"
                    app:tabGravity="center">
                </android.support.design.widget.TabLayout>
            </LinearLayout>
        </RelativeLayout>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:theme="@style/MyActionBarTheme"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_collapseMode="pin">
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

或者,您可以将根作为 LinearLayout 而不是 coordinatorlayout。

虽然这是实现与您要求的类似的唯一两种正确方法,但是如果您要求将视图寻呼机固定在后面而不是折叠起来,那么您将无法与之交互.在您的情况下,修复视图寻呼机并在其上滚动内容没有任何意义,因为无论如何您将滚动整个布局 obscuring/hiding 视图 pager.So 使用上述解决方案将模拟与您相同的事情想要使用固定视图寻呼机和滚动内容来实现。