Question

我有以下布局

<CoordinatorLayout>

    <CardView>
        <LinearLayout>
            <ImageView />
            <View />
        </LinearLayout>
    </CardView>

    <RecyclerView />

</CoordinatorLayout>

我只想在每次向下滚动RecyclerView时隐藏带有视差动画的ImageView，并在每次向上滚动RecyclerView时显示ImageView。我知道使用CoordinatorLayout可以实现这种行为。

Answer 1

对于视差效果，您需要使用 AppBarLayout 和 CollapsingToolbarLayout 。您可以尝试使用属性

添加 ImageView

app:layout_collapseMode="parallax"

在工具栏

上方的CollapsingToolbarLayout内部

CoordinatorLayout的详细代码

<android.support.design.widget.CoordinatorLayout

android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:statusBarBackground="@color/colorPrimaryDark"
android:fitsSystemWindows="true"
tools:context="com.example.android">

<android.support.design.widget.AppBarLayout android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:fitsSystemWindows="true"
    android:elevation="4dp"
    >
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleEnabled="false"
        android:background="@color/colorPrimaryDarkTransparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="208dp"
            android:scaleType="centerCrop"
            android:src="@drawable/image_you_want"
            app:layout_collapseMode="parallax"
            android:background="@color/colorPrimaryDark"

            />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            android:background="@color/colorPrimaryDarkTransparent2"
            app:titleTextAppearance="@style/AppBarTitleappearance"
            app:subtitleTextAppearance="@style/AppBarSubtitleApppearanceLight"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways">

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

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabIndicatorHeight="3dp"
        app:tabMode="scrollable"
        app:tabGravity="center"
        android:elevation="4dp"
        app:tabIndicatorColor="@color/ornage"
        app:tabTextAppearance="@style/NavigationTabTextAppeareance"
        />


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

确保布局的根标记中有以下命名空间

xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"

根据您的要求，您可以使用属性

在该位置使用任何布局

app:layout_collapseMode="parallax"

我希望你能得到一些帮助。

Answer 2

您想要折叠的视图必须包含在CollapsingToolbarLayout内的AppBarLayout内。

尝试以下结构：

<....CoordinatorLayout
    ....
    ... 
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        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"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!-- Your collapsing content will goes here -->

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

     <...NestedScrollView
         ..... 
         app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</....CoordinatorLayout>

如何折叠嵌套在CoordinatorLayout中的ImageView

2 个答案: