滚动时如何在顶部固定布局位置 [英] How to fix a layout position on top when scrolling

问题描述

我在活动中间有一个布局(或选项卡布局)，我希望当用户滚动并且此布局到达顶部时，它停留在顶部(替换工具栏)，其余内容保持滚动. 例如，我的页面如下所示:

I have a layout (or tab layout) in the middle of the activity and I want when the user scrolls and this layout reach the top, it stays at the top (replace the toolbar) and rest of the content keep scrolling. For example, my page looks like this:

________________________________
|        custom toolbar        |
|------------------------------|
|                              |
|         some content         |
|                              |
|------------------------------|
|    layout (or tab layout)    |
|------------------------------|
|                              |
|     rest of the contents     |
|                              |
|                              |
|                              |
|                              |
|______________________________|

我希望它在滚动后像这样:

And I want it to be like this after scrolling:

________________________________
|     layout (or tab layout)   |
|------------------------------|
|                              |
|     rest of the contents     |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|______________________________|

有点像我的应用和Play商店应用中的游戏"页面.

Kind of like the 'My apps & games' page in Play Store app.

推荐答案

1..使用CoordinatorLayout作为根布局.

2..将AppBarLayout和NestedScrollView添加为CoordinatorLayout

    AppBarLayout     -> Toolbar + Some content + TabLayout
    NestedScrollView -> Rest of the contents

3..在AppBarLaout内，添加子级CollapsingToolbarLayout和TabLayout.将Toolbar和ImageView保留在CollapsingToolbarLayout中.

3. Inside AppBarLaout, add child CollapsingToolbarLayout and TabLayout. Keep Toolbar and ImageView into CollapsingToolbarLayout.

   <AppBarLaout>
       <CollapsingToolbarLayout>
           <ImageView /> 
           <Toolbar />
       </CollapsingToolbarLayout>   

       <TabLayout />
   </AppBarLaout>

4.，将属性app:layout_scrollFlags="scroll|exitUntilCollapsed"添加到CollapsingToolbarLayout，将属性app:layout_scrollFlags="scroll|enterAlways"添加到Toolbar，以产生折叠效果.

4. Add attribute app:layout_scrollFlags="scroll|exitUntilCollapsed" to CollapsingToolbarLayout and attribute app:layout_scrollFlags="scroll|enterAlways" to Toolbar for collapsing effect.

5..为您的内容scrolling行为将属性app:layout_behavior="@string/appbar_scrolling_view_behavior"添加到NestedScrollView.

5. Add attribute app:layout_behavior="@string/appbar_scrolling_view_behavior" to NestedScrollView for your content scrolling behavior.

您最终的布局结构应为:

<CoordinatorLayout>

    <AppBarLaout>
       <CollapsingToolbarLayout>
           <ImageView /> 
           <Toolbar />
       </CollapsingToolbarLayout>   

       <TabLayout />
    </AppBarLaout>

    <NestedScrollView>

        <!-- Your content -->

    </NestedScrollView>

<CoordinatorLayout>

以下是有效的代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    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="206dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/image_header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                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"
                android:minHeight="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:tabGravity="fill"
            app:tabMode="scrollable" />

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Your content -->

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

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

希望这会有所帮助〜

这篇关于滚动时如何在顶部固定布局位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！