CoordinatorLayout与AppBarLayout营造电商二级悬浮效果

2023-12-03 07:27:23

类似京东、淘宝等电商APP的二级悬浮效果，在用户滚动页面时，顶部悬浮条始终停留在屏幕顶部，二级悬浮条随着滚动内容的显示，在特定位置停留在屏幕顶部，营造出悬停的效果。此效果由CoordinatorLayout和AppBarLayout配合实现。

本文将手把手带你实现此效果，让你轻松打造用户体验一流的电商APP。

1. 了解CoordinatorLayout和AppBarLayout

CoordinatorLayout

CoordinatorLayout是一个用于协调其子视图位置和行为的容器布局。它允许你定义子视图之间的依赖关系，并控制它们如何响应滚动、嵌套滚动和其他手势。

AppBarLayout

AppBarLayout是一个用于创建应用程序栏的布局。它可以包含标题、导航抽屉和其他元素。AppBarLayout可以与CoordinatorLayout一起使用，以实现滚动时悬浮的效果。

2. 布局结构

<CoordinatorLayout>

    <!-- 顶部悬浮条 -->
    <AppBarLayout>
        <Toolbar />
    </AppBarLayout>

    <!-- 二级悬浮条 -->
    <LinearLayout
        app:layout_scrollFlags="scroll|enterAlways"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior">

        <!-- 二级悬浮条内容 -->
    </LinearLayout>

</CoordinatorLayout>

3. 悬浮条属性

顶部悬浮条

<AppBarLayout>
    <Toolbar />
</AppBarLayout>

Toolbar是顶部悬浮条的内容。

二级悬浮条

<LinearLayout
    app:layout_scrollFlags="scroll|enterAlways"
    app:layout_behavior="com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior">

    <!-- 二级悬浮条内容 -->
</LinearLayout>

app:layout_scrollFlags="scroll|enterAlways"：指定二级悬浮条跟随内容滚动，并始终停留在屏幕顶部。
app:layout_behavior="com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior"：指定二级悬浮条的行为，由AppBarLayout.ScrollingViewBehavior控制。

4. 完整代码

<CoordinatorLayout>

    <AppBarLayout>
        <Toolbar />
    </AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout.ScrollingViewBehavior">

        <!-- 二级悬浮条内容 -->
    </LinearLayout>

</CoordinatorLayout>