android - 如何避免 FAB 与 BottomNavigationView 重叠？

Question

我的 Activity 中有一个 fab 和 BottomNavigationView，我正在使用 fab 来隐藏和显示 BottomNavigationView。我的以下代码在 Android 7.0(1080 x 1920)上运行良好，但在 4.4(768 x 1280)上 FAB 和 BottomNavigationView 都不可见，在 logcat 中它说

找不到从方法 android.support.v7.widget.AppCompatImageHelper.hasOverlappingRendering 引用的类“android.graphics.drawable.RippleDrawable”

我也收到关于 FAB 的警告

如果@id/fab 由于本地化文本扩展而增长，@id/fab 可以与@id/navigation 重叠。
如果相对布局的文本或按钮项与左侧和右侧对齐，它们可能会由于本地化文本扩展而相互重叠，除非它们具有相互约束，例如 toEndOf/toStartOf。

这是我的布局

<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom|end"
    android:clickable="true"
    app:fabSize="mini"
    app:rippleColor="@color/colorPrimary"
    android:layout_margin="16dp"
    app:srcCompat="@drawable/ic_show" />

    <FrameLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container"
        xmlns:android="http://schemas.android.com/apk/res/android">

        <!-- FrameLayout contents -->

    </FrameLayout>

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="@android:color/transparent"
        android:elevation="3dp">

        <!-- FrameLayout contents -->

    </FrameLayout>


        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimary"
            android:iconifiedByDefault="false"
            app:itemIconTint="#fff"
            app:itemTextColor="#fff"
            app:menu="@menu/bottom_bar"/>

</RelativeLayout>

这就是我隐藏/显示底部的方式

fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            if(bottomNavigationView.getVisibility() == View.VISIBLE){

                bottomNavigationView.setVisibility(GONE);

                fab.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_show));

                final ObjectAnimator moveFab
                        = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Y, fab.getY(), 0);
                moveFab.setDuration(300);
                moveFab.setInterpolator(new DecelerateInterpolator());
                moveFab.start();

            }else if(bottomNavigationView.getVisibility() == View.GONE){

                bottomNavigationView.setVisibility(View.VISIBLE);

                fab.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_hide));

                final ObjectAnimator moveFab
                        = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Y, fab.getY(), -150);
                moveFab.setDuration(300);
                moveFab.setInterpolator(new DecelerateInterpolator());
                moveFab.start();

            }

        }
    });

Answer 1

最简单的方法是使用CoordinatorLayout。参见 this tutorial举个例子。