首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CollapsingToolbarLayout:在顶部修复自定义布局

CollapsingToolbarLayout 是 Android 中用于创建可折叠工具栏的一个布局容器,通常与 CoordinatorLayoutAppBarLayout 结合使用。要在 CollapsingToolbarLayout 的顶部固定自定义布局,你可以使用 app:layout_collapseMode="pin" 属性来确保自定义布局在滚动时保持在顶部。

以下是一个示例代码,展示了如何在 CollapsingToolbarLayout 的顶部固定自定义布局:

XML 布局文件

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 自定义布局 -->
            <LinearLayout
                android:id="@+id/custom_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_collapseMode="pin">

                <!-- 添加你的自定义视图 -->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Custom View 1" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Custom View 2" />

            </LinearLayout>

            <!-- 标题栏 -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 内容视图 -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match营parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 添加你的内容视图 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Scrollable content goes here..." />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

解释

  1. CoordinatorLayout:作为根布局,负责协调子视图之间的交互。
  2. AppBarLayout:包含 CollapsingToolbarLayout,用于实现可折叠的工具栏效果。
  3. CollapsingToolbarLayout:包含自定义布局和 Toolbar,并设置 app:layout_scrollFlags="scroll|exitUntilCollapsed" 以实现滚动效果。
  4. 自定义布局:使用 app:layout_collapseMode="pin" 属性固定在顶部。
  5. Toolbar:也使用 app:layout_collapseMode="pin" 属性固定在顶部。
  6. NestedScrollView:作为内容视图,包含可滚动的内容。

通过这种方式,你可以确保自定义布局在滚动时保持在顶部,并且不会随着工具栏的折叠而消失。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

31分41秒

【玩转 WordPress】腾讯云serverless搭建WordPress个人博经验分享

领券