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>
相关推荐
QmDeve7 小时前
Android内存泄漏排查难?手把手带你用Profiler“揪出”元凶!(附实战案例)
android·android studio
WheatHusks8 小时前
android中调用相册
android
路上^_^17 小时前
安卓基础组件023-SharedPerferences
android
恋猫de小郭17 小时前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
Andytoms21 小时前
Android geckoview 集成,JS交互,官方demo
android·javascript·交互
2501_915909061 天前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
锋风1 天前
基于Binder的4种RPC调用
android
行墨1 天前
CoordinatorLayout基本使用与分析—— Group 批量控制
android
行墨1 天前
CoordinatorLayout基本使用与分析——水平偏移(Horizontal Bias)
android
私房菜1 天前
Android dmabuf_dump 命令详解
android·libdmabufinfo·linmeminfo·dmabuf_dump