CollapsingToolbarLayout - 如何固定工具栏和另一个视图,但仍然有标题图像的parralax?

时间:2018-01-04 09:59:52

标签: android material-design

让我们先来看看我想要实现的目标:

enter image description here

因此黄色区域将用于文本。它不应该移动。它应始终处于固定的静态位置。工具栏同样也应该是静态的并始终固定。但是蓝色部分会有一个图像。它应该在滚动和视差时收缩。因此,如果用户向上滚动,图像应向上滚动并最终以视差消失。我无法让黄色区域移动。

如果你需要知道,蓝色区域下面是一个scrollView。

您知道,黄色条实际上是一个匹配父级和黄色背景的文本视图,但它可以是我想的任何视图。让我们来看看到目前为止我做了什么:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="@color/white"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    app:layout_collapseMode="pin"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/white"
    app:title="SHOPPING BAG"
    android:elevation="4dp"/>


<RelativeLayout
    android:layout_width="match_parent"
    app:layout_scrollFlags="exitUntilCollapsed"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_tax_rebate_msg"
        fontPath="fonts/Medium-Extd.otf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/bright_yellow"
        android:lineSpacingExtra="6sp"
        android:padding="15dp"
        android:text="@string/tax_rebate_disclaimer"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="10sp"/>


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:layout_below="@id/tv_msg"
        app:layout_collapseMode="parallax"
        android:orientation="vertical"/>

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

//... rest if it is a scrollview, not important

因此我再次遇到的问题是,当我滚动时黄色区域正在移动。我如何制作它只有当用户滚动时蓝色区域缩小?黄色区域将具有重要信息,并且永远不会被用户看不到。

1 个答案:

答案 0 :(得分:0)

您可以使用协调员布局行为来实现您的目标。

基本思想不是将协调器布局设置为对所有内容执行默认行为,而是可以通过创建自定义行为来细化每个视图。通过这种方式,你可以做一些奇特的事情。