Android 两层重叠滚动布局类似 Airbnb 房间细节布局

Question

我想要像 Airbnb 房间细节布局那样的两层重叠滚动布局

类似 Airbnb 的重叠滚动:

但是我的 XML 布局文件输出以下结果:

这是我的布局代码:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <ImageView
        android:id="@+id/backdrop"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:fitsSystemWindows="true"
        android:scaleType="centerCrop"
        android:src="@drawable/height_360_2" />

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

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="always">

        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            app:cardElevation="8dp"
            app:contentPadding="16dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="8dp"
                android:text="@string/person_intro" />

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

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

Answer 1

由于我的评论帮助解决了:

These two seem quite similar to me. Difference that I see is that yours goes all the way to the top, ey? Try adding marginTop="50dp" and seeing if it changes anything.

添加一个正确的 marginTop 修复它:

<android.support.v7.widget.CardView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_marginTop="150dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" 
app:cardElevation="8dp"
app:contentPadding="16dp">