如何避免 FAB 与 BottomNavigationView 重叠？

Question

我的活动中有一个 fab 和 BottomNavigationView，我正在使用 fab 隐藏和显示 BottomNavigationView。我的以下代码适用于 Android 7.0（在 1080 x 1920 上）但在 4.4（在 768 x 1280 上）FAB 和 BottomNavigationView 都不可见，在 logcat 中它说

Could not find class 'android.graphics.drawable.RippleDrawable', referenced from method android.support.v7.widget.AppCompatImageHelper.hasOverlappingRendering

我也收到关于 FAB 的警告

@id/fab can overlap @id/navigation if @id/fab grows due to localize text expansion. If relative layout has text or button items aligned to left and right sides they can overlap each other due to localized text expansion unless they have mutual constraints like 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 为例。