写一个简单界面，简单的不能再简单，结果还是翻了车，调整了两天。布局分为上中下三个部分，上部和中部是 AppBarLayout 和 ViewPager，它们同处于一个 LinerLayout 之中，下部就是一个 TabLayout。还有一个零碎，也就是今天的主角：FloatingActionButton。XML 文件如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?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:id="@+id/cl_content" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <androidx.appcompat.widget.Toolbar android:id="@+id/tb_base" android:layout_width="match_parent" android:layout_height="wrap_content" app:titleTextColor="#FFFFFF" /> </com.google.android.material.appbar.AppBarLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/fragments_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_fragments" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="@color/colorPrimary" app:tabTextColor="#c8c8c8" app:tabSelectedTextColor="#FFFFFF" app:tabIndicatorColor="#00000000"/> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab_add_filter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end" android:layout_margin="16dp" android:src="@drawable/ic_baseline_add_white_24" app:fabCustomSize="48dp" app:layout_anchor="@id/tab_fragments" app:layout_anchorGravity="top|end" /> </androidx.coordinatorlayout.widget.CoordinatorLayout> |
如果你在 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 的值是可以达到这两个边距相等的效果的。至于其中的隐情，有时间再追查吧。