滚动固定的 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 在 viewpager 上的透明覆盖视图。
解决方案:
实现您想要的效果的正确方法是使用 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 使用上述解决方案将模拟与您相同的事情想要使用固定视图寻呼机和滚动内容来实现。
我正在尝试使用嵌套滚动条在固定的 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 在 viewpager 上的透明覆盖视图。
解决方案:
实现您想要的效果的正确方法是使用 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 使用上述解决方案将模拟与您相同的事情想要使用固定视图寻呼机和滚动内容来实现。