You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

滚动时多行标题转为单行的Toolbar实现方案

实现多行标题折叠Toolbar

要实现展开时显示多行标题、滚动折叠后显示单行标题的效果,可以通过AppBarLayout配合CollapsingToolbarLayout,结合滚动监听动态切换标题的显示状态来完成,以下是具体实现方案:

一、布局结构

使用CoordinatorLayout作为父容器,嵌套AppBarLayout和可滚动内容(比如NestedScrollView),在CollapsingToolbarLayout中放置标题文本和Toolbar:

<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:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 用于显示多行/单行的标题文本 -->
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="这是一个支持多行显示的长标题,可以自动换行展示更多内容"
                android:textSize="28sp"
                android:maxLines="3"
                android:padding="16dp"
                android:textColor="@android:color/white"
                app:layout_collapseMode="parallax"/>

            <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="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp"
            android:textSize="16sp"/>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

二、滚动监听与标题切换

通过AppBarLayout.OnOffsetChangedListener监听折叠进度,动态修改标题的maxLines、字号和内边距,实现展开/折叠状态的切换:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.appbar.AppBarLayout

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val appBarLayout = findViewById<AppBarLayout>(R.id.app_bar_layout)
        val toolbarTitle = findViewById<TextView>(R.id.toolbar_title)

        appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBar, verticalOffset ->
            val totalScrollRange = appBar.totalScrollRange
            val collapseProgress = Math.abs(verticalOffset).toFloat() / totalScrollRange.toFloat()

            // 根据折叠进度切换标题状态
            if (collapseProgress >= 0.5f) {
                // 折叠状态:单行显示,缩小字号,适配Toolbar高度
                toolbarTitle.maxLines = 1
                toolbarTitle.textSize = 20f
                toolbarTitle.setPadding(16, 12, 16, 12)
            } else {
                // 展开状态:多行显示,恢复大字号和默认内边距
                toolbarTitle.maxLines = 3
                toolbarTitle.textSize = 28f
                toolbarTitle.setPadding(16, 16, 16, 16)
            }
        })
    }
}

三、依赖配置

确保项目中引入Material Components库(在Module级别的build.gradle中添加):

dependencies {
    implementation 'com.google.android.material:material:1.9.0'
    // 其他依赖...
}

优化提示

  • 如果标题是动态内容,可添加android:breakStrategy="balanced"优化换行效果,让多行标题排版更美观;
  • 调整collapseProgress的阈值(0.5f)可以控制切换单行/多行的时机,根据需求自定义;
  • 若需要完全隐藏展开态标题、显示Toolbar自带标题,也可以通过切换两个文本控件的可见性实现(布局中分别添加展开/折叠态标题,监听滚动切换visibility)。

内容的提问来源于stack exchange,提问作者Iban Arriola

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.14 10:01:22