Question

我正在尝试使用嵌套滚动条滚动固定的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>

这些是我拍摄的截图，

Answer 1

您的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>

Answer 2

问题：

如上面的答案中所述，您在视图寻呼机之后使用了一个nestedscrollview，其中parent作为coordinatorlayout，它将nestedscrollview堆叠在视图寻呼机上而不是线性对齐（因为它不是线性布局）。现在，为嵌套的滚动顶部提供填充顶部并使嵌套的滚动视图下的视图寻呼机可见，将不允许您与它进行交互，因为触摸交互仍然是在viewpager上的嵌套网页滚动视图的透明叠加视图。

解决方案：

通过使用CollapsingToolbarLayout实现您想要的正确方法。

1. 在appBarLayout中创建一个CollapsingToolbarlayout，包装具有折叠工具栏布局的工具栏（即移动工具栏内的折叠工具栏布局）。

2.定义视图寻呼机所需的固定高度作为高度 appbar布局。

3.将内容稀松布颜色作为工具栏所需的颜色折叠工具栏折叠而不是为背景颜色工具栏。

4. 移动包含ViewPager和TabLayout的相对布局工具栏上方的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>

或者你可以将root作为LinearLayout而不是coordinatorlayout。

虽然这是实现类似于你要求的东西的唯一两种正确方法，但是如果你要求将寻呼机固定在后面而不是折叠，那么你将无法与它进行交互。在您的情况下修复视图寻呼机并在其上滚动内容没有任何意义，因为无论如何您将滚动整个布局遮挡/隐藏视图寻呼机。所以使用上述解决方案将模拟您想要实现的相同的事情使用固定视图寻呼机和过度滚动内容。

滚动固定的viewpager

2 个答案: