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

如何实现滚动TextInputLayout时FAB上滑隐藏、下滑显示?能否仅用XML?

实现FAB随滚动隐藏/显示(纯XML方案)

要解决FAB遮挡长文本的问题,可以仅通过XML实现滚动时的FAB隐藏/显示,核心是借助CoordinatorLayout和Material库自带的滚动行为,调整布局结构即可:

关键修改点

  1. 根布局替换为CoordinatorLayout:它是实现视图联动的核心容器
  2. 将原ScrollView替换为NestedScrollView:普通ScrollView不支持滚动事件传递,无法被CoordinatorLayout监听
  3. 给FAB添加滚动行为属性:使用Material库自带的HideBottomViewOnScrollBehavior,自动处理上滚隐藏、下滚显示逻辑

修改后的完整布局代码

<?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"
    tools:context=".EditFragment"
    android:background="@color/background_lilac">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/tilTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            app:errorEnabled="false"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:selectAllOnFocus="true"
                android:imeOptions="actionNext"
                android:singleLine="true"
                android:hint="@string/note_title_hint"/>

        </com.google.android.material.textfield.TextInputLayout>

        <!-- 替换为NestedScrollView,支持滚动事件传递 -->
        <androidx.core.widget.NestedScrollView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            android:fillViewport="true"
            android:scrollbarThumbVertical="@drawable/scrollbar"
            android:scrollbarFadeDuration="3000"
            app:layout_constraintTop_toBottomOf="@id/tilTitle"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/tilContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/edContent"
                    android:gravity="top"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:hint="@string/note_content_hint"/>

            </com.google.android.material.textfield.TextInputLayout>

        </androidx.core.widget.NestedScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- 添加滚动行为,实现自动隐藏/显示 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabSave"
        android:src="@drawable/ic_done"
        android:contentDescription="@string/note_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_anchor="@id/tilContent"
        app:layout_anchorGravity="bottom|end"
        app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

为什么之前用CoordinatorLayout没成功?

你之前的尝试失败大概率是因为使用了普通ScrollView,它没有实现NestedScrollingChild接口,无法将滚动事件传递给CoordinatorLayout,导致FAB的滚动行为无法触发。换成NestedScrollView后,就能正常联动了。

补充说明

  • HideBottomViewOnScrollBehavior是Material库内置的行为,默认逻辑就是:向上滚动时FAB滑出屏幕,向下滚动时滑入屏幕,完全符合你的需求
  • 不需要额外编写Java/Kotlin代码,纯XML即可实现
  • 如果需要自定义隐藏/显示的动画速度或逻辑,可以继承HideBottomViewOnScrollBehavior重写相关方法,但默认行为已经足够满足大多数场景

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.13 11:53:23