滚动时多行标题转为单行的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
相关产品推荐
相关产品推荐

