Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现折叠置顶效果

文章目录

  • [Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现折叠置顶效果](#Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现折叠置顶效果)

Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现折叠置顶效果

概述

  • CoordinatorLayout:根容器,是一个FrameLayout,负责协调子视图之间的交互。
  • AppBarLayout:CoordinatorLayout的子视图,是一个LinearLayout,负责实现折叠和展开效果。
  • CollapsingToolbarLayout:AppBarLayout的子视图,是一个FrameLayout,负责丰富的折叠效果。

布局结构:

复制代码
- CoordinatorLayout
	- AppBarLayout
		- CollapsingToolbarLayout
			- 折叠区域			
		- 需要置顶区域
	- NestedScrollView

常用属性

  • layout_collapseMode:折叠模式
    • none、pin、parallax
  • layout_collapseParallaxMultiplier:视差滚动效果的速度系数。
    • 0.0 ~ 1.0
  • layout_gravity:元素在CollapsingToolbarLayout中的位置。
    • top, bottom, left, right, center
  • contentScrim:折叠时显示的样式或图片。
  • expandedTitleMargin:展开状态下标题的边距。
  • layout_behavior:指定滚动行为。
    • @string/appbar_scrolling_view_behavior

方式一

xml 复制代码
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".collapsing.Collapsing1Activity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/img_apple"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="标题" />
        </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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="800dp"
                android:background="#999"
                android:gravity="center"
                android:text="内容区" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

方式二

xml 复制代码
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".collapsing.Collapsing2Activity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/img_apple"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5" />

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

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/black"
            app:tabIndicatorFullWidth="false"
            app:tabMode="fixed"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="0dp"
            app:tabSelectedTextColor="@color/black" />
    </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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1200dp"
                android:background="#999"
                android:gravity="center"
                android:text="内容区" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
相关推荐
帅锅锅00718 分钟前
SeLinux Type(类型)深度解析
android·操作系统
2501_9159214338 分钟前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 小时前
iOS 26 App 开发阶段性能优化 从多工具协作到数据驱动的实战体系
android·ios·小程序·uni-app·iphone·webview·1024程序员节
2501_915106321 小时前
深入剖析 iOS 26 系统流畅度,多工具协同监控与性能优化实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
小彤花园1 小时前
GooglePlay更改签名秘钥报错(2025最新版)
android·google
Answer_momo2 小时前
一文读懂 Kotlin 数据流 Flow 的使用
android
雨白2 小时前
Kotlin Flow 入门:构建响应式异步数据流
android·kotlin
阿里云云原生3 小时前
告别手动埋点!Android 无侵入式数据采集方案深度解析
android·云原生
Tlaster4 小时前
使用KMP实现原生UI + Compose混合的社交客户端
android·ios·开源
袁煦丞 cpolar内网穿透实验室4 小时前
安卓旧机变服务器,KSWEB部署Typecho博客并实现远程访问:cpolar内网穿透实验室第645个成功挑战
android·运维·服务器·远程工作·内网穿透·cpolar