让 FAB 按预期位于底部控件之上

写一个简单界面,简单的不能再简单,结果还是翻了车,调整了两天。布局分为上中下三个部分,上部和中部是 AppBarLayoutViewPager,它们同处于一个 LinerLayout 之中,下部就是一个 TabLayout。还有一个零碎,也就是今天的主角:FloatingActionButton。XML 文件如下:

如果你在 Android Studio 的界面设计器或者真机上跑这个界面,会发现它“大致”符合安排,但并不是完全符合期望。

问题就在 FAB 上。可以看到,FAB 位于 TabLayout 的右上,与屏幕的右边缘边距为 16(符合 android:layout_margin 的设置),但是期望的出现在 FAB 和 TabLayout 之间的水平间距是没有的,它俩在垂直方向上是紧紧挨在一起的。你会发现,无论是调整 android:layout_margin,还是独立调整 android:layout_marginBottom 属性,都不会有任何效果。可是如果你据此得出底边距设置是失效的结论,那么做个试验:从布局中把 TabLayout 移除,你会发现 FAB 距离屏幕底边的边距是符合设置的。

变换各种关键字搜索这个问题,发现有人在数年前问过一个非常类似的:Position Floating Action Bar above bottom tabs,应者寥寥。其中第一个回复里有个链接,点击去查看可知问题题目是 Android Design Library – Floating Action Button Padding/Margin Issues,相关性确实很强。在高赞回复 2016 年 10 月的更新中,提到关键是一个属性 app:useCompatPadding="true"。将此属性加上以后,则 FAB 就会和 TabLayout 如愿分离。但是,其边距的行为仍有不解的地方。首先是观察到距屏幕的右边距显著大于距 TabLayout 的底边距,反应过来恐怕是 android:layout_margin 同时也在生效,于是将之去除,去除后又会发现距屏幕的右边距显著小于距 TabLayout 的底边距,令人迷惑。好在摸清了规律,适当调整 android:layout_margin 的值是可以达到这两个边距相等的效果的。至于其中的隐情,有时间再追查吧。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注