向上滾動viewpager時折疊標題視圖

Question

我試圖在向上滾動視圖分頁器時折疊標題視圖。 在下面的圖像中，relativelayout3是我要折疊的布局。

Play商店預覽圖片在應用頁面中會崩潰。

我嘗試搜索和relativelayout3中的以下行，但是沒有用

app:layout_scrollFlags="scroll|enterAlways"

這是我完整的xml，

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/relativeLayout3"
                app:layout_scrollFlags="scroll|enterAlways"
                >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:id="@+id/toolbar"
        android:background="@color/cornflower_blue_two"
        android:elevation="5dp">

        <ImageButton
            android:id="@+id/more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="10dp"
            android:background="@null"
            android:src="@drawable/ic_dots_vertical" />

        <ImageButton
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="5dp"
            android:layout_marginStart="10dp"
            android:background="@null"
            android:src="@drawable/ic_arrow_left" />

    </RelativeLayout>
    <ss.com.bannerslider.views.BannerSlider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/blue"
        android:layout_below="@id/toolbar"
        />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/relativeLayout3">

                <TextView
                    android:id="@+id/product"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:text="Blah Blah"
                    android:textColor="@color/dark_gray"
                    android:textSize="25sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/brand"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignStart="@+id/product"
                    android:layout_below="@+id/product"
                    android:text="Blah inc."
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/ratings"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignBaseline="@+id/brand"
                    android:layout_alignBottom="@+id/brand"
                    android:layout_marginStart="10dp"
                    android:layout_toEndOf="@+id/brand"
                    android:background="@color/ratings"
                    android:paddingEnd="10dp"
                    android:paddingStart="10dp"
                    android:text="4.7"
                    android:textColor="@color/white"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <android.support.design.widget.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/brand"
                    android:layout_marginTop="14dp"
                    app:tabGravity="fill"
                    app:tabMode="fixed" />

                <android.support.v4.view.ViewPager
                    android:id="@+id/pager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/tabLayout" />

            </RelativeLayout>
        </RelativeLayout>
    </ScrollView>

</RelativeLayout>

Answer 1

考慮使用CollapsingToolbarLayout 。 請參閱折疊工具欄示例。

Answer 2

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/cartoon"
            android:scaleType="centerCrop"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#ffe5e5"
       app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
         android:paddingTop="10dp">
         <include layout="@layout/card_layout" />
         <include layout="@layout/card_layout" />
         <include layout="@layout/card_layout" />
      </LinearLayout>

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

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

輸出量

更多參考