如何实现滚动TextInputLayout时FAB上滑隐藏、下滑显示?能否仅用XML?
实现FAB随滚动隐藏/显示(纯XML方案)
要解决FAB遮挡长文本的问题,可以仅通过XML实现滚动时的FAB隐藏/显示,核心是借助CoordinatorLayout和Material库自带的滚动行为,调整布局结构即可:
关键修改点
- 根布局替换为
CoordinatorLayout:它是实现视图联动的核心容器 - 将原
ScrollView替换为NestedScrollView:普通ScrollView不支持滚动事件传递,无法被CoordinatorLayout监听 - 给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
相关产品推荐
相关产品推荐

