Question

我正在尝试在我的应用中使用折叠工具栏。我想实现像this这样的视图。我试过这样做，但似乎没什么帮助。我尝试在我的折叠工具栏标签中添加相对布局，但它像ImageView一样滚动并变得不可见。我希望在折叠工具栏未展开时，我的相对布局固定在顶部，如链接所示。

如何实现这一目标？

这是我到目前为止所做的事情。

<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="350dp"
    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:expandedTitleMarginBottom="32dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="@mipmap/img_instructor"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />
        <android.support.v7.widget.Toolbar
            android:id="@+id/anim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@color/colorPrimaryDark">

            <RelativeLayout
                android:layout_width="match_parent"
                android:id="@+id/reltName"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/trainerName"
                    android:textColor="@color/white"
                    android:textStyle="bold"
                    android:textSize="@dimen/txt_25_sp"
                    android:layout_marginTop="16dp"
                    android:layout_marginLeft="16dp"
                    android:text="i am khan"/>

            </RelativeLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:id="@+id/relCategory"
                android:layout_below="@+id/reltName"
                app:layout_collapseMode="parallax"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/trainerCategories"
                    android:textColor="@color/white"
                    android:textStyle="bold"
                    android:textSize="16sp"
                    android:layout_marginLeft="16dp"
                    android:text="hello there"/>

            </RelativeLayout>

        </RelativeLayout>

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


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


<android.support.v7.widget.RecyclerView
    android:id="@+id/scrollableview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Answer 1

您应该将RelativeLayout移到CollapsingToolbarLayout

之外

您的观点应该是这样的

<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:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    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:expandedTitleMarginBottom="32dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|enterAlways">

        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="@mipmap/ic_launcher"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/anim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


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


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimaryDark"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/reltName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/trainerName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginTop="16dp"
                android:text="i am khan"
                android:textColor="@android:color/white"
                android:textSize="25sp"
                android:textStyle="bold" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relCategory"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/reltName"
            app:layout_collapseMode="parallax">

            <TextView
                android:id="@+id/trainerCategories"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:text="hello there"
                android:textColor="@android:color/white"
                android:textSize="16sp"
                android:textStyle="bold" />

        </RelativeLayout>

    </RelativeLayout>

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


<android.support.v7.widget.RecyclerView
    android:id="@+id/scrollableview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

如何实现折叠工具栏布局，其中自定义textview在顶部开始？

1 个答案: